From 6333591b6e560f2759ce88295e8d2d070f072530 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 16 May 2024 13:31:16 +0200
Subject: [PATCH 001/118] fix: removed default tokens as it results in them
 being used when no tokens is defined overriding the quickform default tokens

---
 packages/core/src/state/QuickformProvider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/state/QuickformProvider.tsx b/packages/core/src/state/QuickformProvider.tsx
index a97744a..81cda08 100644
--- a/packages/core/src/state/QuickformProvider.tsx
+++ b/packages/core/src/state/QuickformProvider.tsx
@@ -25,7 +25,7 @@ export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
         children,
         definition,
         payload,
-        tokens = kbaQuickFormTokens,
+        tokens,
         asContainer,
         onSubmitAsync = async (data) => { return "" }
     }

From 1ad908b595ecacf82f9b4fa91aa1b717f8549e8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 22 May 2024 02:16:44 +0200
Subject: [PATCH 002/118] fix: regression on breaking change - icon changes to
 a more slim version

---
 .../src/components/icons/ImArrowRightIcon.tsx     | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/components/icons/ImArrowRightIcon.tsx b/packages/core/src/components/icons/ImArrowRightIcon.tsx
index 792c1bb..b8df16d 100644
--- a/packages/core/src/components/icons/ImArrowRightIcon.tsx
+++ b/packages/core/src/components/icons/ImArrowRightIcon.tsx
@@ -2,12 +2,15 @@ import React from "react";
 import { IconProps } from "./iconProps";
 import { quickformtokens } from "../../style/quickFormTokensDefinition";
 
-export const ImArrowRightIcon: React.FC<IconProps> = ({ size = '20px' }) => {
+export const ImArrowRightIcon: React.FC<IconProps> = ({ size = '20px', style }) => {
     return (
-        <> 
-            <svg viewBox="0 0 448 512" height={size} width={size} style={{ fill: quickformtokens.onSurface  }}>
-            <path stroke={quickformtokens.onSurface} d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
-            </svg>
-        </>
+        <svg style={{ fill: quickformtokens.onSurface, ... style }} width={size} stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+            <path d="M15.5 8l-7.5-7.5v4.5h-8v6h8v4.5z"></path>
+        </svg>
+        //<> 
+        //    <svg viewBox="0 0 448 512" height={size} width={size} style={{ fill: quickformtokens.onSurface  }}>
+        //    <path stroke={quickformtokens.onSurface} d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
+        //    </svg>
+        //</>
     );
 };
\ No newline at end of file

From 03ea6852f8c141bca9b024aa998d2a5ac9abd0ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 22 May 2024 02:18:15 +0200
Subject: [PATCH 003/118] fix: regression on breaking change - question numbers
 hould be hanging to the left such headline/subline is aligned under
 eachother. Layout controls if shown still.

---
 .../question-number/QuestionNumber.tsx           |  5 +++++
 .../question/components/QuestionHeading.tsx      | 16 +++++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/question-number/QuestionNumber.tsx b/packages/core/src/components/question-number/QuestionNumber.tsx
index ade4ae8..ead3126 100644
--- a/packages/core/src/components/question-number/QuestionNumber.tsx
+++ b/packages/core/src/components/question-number/QuestionNumber.tsx
@@ -10,6 +10,11 @@ const defaultHeadingNumberDisplayProvider: HeadingNumberDisplayProvider = () =>
 
 registerQuickFormService("headingNumberDisplayProvider", defaultHeadingNumberDisplayProvider);
 
+/**
+ * Deprecated: Use QuestionHeading instead
+ * @param param0
+ * @returns
+ */
 export const QuestionNumber: React.FC<{ questionNum?: number }> = ({ questionNum }) => {
     const shouldDisplayNumber = resolveQuickFormService("headingNumberDisplayProvider")();
     if (!shouldDisplayNumber) {
diff --git a/packages/core/src/components/question/components/QuestionHeading.tsx b/packages/core/src/components/question/components/QuestionHeading.tsx
index 246550c..de4c717 100644
--- a/packages/core/src/components/question/components/QuestionHeading.tsx
+++ b/packages/core/src/components/question/components/QuestionHeading.tsx
@@ -4,6 +4,7 @@ import { useQuickForm } from "../../../state/QuickFormContext";
 import { quickformtokens } from "../../../style/quickFormTokensDefinition";
 import { HeadingNumberDisplayProvider, registerQuickFormService, resolveQuickFormService } from "../../../services/QuickFormServices";
 
+
 type QuestionHeadingProps = {
     readonly children: ReactNode;
     readonly style?: React.CSSProperties;
@@ -28,10 +29,19 @@ export const QuestionHeading: React.FC<QuestionHeadingProps> = ({ children, labe
 
     return (
         <h1 style={{ ...style, ...headingStyles }}>
-            {shouldDisplayNumber && <span style={{ marginRight: quickformtokens.gap1, fontSize: quickformtokens.questionNumberFontSize, }}>
-                <span style={{ marginRight: '5px' }}>{label}</span>
+            {shouldDisplayNumber && <div style={{
+                marginRight: quickformtokens.gap1, fontSize: `calc( ${quickformtokens.questionNumberFontSize} * 0.85 )` ,
+                position: 'absolute',
+                left: '0px',
+                translate: '-110px',
+                justifyContent: 'end',
+                width: '100px' ,
+                display: 'flex',
+                alignItems: 'center'   
+            }}>
+                <span style={{ marginRight: quickformtokens.gap1}}>{label}</span>
                 <ImArrowRightIcon size="12px" />
-            </span>}
+            </div>}
             {children}
         </h1>
     );

From 66b0f7f4b412c9cf580eaf768e3a47fe6d144ca2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 22 May 2024 02:21:40 +0200
Subject: [PATCH 004/118] feat: Added enter support on active questions and
 support for knowing which question is currently active. Answering on enter
 and onblur for multiline

---
 .../baseinput/BaseInputComponent.tsx          | 41 ++++++++++++++++++-
 .../input-types/multiline/MultilineInput.tsx  |  2 +-
 .../slide-renderer/SlideRenderer.tsx          |  2 +-
 packages/core/src/model/QuestionModel.ts      |  4 ++
 4 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
index 81619b0..22bf772 100644
--- a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
+++ b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
@@ -1,11 +1,15 @@
 "use client";
-import { quickformtokens, useQuickForm } from "@eavfw/quickform-core";
+import { quickformtokens, useHandleEnterKeypress, useQuickForm } from "@eavfw/quickform-core";
 import { useFocusableQuestion } from "@eavfw/quickform-core/src/hooks/useFocusableQuestion";
-import { CSSProperties, ChangeEvent, InputHTMLAttributes, useState } from "react";
+import { CSSProperties, ChangeEvent, InputHTMLAttributes, useEffect, useState } from "react";
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { QuestionModel } from "@eavfw/quickform-core/src/model";
 import { IconResolver, IconType } from "../../../icons/IconResolver";
 
+import { trace } from "@opentelemetry/api";
+
+const tracer = trace.getTracer("quickform", "1.0.0");
+
 const useInputTextStyles = makeStyles({
     inputContainer: {
         display: 'flex',
@@ -63,6 +67,8 @@ type BaseInputComponentProps = {
     className?: string,
 }
 
+
+
 export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ questionModel, className, style, type, beforeIcon, afterIcon }) => {
 
     const [text, setText] = useState<string>(questionModel!.output);
@@ -70,6 +76,14 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
     const { answerQuestion } = useQuickForm();
     const styles = useInputTextStyles();
 
+    const span = trace.getActiveSpan();
+
+    if (span) {
+        span.addEvent("BaseInputComponent:render");
+    }
+
+    
+
     const resize = () => {
         const input = ref.current;
         if (!input)
@@ -90,13 +104,36 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
     }
 
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+        console.log("BaseInputComponent:handleChange", event.target.value);         
+        if (span) {
+            span.addEvent("BaseInputComponent:handleChange", { 'value': event.target.value });
+        }
+        //EXPLAIN: WHY IS THIS HERE? If no reason, lets remove.
         if (event.target.value === "")
             questionModel.errorMsg = "";
+
+
         setText(() => event.target.value);
         answerQuestion(questionModel.logicalName, event.target.value, true);
         resize();
     }
 
+    /**
+     * The input control is responsible of setting it self focus when becoming active.
+     * - We should also listen to input controls being focused and if not active, trigger a reducer that its set active.
+     *   Ultimatly removing active from other questions. This happens right now when an answer is given (intermediate or not), so not critical.
+     */
+    useEffect(() => {
+        if (questionModel.isActive)
+            ref.current?.focus();
+    }, [questionModel.isActive]);
+
+    /**
+     * While a base input component is active we should answer the question upon enter.
+     */
+    useHandleEnterKeypress("baseinput", !questionModel.isActive, () => {
+        answerQuestion(questionModel.logicalName, text,false);
+    });
 
     return (
         <div className={mergeClasses(styles.inputContainer, className)} style={style}>
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 93fbba4..d9258bf 100644
--- a/packages/core/src/components/question/input-types/multiline/MultilineInput.tsx
+++ b/packages/core/src/components/question/input-types/multiline/MultilineInput.tsx
@@ -61,7 +61,7 @@ export const MultilineInput: InputComponentType<MultilineProperties> = ({ questi
     }, [ref, isFirstQuestionInCurrentSlide, questionModel.logicalName]);
 
     return (
-        <textarea
+        <textarea onBlur={() => answerQuestion(questionModel.logicalName, text, false)}
             ref={ref}
             className={styles.inputText}
             placeholder={placeholder}
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index 34a0675..b585408 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -15,7 +15,7 @@ export const SlideRenderer: React.FC = () => {
     const currentSlide = state.slides[state.currIdx];
 
     /* Listens to enter key pressed */
-    const enterKeyDisabled = currentSlide.questions.some(q => q.inputType === "multilinetext");
+    const enterKeyDisabled = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive);
     useHandleEnterKeypress("slide", enterKeyDisabled, goToNextSlide);
 
     const [className, setClassName] = useState(state.classes.slide);
diff --git a/packages/core/src/model/QuestionModel.ts b/packages/core/src/model/QuestionModel.ts
index 8835c23..fa8916e 100644
--- a/packages/core/src/model/QuestionModel.ts
+++ b/packages/core/src/model/QuestionModel.ts
@@ -88,4 +88,8 @@ export type QuestionModel<TProps = InputPropertiesTypes> = {
      * the state of validation and providing feedback to the user.
      */
     validationResult?: ValidationResult;
+
+
+    /** is true if the question is active. Input controls should set focus if set to active*/
+    isActive?: boolean
 }
\ No newline at end of file

From 232300568a2e52ab4acb0c6f5d9378e6dea11f6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 22 May 2024 02:22:10 +0200
Subject: [PATCH 005/118] fix: regression on breaking change - isAnswered on
 slide added

---
 packages/core/src/model/SlideModel.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/core/src/model/SlideModel.ts b/packages/core/src/model/SlideModel.ts
index 0fc508d..4900340 100644
--- a/packages/core/src/model/SlideModel.ts
+++ b/packages/core/src/model/SlideModel.ts
@@ -24,6 +24,11 @@ export class SlideModel {
             ref: layout.ref
         } as QuestionLayout;
     }
+
+    /**
+     * When all questions are answered, the slide is considered answered.
+     */
+    public get isAnswered() { return this.questions.every(q => q.answered); }
 }
 
 export type QuestionLayout = {

From 5c7eb7ec69a128c76567bc7a5e278f195dee5d46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 22 May 2024 02:22:42 +0200
Subject: [PATCH 006/118] feat: Added support for hiding submitfield

---
 packages/core/src/services/defaults/DefaultModelTransformer.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
index e4b6dd9..7ebb428 100644
--- a/packages/core/src/services/defaults/DefaultModelTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -145,6 +145,7 @@ function handleSubmit(submit: QuickFormSubmitDefinition, payload: any): SubmitMo
 
     const submitFields = Object.fromEntries(
         Object.entries((schema?.properties ?? {}) as { [key: string]: any })
+            .filter(([k, v]) => uiSchema?.[k]?.["ui:widget"] !== "hidden")
             .map(([k, v]) => [k, {
                 inputType: v.type === "string" ? "text" : "dropdown",
                 options: v.type === "string" ? undefined : { "Y": "Yes", "N": "No" },

From 887b2a956cc0679bfd68a9985438449744b14377 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 22 May 2024 02:23:33 +0200
Subject: [PATCH 007/118] fix: regression on breaking change - submitfields
 answers not added due to not part of slide

---
 .../src/state/action-handlers/QuestionActionHandler.ts     | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/state/action-handlers/QuestionActionHandler.ts b/packages/core/src/state/action-handlers/QuestionActionHandler.ts
index 37d1bbb..4270547 100644
--- a/packages/core/src/state/action-handlers/QuestionActionHandler.ts
+++ b/packages/core/src/state/action-handlers/QuestionActionHandler.ts
@@ -24,15 +24,16 @@ export class QuestionActionHandler {
     static updateQuestionProperties = (state: QuickformState, logicalName: string, propertiesToUpdate: any): QuickformState => {
         const { slideIndex, questionIndex } = this.findSlideIdxAndQuestionIdx(state, logicalName);
 
-        if (slideIndex === -1 || questionIndex === -1) {
-            return state;
-        }
+        
 
         const newState = { ...state };
         const targetQuestion = state.isSubmitSlide ?
             newState.data.submit.submitFields[questionIndex] :
             newState.slides[slideIndex].questions[questionIndex];
 
+        if (!targetQuestion)
+            return state;
+
         Object.entries(propertiesToUpdate).forEach(([key, value]) => {
             if (targetQuestion.hasOwnProperty(key) && typeof value === 'object' && !Array.isArray(value) && value !== null) {
 

From 02e363b59e473217a7071a7d2ef49fb9655c64a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 22 May 2024 02:24:33 +0200
Subject: [PATCH 008/118] fix: regression on submit fixed, removed default
 onsubmit

---
 packages/core/src/state/QuickFormContext.tsx  | 2 +-
 packages/core/src/state/QuickformProvider.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/state/QuickFormContext.tsx b/packages/core/src/state/QuickFormContext.tsx
index 914b3a0..a81f723 100644
--- a/packages/core/src/state/QuickFormContext.tsx
+++ b/packages/core/src/state/QuickFormContext.tsx
@@ -15,7 +15,7 @@ interface IQuickFormContext {
     setErrorMsg: (msg: string) => void;
     isFirstQuestionInCurrentSlide: (questionLogicalName: string) => boolean;
     getCurrentSlide: () => SlideModel;
-    onSubmitAsync: (formdata: any) => Promise<string>;
+    onSubmitAsync?: (formdata: any) => Promise<string>;
     cssVariables: { [key: string]: string };
 }
 
diff --git a/packages/core/src/state/QuickformProvider.tsx b/packages/core/src/state/QuickformProvider.tsx
index 81cda08..a90cad3 100644
--- a/packages/core/src/state/QuickformProvider.tsx
+++ b/packages/core/src/state/QuickformProvider.tsx
@@ -15,8 +15,8 @@ type QuickFormProviderProps = {
     definition: QuickFormDefinition;
     tokens?: Partial<QuickFormTokens>;
     payload: any;
-    asContainer?: boolean,
-    onSubmitAsync?: (formdata: any) => Promise<string>,
+    asContainer?: boolean;
+    onSubmitAsync?: (formdata: any) => Promise<string>;
 }
 
 export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
@@ -27,12 +27,14 @@ export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
         payload,
         tokens,
         asContainer,
-        onSubmitAsync = async (data) => { return "" }
+        onSubmitAsync
     }
 ) => {
 
     const logger = resolveQuickFormService("logger");
     const cssVariables = defineQuickFormTokens(tokens ?? {}, definition?.layout?.tokens ?? {});
+
+    
     logger.log("cssVariables", cssVariables);
     const transform = resolveQuickFormService("modeltransformer");
     const defaultStateObj = useMemo(() => { return defaultState(transform(definition, payload), definition.layout) }, []);

From 711a06316605a5d0345540265eabcb75f0075b1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 22 May 2024 02:25:08 +0200
Subject: [PATCH 009/118] feat: Added isActive for question handing

---
 packages/core/src/state/QuickformReducer.ts | 38 +++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/packages/core/src/state/QuickformReducer.ts b/packages/core/src/state/QuickformReducer.ts
index ed71aa2..f95d399 100644
--- a/packages/core/src/state/QuickformReducer.ts
+++ b/packages/core/src/state/QuickformReducer.ts
@@ -1,3 +1,4 @@
+import { stat } from "fs/promises";
 import { resolveQuickFormService } from "../services";
 import { getAllIntermediateQuestions, getAllQuestions, isSlideVisited } from "../utils/quickformUtils";
 import { QuickformAction } from "./QuickformAction";
@@ -6,12 +7,32 @@ import { NavigationActionHandler } from "./action-handlers/NavigationActionHandl
 import { QuestionActionHandler } from "./action-handlers/QuestionActionHandler";
 import { VisibilityHandler } from "./action-handlers/VisibilityHandler";
 
+import { trace } from "@opentelemetry/api";
+
 export const quickformReducer = (state: QuickformState, action: QuickformAction): QuickformState => {
     const logger = resolveQuickFormService("logger");
     logger.log("QuickForm Reducer {action}", action.type, action);
+
+    const span = trace.getActiveSpan();
+    if (span) {
+        span.addEvent("QuickFormReducer:Triggered", { action: action.type });
+    }
+
     switch (action.type) {
 
         case 'ANSWER_QUESTION': {
+
+            if (span) {
+                span.addEvent("QuickFormReducer:ANSWER_QUESTION", { value: action.output, logicalName: action.logicalName });
+            }
+
+            for (let slide of state.slides) {
+                for (let question of slide.questions) {
+                    question.isActive = question.logicalName === action.logicalName;
+
+                }
+            }
+
             state = QuestionActionHandler.answerQuestion(state, action);
 
             // Validate the question input
@@ -27,6 +48,23 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
                 state = NavigationActionHandler.handleNextSlideAction(state);
             }
 
+            //If a question is answered, we can set the next question to be active.
+
+           
+
+            if (!action.intermediate) {
+               
+                const currentQuestion = state.slides[state.currIdx].questions.find(q => q.logicalName === action.logicalName);
+                currentQuestion.isActive = false;
+                const currentQuestionIdx = state.slides[state.currIdx].questions.indexOf(currentQuestion);
+                const nextQuestion = state.slides[state.currIdx].questions[currentQuestionIdx + 1];
+                if (nextQuestion) {
+                    nextQuestion.isActive = true;
+                   
+                }
+            }
+          
+
             return state;
         }
 

From f7286a3b6c66d24c61cac90d9783de3180f861d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 22 May 2024 02:29:39 +0200
Subject: [PATCH 010/118] added opentelemetry tracing support (startet it)

---
 package-lock.json          | 15 ++++++++-------
 packages/core/package.json |  3 ++-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fd67835..c344a5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4665,9 +4665,9 @@
       }
     },
     "node_modules/@opentelemetry/api": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.7.0.tgz",
-      "integrity": "sha512-AdY5wvN0P2vXBi3b29hxZgSFvdhdxPB9+f0B6s//P9Q8nibRWeA3cHm8UmLpio9ABigkVHJ5NMPk+Mz8VCCyrw==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.8.0.tgz",
+      "integrity": "sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==",
       "peer": true,
       "engines": {
         "node": ">=8.0.0"
@@ -17020,7 +17020,8 @@
         "react-icons": "^4.11.0"
       },
       "peerDependencies": {
-        "@griffel/react": "1.5.20"
+        "@griffel/react": "1.5.20",
+        "@opentelemetry/api": "^1.8.0"
       }
     },
     "packages/designer": {
@@ -20586,9 +20587,9 @@
       }
     },
     "@opentelemetry/api": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.7.0.tgz",
-      "integrity": "sha512-AdY5wvN0P2vXBi3b29hxZgSFvdhdxPB9+f0B6s//P9Q8nibRWeA3cHm8UmLpio9ABigkVHJ5NMPk+Mz8VCCyrw==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.8.0.tgz",
+      "integrity": "sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==",
       "peer": true
     },
     "@pnpm/config.env-replace": {
diff --git a/packages/core/package.json b/packages/core/package.json
index e1c4311..4e57b5f 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -7,7 +7,8 @@
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "@griffel/react": "1.5.20"
+    "@griffel/react": "1.5.20",
+    "@opentelemetry/api": "^1.8.0"
   },
   "devDependencies": {
     "react-icons": "^4.11.0",

From f71d6395faa79eee00e685b6afcf4f98e881be4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 22 May 2024 06:19:33 +0200
Subject: [PATCH 011/118] fix: regression on question isActive, possible
 undefined type issue

---
 packages/core/src/state/QuickformReducer.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/state/QuickformReducer.ts b/packages/core/src/state/QuickformReducer.ts
index f95d399..5b6902a 100644
--- a/packages/core/src/state/QuickformReducer.ts
+++ b/packages/core/src/state/QuickformReducer.ts
@@ -55,12 +55,14 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
             if (!action.intermediate) {
                
                 const currentQuestion = state.slides[state.currIdx].questions.find(q => q.logicalName === action.logicalName);
-                currentQuestion.isActive = false;
-                const currentQuestionIdx = state.slides[state.currIdx].questions.indexOf(currentQuestion);
-                const nextQuestion = state.slides[state.currIdx].questions[currentQuestionIdx + 1];
-                if (nextQuestion) {
-                    nextQuestion.isActive = true;
-                   
+                if (currentQuestion) {
+                    currentQuestion.isActive = false;
+                    const currentQuestionIdx = state.slides[state.currIdx].questions.indexOf(currentQuestion);
+                    const nextQuestion = state.slides[state.currIdx].questions[currentQuestionIdx + 1];
+                    if (nextQuestion) {
+                        nextQuestion.isActive = true;
+
+                    }
                 }
             }
           

From d84cc9758b3512c5661293d60af0769f49a16e5a Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Wed, 22 May 2024 13:17:39 +0200
Subject: [PATCH 012/118] fix: change default view to intro instead of settings

---
 packages/designer/src/Hooks/useDocument.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/designer/src/Hooks/useDocument.ts b/packages/designer/src/Hooks/useDocument.ts
index da3109a..c883538 100644
--- a/packages/designer/src/Hooks/useDocument.ts
+++ b/packages/designer/src/Hooks/useDocument.ts
@@ -73,7 +73,7 @@ export const useDocument = (entityName: string, attributeName: string, designerL
         }
     }, [quickformpayload, old, formData, column.logicalName]);
 
-    const view = quickformpayload.__designer?.activeView ?? "settings";
+    const view = quickformpayload.__designer?.activeView ?? "intro";
     const activeQuestion = quickformpayload.__designer?.activeQuestion;
     const activeSlide = quickformpayload.__designer?.activeSlide;
     const setActiveSlide = (slide?: string) => updateQuickFormPayload(old => { if (!old.__designer) { old.__designer = {} }; old.__designer.activeSlide = slide; return { ...old }; });

From 301143fbc9e0f1a381a0f884b68c615c5a2da4a4 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Wed, 22 May 2024 13:23:24 +0200
Subject: [PATCH 013/118] fix: defined path where designer project should
 resolve its react types from

---
 packages/designer/tsconfig.json | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/designer/tsconfig.json b/packages/designer/tsconfig.json
index 2bbf14f..5686dac 100644
--- a/packages/designer/tsconfig.json
+++ b/packages/designer/tsconfig.json
@@ -15,10 +15,14 @@
     "jsx": "preserve",
     "baseUrl": "./src",
     "paths": {
+      "react": [
+        "./../../../node_modules/@types/react"
+      ],
     },
     "rootDirs": [ "src" ],
     "experimentalDecorators": true
   },
   "exclude": [ "node_modules" ],
-  "include": [ "**/*.ts", "**/*.tsx" ]
+  "include": [ "**/*.ts", "**/*.tsx" ],
+  
 }

From b94ff1e9813768fe270982c5b34ef5d48cc06374 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Tue, 28 May 2024 07:02:52 +0200
Subject: [PATCH 014/118] fix: updated griffel - added QuickFormContainer

---
 package-lock.json                             | 46 ++++++------
 packages/core/package.json                    |  2 +-
 packages/core/src/components/QuickForm.tsx    |  1 +
 packages/playground/src/App.tsx               | 38 ++++++----
 .../container/QuickFormContainer.tsx          | 74 +++++++++++++++++++
 5 files changed, 123 insertions(+), 38 deletions(-)
 create mode 100644 packages/playground/src/components/container/QuickFormContainer.tsx

diff --git a/package-lock.json b/package-lock.json
index c344a5e..85c17c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4309,13 +4309,13 @@
       }
     },
     "node_modules/@griffel/core": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/@griffel/core/-/core-1.15.2.tgz",
-      "integrity": "sha512-RlsIXoSS3gaYykUgxFpwKAs/DV9cRUKp3CW1kt3iPAtsDTWn/o+8bT1jvBws/tMM2GBu/Uc0EkaIzUPqD7uA+Q==",
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@griffel/core/-/core-1.17.0.tgz",
+      "integrity": "sha512-OhLMYQ9zXVpKh3DULgK0Olsm1Xw5cvQuL7BV3UCWoJttAWGfrdIvSMxGCJ2FpWVyS/OBWoG4BTYh3oHTgxBWCQ==",
       "peer": true,
       "dependencies": {
         "@emotion/hash": "^0.9.0",
-        "@griffel/style-types": "^1.0.3",
+        "@griffel/style-types": "^1.2.0",
         "csstype": "^3.1.3",
         "rtl-css-js": "^1.16.1",
         "stylis": "^4.2.0",
@@ -4323,12 +4323,12 @@
       }
     },
     "node_modules/@griffel/react": {
-      "version": "1.5.20",
-      "resolved": "https://registry.npmjs.org/@griffel/react/-/react-1.5.20.tgz",
-      "integrity": "sha512-1P2yaPctENFSCwyPIYXBmgpNH68c0lc/jwSzPij1QATHDK1AASKuSeq6hW108I67RKjhRyHCcALshdZ3GcQXSg==",
+      "version": "1.5.23",
+      "resolved": "https://registry.npmjs.org/@griffel/react/-/react-1.5.23.tgz",
+      "integrity": "sha512-pOOh+h+2JibSVlRfN6rzIigkPm6HONxMHEN3IWLB3gVU7OKEQHt/EOK+1ZePMzaMILZaaFDvuwCaKCkEq6QQ/Q==",
       "peer": true,
       "dependencies": {
-        "@griffel/core": "^1.15.2",
+        "@griffel/core": "^1.17.0",
         "tslib": "^2.1.0"
       },
       "peerDependencies": {
@@ -4336,9 +4336,9 @@
       }
     },
     "node_modules/@griffel/style-types": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@griffel/style-types/-/style-types-1.0.3.tgz",
-      "integrity": "sha512-AzbbYV/EobNIBtfMtyu2edFin895gjVxtu1nsRhTETUAIb0/LCZoue3Jd/kFLuPwe95rv5WRUBiQpVwJsrrFcw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@griffel/style-types/-/style-types-1.2.0.tgz",
+      "integrity": "sha512-x166MNw0vWe5l5qhinfNT4eyWOaP48iFzPyFOfIB0/BVidKTWsEe5PmqRJDDtrJFS3VHhd/tE0oM6tkEMh2tsg==",
       "peer": true,
       "dependencies": {
         "csstype": "^3.1.3"
@@ -17020,7 +17020,7 @@
         "react-icons": "^4.11.0"
       },
       "peerDependencies": {
-        "@griffel/react": "1.5.20",
+        "@griffel/react": "1.5.23",
         "@opentelemetry/api": "^1.8.0"
       }
     },
@@ -20296,13 +20296,13 @@
       }
     },
     "@griffel/core": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/@griffel/core/-/core-1.15.2.tgz",
-      "integrity": "sha512-RlsIXoSS3gaYykUgxFpwKAs/DV9cRUKp3CW1kt3iPAtsDTWn/o+8bT1jvBws/tMM2GBu/Uc0EkaIzUPqD7uA+Q==",
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@griffel/core/-/core-1.17.0.tgz",
+      "integrity": "sha512-OhLMYQ9zXVpKh3DULgK0Olsm1Xw5cvQuL7BV3UCWoJttAWGfrdIvSMxGCJ2FpWVyS/OBWoG4BTYh3oHTgxBWCQ==",
       "peer": true,
       "requires": {
         "@emotion/hash": "^0.9.0",
-        "@griffel/style-types": "^1.0.3",
+        "@griffel/style-types": "^1.2.0",
         "csstype": "^3.1.3",
         "rtl-css-js": "^1.16.1",
         "stylis": "^4.2.0",
@@ -20310,19 +20310,19 @@
       }
     },
     "@griffel/react": {
-      "version": "1.5.20",
-      "resolved": "https://registry.npmjs.org/@griffel/react/-/react-1.5.20.tgz",
-      "integrity": "sha512-1P2yaPctENFSCwyPIYXBmgpNH68c0lc/jwSzPij1QATHDK1AASKuSeq6hW108I67RKjhRyHCcALshdZ3GcQXSg==",
+      "version": "1.5.23",
+      "resolved": "https://registry.npmjs.org/@griffel/react/-/react-1.5.23.tgz",
+      "integrity": "sha512-pOOh+h+2JibSVlRfN6rzIigkPm6HONxMHEN3IWLB3gVU7OKEQHt/EOK+1ZePMzaMILZaaFDvuwCaKCkEq6QQ/Q==",
       "peer": true,
       "requires": {
-        "@griffel/core": "^1.15.2",
+        "@griffel/core": "^1.17.0",
         "tslib": "^2.1.0"
       }
     },
     "@griffel/style-types": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@griffel/style-types/-/style-types-1.0.3.tgz",
-      "integrity": "sha512-AzbbYV/EobNIBtfMtyu2edFin895gjVxtu1nsRhTETUAIb0/LCZoue3Jd/kFLuPwe95rv5WRUBiQpVwJsrrFcw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@griffel/style-types/-/style-types-1.2.0.tgz",
+      "integrity": "sha512-x166MNw0vWe5l5qhinfNT4eyWOaP48iFzPyFOfIB0/BVidKTWsEe5PmqRJDDtrJFS3VHhd/tE0oM6tkEMh2tsg==",
       "peer": true,
       "requires": {
         "csstype": "^3.1.3"
diff --git a/packages/core/package.json b/packages/core/package.json
index 4e57b5f..70e1a08 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -7,7 +7,7 @@
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "@griffel/react": "1.5.20",
+    "@griffel/react": "1.5.23",
     "@opentelemetry/api": "^1.8.0"
   },
   "devDependencies": {
diff --git a/packages/core/src/components/QuickForm.tsx b/packages/core/src/components/QuickForm.tsx
index 40f4ddf..5718e46 100644
--- a/packages/core/src/components/QuickForm.tsx
+++ b/packages/core/src/components/QuickForm.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { useQuickForm } from "../state/QuickFormContext";
 import { Ending, Submit, Intro, SlideRenderer } from "./index";
+import "./question/input-types/index";
 
 export const QuickForm: React.FC = () => {
     const { state, setIntroVisited } = useQuickForm();
diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx
index f9edaa0..7e0afad 100644
--- a/packages/playground/src/App.tsx
+++ b/packages/playground/src/App.tsx
@@ -7,6 +7,16 @@ import "./components/buttons-input/ButtonsInput";
 import "./components/checkbox-input/CheckboxInput";
 import "./components/radio-input/RadioInput";
 import "./components/slider-input/SliderInput";
+import { QuickFormContainer } from './components/container/QuickFormContainer';
+
+const containerStyling: React.CSSProperties = {
+    width: '100%',
+    minHeight: '1200px',
+    padding: '10px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+}
 
 export const App = () => {
     return (
@@ -16,20 +26,20 @@ export const App = () => {
                 payload={{}}
                 asContainer={true}
             >
-                <QuickForm />
-                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                    <NavigationButton />
-                </div>
+                <QuickFormContainer
+                    title="Test title"
+                    subtitle='Test subtitle'
+                >
+                    <QuickForm />
+                    <div
+                        style={
+                            { display: 'flex', justifyContent: 'flex-end' }
+                        }
+                    >
+                        <NavigationButton />
+                    </div>
+                </QuickFormContainer>
             </QuickFormProvider>
         </div>
     );
-};
-
-const containerStyling: React.CSSProperties = {
-    width: '100%',
-    minHeight: '1200px',
-    padding: '10px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/packages/playground/src/components/container/QuickFormContainer.tsx b/packages/playground/src/components/container/QuickFormContainer.tsx
new file mode 100644
index 0000000..a6de368
--- /dev/null
+++ b/packages/playground/src/components/container/QuickFormContainer.tsx
@@ -0,0 +1,74 @@
+import { ErrorPopup, quickformtokens, useQuickForm } from "@eavfw/quickform-core";
+import { makeStyles, shorthands, mergeClasses } from "@griffel/react";
+import React, { PropsWithChildren } from "react";
+// import { Outfit } from "next/font/google";
+// const outfit = Outfit({ subsets: ["latin"] });
+
+
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: 'center',
+        width: "100%",
+        minWidth: "800px",
+        maxWidth: "1080px",
+        height: 'fit-content',
+        ...shorthands.padding("20px", "20px", "20px", "20px"),
+        ...shorthands.margin("20px", "0px"),
+        ...shorthands.borderRadius("20px"),
+        // borderRadius: '20px',
+        boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px',
+    }
+})
+
+type QuickFormContainerProps = {
+    title: string,
+    subtitle: string,
+}
+
+export const QuickFormContainer: React.FC<PropsWithChildren<QuickFormContainerProps>> = ({ children, subtitle, title }) => {
+
+    const styles = useStyles();
+    const { state: { errorMsg }, cssVariables } = useQuickForm();
+    return (
+        <div id="QuickForm" className={mergeClasses(styles.root/*, outfit.className*/)} style={cssVariables}>
+            <ErrorPopup message={errorMsg} />
+            <Headline
+                text={title}
+                fontWeight={800}
+                color={quickformtokens.primary}
+                lineHeight={1.2}
+            />
+            <Headline
+                text={subtitle}
+                fontWeight={300}
+                color={"inherit"}
+                lineHeight={1.1}
+            />
+            <div style={{ width: "95%", margin: "30px 0px 10px 0px" }}>
+                {children}
+            </div>
+        </div >
+
+    )
+}
+
+const Headline: React.FC<{ text: string, fontWeight: number, color: string, lineHeight: number }> = ({ text, fontWeight, color, lineHeight }) => {
+    return (
+        <h1
+            style={
+                {
+                    textAlign: "center",
+                    fontSize: "36px",
+                    fontWeight: fontWeight,
+                    color: color,
+                    lineHeight: lineHeight,
+                    margin: 0
+                }
+            }>
+            {text}
+        </h1>
+    )
+}
\ No newline at end of file

From e4fc5f094cafc48d8b6e871235bd9361b9001f01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 29 May 2024 09:20:52 +0200
Subject: [PATCH 015/118] fix: fixed a few question key/logicalname issues

---
 .../column-renderer/ColumnRenderer.tsx        | 19 ++++++++++++++-----
 .../renderers/row-renderer/RowRenderer.tsx    |  8 ++++++--
 .../slide-renderer/SlideRenderer.tsx          |  1 +
 packages/core/src/components/slide/Slide.tsx  |  2 +-
 .../defaults/DefaultInputTypeResolver.ts      |  2 +-
 .../defaults/DefaultModelTransformer.ts       |  5 ++++-
 .../action-handlers/QuestionActionHandler.ts  |  3 ++-
 .../Views/QuickFormQuestionsView.tsx          |  2 +-
 8 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/packages/core/src/components/renderers/column-renderer/ColumnRenderer.tsx b/packages/core/src/components/renderers/column-renderer/ColumnRenderer.tsx
index 3087f1d..027af46 100644
--- a/packages/core/src/components/renderers/column-renderer/ColumnRenderer.tsx
+++ b/packages/core/src/components/renderers/column-renderer/ColumnRenderer.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { QuestionModel, Column } from "../../../model";
 import { Question } from '../../question/Question';
 import { resolveQuickFormService } from '../../../services/QuickFormServices';
-import { findQuestionByLogicalName } from '../../../utils/quickformUtils';
+import { findQuestionByKey, findQuestionByLogicalName } from '../../../utils/quickformUtils';
 import { RowRenderer } from '../row-renderer/RowRenderer';
 import { fullRowStyle } from '../row-renderer/rowStyles';
 
@@ -24,8 +24,12 @@ export const ColumnRenderer: React.FC<ColumnRendererProps> = ({ column, question
     logger.log("Rendering column {@column}", column);
 
     if (column.type === "question") {
-        const question = findQuestionByLogicalName(column.ref!, questions);
-        if (!question || question.visible && question.visible.isVisible === false) return null;
+        const question = findQuestionByKey(column.ref!, questions);
+        if (!question || question.visible && question.visible.isVisible === false) {
+            if (!question)
+                logger.warn("question was not found for {@ref}", column.ref);
+            return null;
+        }
         return <Question key={question.logicalName} style={fullRowStyle} model={question} />
     }
 
@@ -33,8 +37,13 @@ export const ColumnRenderer: React.FC<ColumnRendererProps> = ({ column, question
 
         {column.rows.map((innerRow, innerRowIndex) => {
             if (innerRow.type === "question") {
-                const question = findQuestionByLogicalName(innerRow.ref!, questions);
-                if (!question || question.visible && question.visible.isVisible === false) return null;
+                const question = findQuestionByKey(innerRow.ref!, questions);
+                if (!question || question.visible && question.visible.isVisible === false) {
+                    if (!question)
+                        logger.warn("question was not found for {@ref}", innerRow.ref);
+
+                    return null;
+                }
                 return <Question key={question.logicalName} model={question} />
             } else {
                 return <RowRenderer key={"RowRenderer idx: " + innerRowIndex} row={innerRow} questions={questions} />
diff --git a/packages/core/src/components/renderers/row-renderer/RowRenderer.tsx b/packages/core/src/components/renderers/row-renderer/RowRenderer.tsx
index 574c377..09497f9 100644
--- a/packages/core/src/components/renderers/row-renderer/RowRenderer.tsx
+++ b/packages/core/src/components/renderers/row-renderer/RowRenderer.tsx
@@ -28,6 +28,10 @@ export const RowRenderer: React.FC<RowRendererProps> = ({ row, questions }) => {
     }
 
     const question = useMemo(() => findQuestionByKey(row.ref!, questions), [row.ref]);
-    if (!question || question.visible && question.visible.isVisible === false) return null;
-    return <Question key={question.logicalName} style={fullRowStyle} model={question} />
+    if (!question || question.visible && question.visible.isVisible === false) {
+        if (!question)
+            logger.warn("question was not found for {@ref}", row.ref);
+        return null;
+    }
+    return <Question key={question.questionKey} style={fullRowStyle} model={question} />
 }
\ No newline at end of file
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index b585408..24a1ebd 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -14,6 +14,7 @@ export const SlideRenderer: React.FC = () => {
     const { state, goToNextSlide } = useQuickForm();
     const currentSlide = state.slides[state.currIdx];
 
+    console.log("SlideRenderer", currentSlide);
     /* Listens to enter key pressed */
     const enterKeyDisabled = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive);
     useHandleEnterKeypress("slide", enterKeyDisabled, goToNextSlide);
diff --git a/packages/core/src/components/slide/Slide.tsx b/packages/core/src/components/slide/Slide.tsx
index f5d1679..3ba712a 100644
--- a/packages/core/src/components/slide/Slide.tsx
+++ b/packages/core/src/components/slide/Slide.tsx
@@ -9,7 +9,7 @@ type SlideProps = {
 }
 
 export const Slide: React.FC<SlideProps> = ({ model, className }: SlideProps) => {
-
+    console.log("Slide", model);
     return (
         <div className={className} id="Slide" style={{ display: 'flex', flexDirection: 'column', width: "100%" }}>
             {
diff --git a/packages/core/src/services/defaults/DefaultInputTypeResolver.ts b/packages/core/src/services/defaults/DefaultInputTypeResolver.ts
index dbbfe3f..e7189b5 100644
--- a/packages/core/src/services/defaults/DefaultInputTypeResolver.ts
+++ b/packages/core/src/services/defaults/DefaultInputTypeResolver.ts
@@ -18,7 +18,7 @@ const parseInputProperties = (questionJsonModel: QuestionJsonModel): InputProper
             .filter(([key]) => !['text', 'paragraph', 'placeholder'].includes(key))
             .map(([key, schema]) => [key, questionJsonModel[key as keyof QuestionJsonModel] ?? getDefaultValue(schema)])) as InputPropertiesTypes;
     }
-
+    //This will always return {} , do we know what we are doing here? KBA?
     const inputTypePropertiesMap: { [key: string]: () => InputPropertiesTypes } = {};
 
     return inputType in inputTypePropertiesMap ? inputTypePropertiesMap[inputType]() : {};
diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
index 7ebb428..6800057 100644
--- a/packages/core/src/services/defaults/DefaultModelTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -22,8 +22,11 @@ function processRows(rowLayouts: SlideElements, slide: SlideModel, questions: Qu
             case "question":
 
                 const question = questions[rowLayout.ref];
-                if (!question)
+                if (!question) {
+
+                    logger.warn("Question missing for row ref {@ref}", rowLayout.ref);
                     return;
+                }
 
                 rows.push(slide.addQuestion(rowLayout, question, payload));
                 break;
diff --git a/packages/core/src/state/action-handlers/QuestionActionHandler.ts b/packages/core/src/state/action-handlers/QuestionActionHandler.ts
index 4270547..9061189 100644
--- a/packages/core/src/state/action-handlers/QuestionActionHandler.ts
+++ b/packages/core/src/state/action-handlers/QuestionActionHandler.ts
@@ -87,8 +87,9 @@ export class QuestionActionHandler {
     }
 
     static async validateInput(state: QuickformState, logicalName: string): Promise<ValidationResult> {
-        const questionRef = findQuestionByKey(logicalName, getAllQuestions(state.slides));
+        const questionRef = findQuestionByLogicalName(logicalName, getAllQuestions(state.slides));
         if (!questionRef) {
+            console.log("Question not valid", [logicalName, getAllQuestions(state.slides)])
             return {
                 isValid: false,
                 message: 'Question not valid',
diff --git a/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx b/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
index e90fca2..63bdd3a 100644
--- a/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
@@ -25,7 +25,7 @@ export const QuickFormQuestionsView: React.FC<{
     const styles = useViewStyles();
     const schemas = resolveInputComponentSchemas();
 
-    console.log("QuickFormQuestionsView", [currentQuestion, questions]);
+    console.log("QuickFormQuestionsView", [currentQuestion, questions, questions[currentQuestion]]);
     if (currentQuestion && currentQuestion in questions) {
         const question = questions[currentQuestion];
 

From f533816adb4fcdbf8a6101a845dca7a4a370aaae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 29 May 2024 21:47:16 +0200
Subject: [PATCH 016/118] fix: regression on a build issue with undefined
 values

---
 .../designer/src/Components/Views/QuickFormQuestionsView.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx b/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
index 63bdd3a..8ad6c38 100644
--- a/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
@@ -25,7 +25,7 @@ export const QuickFormQuestionsView: React.FC<{
     const styles = useViewStyles();
     const schemas = resolveInputComponentSchemas();
 
-    console.log("QuickFormQuestionsView", [currentQuestion, questions, questions[currentQuestion]]);
+    console.log("QuickFormQuestionsView", [currentQuestion, questions, currentQuestion && questions[currentQuestion]]);
     if (currentQuestion && currentQuestion in questions) {
         const question = questions[currentQuestion];
 

From e37b030ecf00105718f53e49a4e262cb44a0eb8d Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Thu, 30 May 2024 08:35:57 +0200
Subject: [PATCH 017/118] fix: corrects a color issue on "Tryk Enter" text next
 to slideButton - removes some redundant code

---
 packages/core/src/components/button/Button.tsx                | 2 +-
 .../core/src/services/defaults/DefaultInputTypeResolver.ts    | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/button/Button.tsx b/packages/core/src/components/button/Button.tsx
index 02806e7..f886565 100644
--- a/packages/core/src/components/button/Button.tsx
+++ b/packages/core/src/components/button/Button.tsx
@@ -72,7 +72,7 @@ export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ childre
 
             </button>
             {!disabled && !isOnMobile && showPressEnter && (
-                <span style={{ color: quickformtokens.onPrimary, fontSize: quickformtokens.btnEnterKeyTextFontSize }}>
+                <span style={{ color: quickformtokens.onSurface, fontSize: quickformtokens.btnEnterKeyTextFontSize }}>
                     <>Tryk <strong style={{ fontWeight: 'bolder', letterSpacing: '0.04em', }}>Enter ↵</strong></>
                 </span>
             )}
diff --git a/packages/core/src/services/defaults/DefaultInputTypeResolver.ts b/packages/core/src/services/defaults/DefaultInputTypeResolver.ts
index e7189b5..92a8751 100644
--- a/packages/core/src/services/defaults/DefaultInputTypeResolver.ts
+++ b/packages/core/src/services/defaults/DefaultInputTypeResolver.ts
@@ -18,10 +18,8 @@ const parseInputProperties = (questionJsonModel: QuestionJsonModel): InputProper
             .filter(([key]) => !['text', 'paragraph', 'placeholder'].includes(key))
             .map(([key, schema]) => [key, questionJsonModel[key as keyof QuestionJsonModel] ?? getDefaultValue(schema)])) as InputPropertiesTypes;
     }
-    //This will always return {} , do we know what we are doing here? KBA?
-    const inputTypePropertiesMap: { [key: string]: () => InputPropertiesTypes } = {};
 
-    return inputType in inputTypePropertiesMap ? inputTypePropertiesMap[inputType]() : {};
+    return {};
 };
 
 registerQuickFormService("inputTypePropertiesTransformer", parseInputProperties);

From b03bacac16e19eb275e15d22042f126ec0aeec61 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Thu, 30 May 2024 08:36:49 +0200
Subject: [PATCH 018/118] fix: removes 2 second wait on phonevalidation that
 was used to demo async functionality

---
 packages/core/src/services/defaults/DefaultInputValidator.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/services/defaults/DefaultInputValidator.ts b/packages/core/src/services/defaults/DefaultInputValidator.ts
index e9c3bb3..c4b4597 100644
--- a/packages/core/src/services/defaults/DefaultInputValidator.ts
+++ b/packages/core/src/services/defaults/DefaultInputValidator.ts
@@ -38,7 +38,7 @@ const validateEmail = (output: any): ValidationResult => {
 
 const validatePhone = async (output: any): Promise<ValidationResult> => {
     // Wait for 2 seconds to demo
-    await new Promise(resolve => setTimeout(resolve, 2000));
+    // await new Promise(resolve => setTimeout(resolve, 2000));
 
     const phoneRegex = /^[0-9]{8,}$/;
     const valid = typeof output === 'string' && phoneRegex.test(output);

From 8b1f8b910b801e6d9a76923231cd65f13b8d5425 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Thu, 30 May 2024 09:11:49 +0200
Subject: [PATCH 019/118] feat: adds the option to define icons and buttonText
 pr. slide. Also fixes a bug on multilinetext where focus on inputcontrol did
 not set the question to active

---
 .../src/components/icons/IconResolver.tsx     | 11 +++---
 .../baseinput/BaseInputComponent.tsx          | 12 +++---
 .../input-types/multiline/MultilineInput.tsx  | 16 +++++---
 .../slide-renderer/SlideRenderer.tsx          | 37 ++++++++++++-------
 packages/core/src/model/SlideModel.ts         |  3 ++
 .../core/src/model/json-definitions/Layout.ts |  5 ++-
 .../defaults/DefaultModelTransformer.ts       | 11 ++++--
 packages/playground/src/App.tsx               |  2 +-
 .../allInputControlsMultipleSlidesTest.json   |  8 +++-
 9 files changed, 68 insertions(+), 37 deletions(-)

diff --git a/packages/core/src/components/icons/IconResolver.tsx b/packages/core/src/components/icons/IconResolver.tsx
index 6eb6f34..a2203b0 100644
--- a/packages/core/src/components/icons/IconResolver.tsx
+++ b/packages/core/src/components/icons/IconResolver.tsx
@@ -2,17 +2,18 @@ import { EmailIcon } from "./EmailIcon";
 import { TelephoneIcon } from "./TelephoneIcon";
 import { UserIcon } from "./UserIcon";
 import { IconProps } from "./iconProps";
+import { Checkmark } from '../icons/Checkmark';
 
 export type IconType = "Email" | "Phone" | "User";
 export type IconResolverProps = {
     type: IconType,
 } & IconProps
 
-export const IconResolver: React.FC<IconResolverProps> = ({ type, color, className, size }) => {
+export const IconResolver: React.FC<IconResolverProps> = ({ type, color, className, size, style }): JSX.Element => {
     switch (type) {
-        case "Email": return <EmailIcon className={className} color={color} size={size} />
-        case "Phone": return <TelephoneIcon className={className} color={color} size={size} />
-        case "User": return <UserIcon className={className} color={color} size={size} />
-        default: return <UserIcon className={className} color={color} size={size} />
+        case "Email": return <EmailIcon className={className} color={color} size={size} style={style} />
+        case "Phone": return <TelephoneIcon className={className} color={color} size={size} style={style} />
+        case "User": return <UserIcon className={className} color={color} size={size} style={style} />
+        default: return <Checkmark className={className} color={color} size={size} style={style} />;
     }
 }
\ No newline at end of file
diff --git a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
index 22bf772..9e7d25e 100644
--- a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
+++ b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
@@ -82,7 +82,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
         span.addEvent("BaseInputComponent:render");
     }
 
-    
+
 
     const resize = () => {
         const input = ref.current;
@@ -104,7 +104,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
     }
 
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-        console.log("BaseInputComponent:handleChange", event.target.value);         
+        console.log("BaseInputComponent:handleChange", event.target.value);
         if (span) {
             span.addEvent("BaseInputComponent:handleChange", { 'value': event.target.value });
         }
@@ -119,9 +119,9 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
     }
 
     /**
-     * The input control is responsible of setting it self focus when becoming active.
-     * - We should also listen to input controls being focused and if not active, trigger a reducer that its set active.
-     *   Ultimatly removing active from other questions. This happens right now when an answer is given (intermediate or not), so not critical.
+     * The input control is responsible of setting itself focused when becoming active.
+     * - We should also listen to inputcontrols being focused and if not active, trigger a reducer that sets it to active. Ultimately removing active from other questions. 
+     * This happens right now when an answer is given (intermediate or not), so not critical.
      */
     useEffect(() => {
         if (questionModel.isActive)
@@ -132,7 +132,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
      * While a base input component is active we should answer the question upon enter.
      */
     useHandleEnterKeypress("baseinput", !questionModel.isActive, () => {
-        answerQuestion(questionModel.logicalName, text,false);
+        answerQuestion(questionModel.logicalName, text, false);
     });
 
     return (
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 d9258bf..030d2a4 100644
--- a/packages/core/src/components/question/input-types/multiline/MultilineInput.tsx
+++ b/packages/core/src/components/question/input-types/multiline/MultilineInput.tsx
@@ -43,9 +43,10 @@ const useInputTextStyles = makeStyles({
 
 export const MultilineInput: InputComponentType<MultilineProperties> = ({ questionModel }) => {
     const styles = useInputTextStyles();
-    const { isFirstQuestionInCurrentSlide, answerQuestion } = useQuickForm();
+    const { isFirstQuestionInCurrentSlide, answerQuestion, state } = useQuickForm();
     const { placeholder, output } = questionModel;
     const [text, setText] = useState<string>(output || '');
+    const ref = useRef<HTMLTextAreaElement>(null);
 
     const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
         const newValue = event.target.value.replace(/\r?\n/g, '\n'); // Normalize newline characters
@@ -53,12 +54,15 @@ export const MultilineInput: InputComponentType<MultilineProperties> = ({ questi
         answerQuestion(questionModel.logicalName, newValue, true);
     };
 
-    const ref = useRef<HTMLTextAreaElement>(null);
+    /**
+     * The input control is responsible of setting itself focused when becoming active.
+     * - We should also listen to inputcontrols being focused and if not active, trigger a reducer that sets it to active. Ultimately removing active from other questions. 
+     * This happens right now when an answer is given (intermediate or not), so not critical.
+     */
     useEffect(() => {
-        if (ref.current && isFirstQuestionInCurrentSlide(questionModel.logicalName)) {
-            ref.current.focus();
-        }
-    }, [ref, isFirstQuestionInCurrentSlide, questionModel.logicalName]);
+        if (questionModel.isActive || ref.current && isFirstQuestionInCurrentSlide(questionModel.logicalName))
+            ref.current?.focus();
+    }, [ref, isFirstQuestionInCurrentSlide, questionModel.logicalName, questionModel.isActive]);
 
     return (
         <textarea onBlur={() => answerQuestion(questionModel.logicalName, text, false)}
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index 24a1ebd..deb619f 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -1,25 +1,31 @@
 "use client";
 import React, { useEffect, useRef, useState } from 'react';
 import { useQuickForm } from '../../../state/QuickFormContext';
-import { Button } from '../../button/Button';
+import { Button, Slide } from '../../index';
 import { useHandleEnterKeypress } from '../../../hooks';
-import { Slide } from '../../slide/Slide';
-import { Checkmark } from '../../icons';
-import { quickformtokens } from '../../../style/quickFormTokensDefinition';
+import { quickformtokens } from "../../../style";
 import { mergeClasses } from '@griffel/react';
-
-
+import { IconResolver } from '../../icons/IconResolver';
+import { SlideModel } from '../../../model';
 
 export const SlideRenderer: React.FC = () => {
+
     const { state, goToNextSlide } = useQuickForm();
-    const currentSlide = state.slides[state.currIdx];
+    const [className, setClassName] = useState(state.classes.slide);
+
+    const currentSlide: SlideModel = state.slides[state.currIdx];
+    const buttonText: string = currentSlide.buttonText ?? "OK";
+    const showPressEnter: boolean = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive) === false;
+
+    /* KBA - Leaving this for now - have to get back to it since we never actually set .isActive property on question.. so we cant use it to condition with at the moment.. */
+    // const showPressEnter: boolean = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive) === false;
+    console.log("showPressEnter", showPressEnter);
+    console.log("showPressEnterCondition", currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive));
+    console.log("showPressEnterCurrentSlide", currentSlide);
 
-    console.log("SlideRenderer", currentSlide);
     /* Listens to enter key pressed */
-    const enterKeyDisabled = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive);
-    useHandleEnterKeypress("slide", enterKeyDisabled, goToNextSlide);
+    useHandleEnterKeypress("slide", !showPressEnter, goToNextSlide);
 
-    const [className, setClassName] = useState(state.classes.slide);
     let nextAllowedEffectTime = useRef(new Date().getTime());
     useEffect(() => {
         const timeout = setTimeout(() => {
@@ -40,8 +46,13 @@ export const SlideRenderer: React.FC = () => {
             <Button
                 style={{ display: 'flex', alignItems: 'center', justifyContent: 'start' }}
                 onClick={goToNextSlide}
-                showPressEnter={!enterKeyDisabled}
-                children={<>OK<Checkmark style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={24} /></>} />
+                showPressEnter={showPressEnter}
+                children={
+                    <>
+                        {buttonText}<IconResolver type={currentSlide.icon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={24} />
+                    </>
+                }
+            />
         </div>
     );
 };
diff --git a/packages/core/src/model/SlideModel.ts b/packages/core/src/model/SlideModel.ts
index 4900340..d0da370 100644
--- a/packages/core/src/model/SlideModel.ts
+++ b/packages/core/src/model/SlideModel.ts
@@ -1,3 +1,4 @@
+import { IconType } from "../components/icons/IconResolver";
 import { resolveQuickFormService } from "../services/QuickFormServices";
 import { QuestionModel } from "./QuestionModel";
 import { QuestionJsonModel } from "./json-definitions/JsonDataModels";
@@ -5,6 +6,8 @@ import { QuestionRef } from "./json-definitions/Layout";
 
 export class SlideModel {
     displayName?: string;
+    buttonText?: string;
+    icon?: IconType;
     questions: QuestionModel[] = [];
     rows: Row[];
 
diff --git a/packages/core/src/model/json-definitions/Layout.ts b/packages/core/src/model/json-definitions/Layout.ts
index 012d7b7..e9f2058 100644
--- a/packages/core/src/model/json-definitions/Layout.ts
+++ b/packages/core/src/model/json-definitions/Layout.ts
@@ -1,5 +1,6 @@
 import { QuickFormTokens } from "../../style/quickFormTokensDefinition";
 import { QuickformClassNames } from "../../state/QuickformState";
+import { IconType } from "../../components/icons/IconResolver";
 
 export type LayoutDefinition = {
     classes?: Partial<QuickformClassNames>,
@@ -19,7 +20,9 @@ export type SlideLayout = {
     style?: React.CSSProperties;
     rows?: SlideElements;
     schemaName?: string;
-    logicalName?: string
+    logicalName?: string;
+    buttonText?: string;
+    icon?: IconType;
 }
 
 /**
diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
index 6800057..25bfbbc 100644
--- a/packages/core/src/services/defaults/DefaultModelTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -91,6 +91,9 @@ function handleLayout(layout: LayoutDefinition, questions: QuickFormQuestionsDef
         Object.values(layout.slides).forEach(slide => {
             const slideModel = new SlideModel();
             slideModel.displayName = slide.title;
+            slideModel.buttonText = slide.buttonText;
+            slideModel.icon = slide.icon;
+
             if (slide.rows) {
                 slideModel.rows = processRows(slide.rows, slideModel, questions, payload);
             }
@@ -112,9 +115,9 @@ function defaultLayout(questions: QuickFormQuestionsDefinition, payload: any): S
     Object.keys(questions).map((key, index) => [key, index] as [string, number])
         .sort(([q1, i1], [q2, i2]) => (questions[q1].order ?? i1) - (questions[q2].order ?? i2))
         .map(([questionKey]) => {
-        let slide: SlideModel = createSlide({ [questionKey]: questions[questionKey] }, payload);
-        slides.push(slide);
-    });
+            let slide: SlideModel = createSlide({ [questionKey]: questions[questionKey] }, payload);
+            slides.push(slide);
+        });
 
     logger.log("Generated {@slides} from layout", slides);
 
@@ -189,7 +192,7 @@ const transformJSONInput: QuickFormModelTransformer = (definition, payload): Qui
 
     // Transform questions into slides with rows and columns
     if (isDefined(definition.questions)) {
-        if (definition.layout && definition.layout.slides && Object.keys(definition.layout.slides).length>0) {
+        if (definition.layout && definition.layout.slides && Object.keys(definition.layout.slides).length > 0) {
             // If layout is defined, assign slides as per layout
             slides = handleLayout(definition.layout!, definition.questions, payload);
         } else {
diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx
index 7e0afad..8005485 100644
--- a/packages/playground/src/App.tsx
+++ b/packages/playground/src/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { QuickFormDefinition } from '../../core/src/model';
-import testdata from "./data/allInputControlsTest.json";
+import testdata from "./data/allInputControlsMultipleSlidesTest.json";
 import { QuickFormProvider } from '../../core/src/state';
 import { NavigationButton, QuickForm } from '../../core/src/components';
 import "./components/buttons-input/ButtonsInput";
diff --git a/packages/playground/src/data/allInputControlsMultipleSlidesTest.json b/packages/playground/src/data/allInputControlsMultipleSlidesTest.json
index 72695c9..b93c9d2 100644
--- a/packages/playground/src/data/allInputControlsMultipleSlidesTest.json
+++ b/packages/playground/src/data/allInputControlsMultipleSlidesTest.json
@@ -3,6 +3,8 @@
         "autoAdvanceSlides": false,
         "slides": {
             "slide1": {
+                "buttonText": "Test1",
+                "icon": "undefined",
                 "title": "Test titel",
                 "rows": {
                     "row1": {
@@ -28,6 +30,8 @@
                 }
             },
             "slide2": {
+                "buttonText": "Test2",
+                "icon": "Email",
                 "rows": {
                     "row1": {
                         "columns": {
@@ -52,6 +56,8 @@
                 }
             },
             "slide3": {
+                "buttonText": "Test3",
+                "icon": "undefined",
                 "rows": {
                     "row1": {
                         "columns": {
@@ -177,7 +183,7 @@
             "paragraph": "Test af multilinetext",
             "lang": "DA"
         },
-        "nameTest": {
+        "textTest": {
             "inputType": "text",
             "text": "Text test",
             "paragraph": "Test af text",

From 4c68d3da44b3bb4e29dadc833ee5995d4260b97f Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Thu, 30 May 2024 13:10:44 +0200
Subject: [PATCH 020/118] fix: removed unused classname in quickformprovider -
 cant pass classname to provider anyway so did not make sense to have it

---
 packages/core/src/state/QuickformProvider.tsx | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/packages/core/src/state/QuickformProvider.tsx b/packages/core/src/state/QuickformProvider.tsx
index a90cad3..6ae2395 100644
--- a/packages/core/src/state/QuickformProvider.tsx
+++ b/packages/core/src/state/QuickformProvider.tsx
@@ -6,11 +6,9 @@ import { ErrorPopup, QuickFormContainer } from "../components";
 import { QuickFormTokens, defineQuickFormTokens } from "../style/quickFormTokensDefinition";
 import { QuickFormDefinition } from "../model";
 import { resolveQuickFormService } from "../services/QuickFormServices";
-import { kbaQuickFormTokens } from "../style/kbaQuickFormTokens";
 import { isFirstQInCurrentSlide } from "../utils/isFirstQuestionInSlide";
 
 type QuickFormProviderProps = {
-    className?: string,
     children: React.ReactNode;
     definition: QuickFormDefinition;
     tokens?: Partial<QuickFormTokens>;
@@ -21,7 +19,6 @@ type QuickFormProviderProps = {
 
 export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
     {
-        className,
         children,
         definition,
         payload,
@@ -34,7 +31,7 @@ export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
     const logger = resolveQuickFormService("logger");
     const cssVariables = defineQuickFormTokens(tokens ?? {}, definition?.layout?.tokens ?? {});
 
-    
+
     logger.log("cssVariables", cssVariables);
     const transform = resolveQuickFormService("modeltransformer");
     const defaultStateObj = useMemo(() => { return defaultState(transform(definition, payload), definition.layout) }, []);
@@ -56,20 +53,22 @@ export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
     const getCurrentSlide = () => (state.slides[state.currIdx]);
 
     return (
-        <QuickFormContext.Provider value={{
-            state,
-            dispatch,
-            goToSlide,
-            goToNextSlide,
-            goToPrevSlide,
-            answerQuestion,
-            setIntroVisited,
-            setErrorMsg,
-            isFirstQuestionInCurrentSlide,
-            getCurrentSlide,
-            onSubmitAsync,
-            cssVariables
-        }}>
+        <QuickFormContext.Provider
+            value={{
+                state,
+                dispatch,
+                goToSlide,
+                goToNextSlide,
+                goToPrevSlide,
+                answerQuestion,
+                setIntroVisited,
+                setErrorMsg,
+                isFirstQuestionInCurrentSlide,
+                getCurrentSlide,
+                onSubmitAsync,
+                cssVariables
+            }}
+        >
 
             {asContainer ? (
                 <QuickFormContainer style={cssVariables}>

From 3aff78b35a9beaa72fe977fd0676c25abce75e24 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Fri, 31 May 2024 08:40:23 +0200
Subject: [PATCH 021/118] fix: removed import of inputcontrols in QuickForm.tsx
 and adjust playground to use them from components folder instead

---
 packages/core/src/components/QuickForm.tsx    |   1 -
 packages/playground/Index.tsx                 |   5 +-
 packages/playground/src/App.tsx               |   7 +-
 .../baseinput/BaseInputComponent.tsx          | 166 ++++++++++++++++++
 .../src/components/email/EmailInput.tsx       |  19 ++
 .../src/components/email/EmailInputSchema.ts  |  58 ++++++
 packages/playground/src/components/index.ts   |  25 +++
 .../components/multiline/MultilineInput.tsx   |  78 ++++++++
 .../multiline/MultilineInputSchema.ts         |  32 ++++
 .../src/components/phone/PhoneInput.tsx       |  20 +++
 .../src/components/phone/PhoneInputSchema.ts  |  58 ++++++
 .../radio-input copy/RadioInput.tsx           |  50 ++++++
 .../radio-input copy/RadioInputSchema.ts      |  29 +++
 .../src/components/text/TextInput.tsx         |  21 +++
 .../src/components/text/TextInputSchema.ts    |  58 ++++++
 15 files changed, 618 insertions(+), 9 deletions(-)
 create mode 100644 packages/playground/src/components/baseinput/BaseInputComponent.tsx
 create mode 100644 packages/playground/src/components/email/EmailInput.tsx
 create mode 100644 packages/playground/src/components/email/EmailInputSchema.ts
 create mode 100644 packages/playground/src/components/index.ts
 create mode 100644 packages/playground/src/components/multiline/MultilineInput.tsx
 create mode 100644 packages/playground/src/components/multiline/MultilineInputSchema.ts
 create mode 100644 packages/playground/src/components/phone/PhoneInput.tsx
 create mode 100644 packages/playground/src/components/phone/PhoneInputSchema.ts
 create mode 100644 packages/playground/src/components/radio-input copy/RadioInput.tsx
 create mode 100644 packages/playground/src/components/radio-input copy/RadioInputSchema.ts
 create mode 100644 packages/playground/src/components/text/TextInput.tsx
 create mode 100644 packages/playground/src/components/text/TextInputSchema.ts

diff --git a/packages/core/src/components/QuickForm.tsx b/packages/core/src/components/QuickForm.tsx
index 5718e46..40f4ddf 100644
--- a/packages/core/src/components/QuickForm.tsx
+++ b/packages/core/src/components/QuickForm.tsx
@@ -2,7 +2,6 @@
 import React from 'react';
 import { useQuickForm } from "../state/QuickFormContext";
 import { Ending, Submit, Intro, SlideRenderer } from "./index";
-import "./question/input-types/index";
 
 export const QuickForm: React.FC = () => {
     const { state, setIntroVisited } = useQuickForm();
diff --git a/packages/playground/Index.tsx b/packages/playground/Index.tsx
index 97c942b..3989898 100644
--- a/packages/playground/Index.tsx
+++ b/packages/playground/Index.tsx
@@ -1,6 +1,5 @@
-import ReactDOM from 'react-dom';
 import { App } from './src/App';
+import { createRoot } from 'react-dom/client';
 
 const container = document.getElementById('root');
-
-ReactDOM.render(<App />, container);
\ No newline at end of file
+createRoot(container).render(<App />);
\ No newline at end of file
diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx
index 8005485..4add92a 100644
--- a/packages/playground/src/App.tsx
+++ b/packages/playground/src/App.tsx
@@ -3,11 +3,8 @@ import { QuickFormDefinition } from '../../core/src/model';
 import testdata from "./data/allInputControlsMultipleSlidesTest.json";
 import { QuickFormProvider } from '../../core/src/state';
 import { NavigationButton, QuickForm } from '../../core/src/components';
-import "./components/buttons-input/ButtonsInput";
-import "./components/checkbox-input/CheckboxInput";
-import "./components/radio-input/RadioInput";
-import "./components/slider-input/SliderInput";
-import { QuickFormContainer } from './components/container/QuickFormContainer';
+import { QuickFormContainer } from './components';
+import "./components/index";
 
 const containerStyling: React.CSSProperties = {
     width: '100%',
diff --git a/packages/playground/src/components/baseinput/BaseInputComponent.tsx b/packages/playground/src/components/baseinput/BaseInputComponent.tsx
new file mode 100644
index 0000000..2cca179
--- /dev/null
+++ b/packages/playground/src/components/baseinput/BaseInputComponent.tsx
@@ -0,0 +1,166 @@
+import { quickformtokens, useHandleEnterKeypress, useQuickForm } from "@eavfw/quickform-core";
+import { useFocusableQuestion } from "@eavfw/quickform-core/src/hooks/useFocusableQuestion";
+import { CSSProperties, ChangeEvent, InputHTMLAttributes, useEffect, useState } from "react";
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { QuestionModel } from "@eavfw/quickform-core/src/model";
+import { IconResolver, IconType } from "../../../../core/src/components/icons/IconResolver";
+
+import { trace } from "@opentelemetry/api";
+
+const tracer = trace.getTracer("quickform", "1.0.0");
+
+const useInputTextStyles = makeStyles({
+    inputContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative',
+        backgroundColor: 'transparent',
+        color: 'var(--on-surface)',
+        width: '100%',
+        ...shorthands.borderTop('none'),
+        ...shorthands.borderLeft('none'),
+        ...shorthands.borderRight('none'),
+        ...shorthands.borderBottom("1px", "solid", `${quickformtokens?.questionPlaceholderColor || "black"}`),
+
+        ':focus': {
+            ...shorthands.borderBottom("1px", "solid", `${quickformtokens?.primary || "blue"}`),
+            paddingBottom: '8px',
+        },
+    },
+    inputText: {
+        color: 'var(--on-surface)',
+        backgroundColor: 'transparent',
+        fontSize: quickformtokens?.questionInputFontSize || "16px",
+        marginTop: '8px',
+        paddingBottom: '9px',
+        width: '100%',
+        ...shorthands.border('none'),
+
+        '@media screen and (max-width: 599px)': {
+            fontSize: quickformtokens?.questionInputFontSize || "16px",
+            marginTop: '32px',
+        },
+
+    },
+
+    inputIcon: {
+        marginTop: '8px',
+        paddingBottom: '9px',
+    },
+    iconLeft: {
+        left: '0',
+        paddingRight: '15px'
+    },
+    iconRight: {
+        right: '0',
+        paddingLeft: '15px'
+    },
+});
+
+type BaseInputComponentProps = {
+    type: InputHTMLAttributes<HTMLInputElement>["type"],
+    questionModel: QuestionModel,
+    beforeIcon?: IconType;
+    afterIcon?: IconType
+    style?: CSSProperties
+    className?: string,
+}
+
+
+
+export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ questionModel, className, style, type, beforeIcon, afterIcon }) => {
+
+    const [text, setText] = useState<string>(questionModel!.output);
+    const ref = useFocusableQuestion<HTMLInputElement>(questionModel.logicalName);
+    const { answerQuestion } = useQuickForm();
+    const styles = useInputTextStyles();
+
+    const span = trace.getActiveSpan();
+
+    if (span) {
+        span.addEvent("BaseInputComponent:render");
+    }
+
+
+
+    const resize = () => {
+        const input = ref.current;
+        if (!input)
+            return;
+
+        const oldvalue = input.value;
+
+        if (!oldvalue || oldvalue === '')
+            input.value = input.placeholder;
+
+        const isOverflowed = input.scrollWidth > input.clientWidth;
+        input.value = oldvalue;
+        if (isOverflowed) {
+            var style = window.getComputedStyle(input, null).getPropertyValue('font-size');
+            input.style.fontSize = (parseFloat(style) - 1) + "px";
+            resize();
+        }
+    }
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+        console.log("BaseInputComponent:handleChange", event.target.value);
+        if (span) {
+            span.addEvent("BaseInputComponent:handleChange", { 'value': event.target.value });
+        }
+        //EXPLAIN: WHY IS THIS HERE? If no reason, lets remove.
+        if (event.target.value === "")
+            questionModel.errorMsg = "";
+
+
+        setText(() => event.target.value);
+        answerQuestion(questionModel.logicalName, event.target.value, true);
+        resize();
+    }
+
+    /**
+     * The input control is responsible of setting itself focused when becoming active.
+     * - We should also listen to inputcontrols being focused and if not active, trigger a reducer that sets it to active. Ultimately removing active from other questions. 
+     * This happens right now when an answer is given (intermediate or not), so not critical.
+     */
+    useEffect(() => {
+        if (questionModel.isActive)
+            ref.current?.focus();
+    }, [questionModel.isActive]);
+
+    /**
+     * While a base input component is active we should answer the question upon enter.
+     */
+    useHandleEnterKeypress("baseinput", !questionModel.isActive, () => {
+        answerQuestion(questionModel.logicalName, text, false);
+    });
+
+    return (
+        <div className={mergeClasses(styles.inputContainer, className)} style={style}>
+            {beforeIcon &&
+                <IconResolver
+                    type={beforeIcon}
+                    className={mergeClasses(styles.inputIcon, styles.iconLeft)}
+                    size={18}
+                    color={quickformtokens.primary}
+                />
+            }
+            <input
+                style={{ outline: 'none', }}
+                ref={ref}
+                type={type}
+                className={styles.inputText}
+                placeholder={questionModel.placeholder}
+                value={text}
+                onChange={handleChange}
+            />
+            {afterIcon &&
+                <IconResolver
+                    type={afterIcon}
+                    className={mergeClasses(styles.inputIcon, styles.iconRight)}
+                    size={18}
+                    color={quickformtokens.primary}
+                />
+            }
+        </div>
+    );
+}
diff --git a/packages/playground/src/components/email/EmailInput.tsx b/packages/playground/src/components/email/EmailInput.tsx
new file mode 100644
index 0000000..265284d
--- /dev/null
+++ b/packages/playground/src/components/email/EmailInput.tsx
@@ -0,0 +1,19 @@
+import { InputComponentType, registerInputComponent } from "@eavfw/quickform-core";
+import { BaseInputComponent } from "../baseinput/BaseInputComponent";
+import { emailInputSchema } from "./EmailInputSchema";
+import { IconType } from "../../../../core/src/components/icons/IconResolver";
+
+export type EmailProperties = {
+    inputType: "email";
+    defaultValue?: string;
+    beforeIcon?: IconType;
+    afterIcon?: IconType
+}
+
+export const EmailInput: InputComponentType<EmailProperties> = (props) => {
+    return <BaseInputComponent type="email" {...props} />
+}
+
+/* This property assignment grants QuickformDesigner metadata information about which properties the inputcomponent needs */
+EmailInput.inputSchema = emailInputSchema;
+registerInputComponent("email", EmailInput);
\ No newline at end of file
diff --git a/packages/playground/src/components/email/EmailInputSchema.ts b/packages/playground/src/components/email/EmailInputSchema.ts
new file mode 100644
index 0000000..9e8587e
--- /dev/null
+++ b/packages/playground/src/components/email/EmailInputSchema.ts
@@ -0,0 +1,58 @@
+import { InputComponentMetadata } from "@eavfw/quickform-core";
+import { InputPropertiesTypes } from "@eavfw/quickform-core/src/model";
+
+export const emailInputSchema: InputComponentMetadata<InputPropertiesTypes> = {
+    label: "Email",
+    uiSchema: {
+        paragraph: {
+            "ui:widget": "textarea"
+        }
+    },
+    schema: {
+        type: "object",
+
+        properties: {
+            text: {
+                title: "Text",
+                type: "string"
+            },
+            placeholder: {
+                title: "Placeholder",
+                type: "string"
+            },
+            paragraph: {
+                title: "Paragraph",
+                type: "string"
+            },
+            beforeIcon: {
+                enum: [
+                    "Phone",
+                    "Email",
+                    "User"
+                ],
+                // @ts-ignore
+                "enumNames": [
+                    "Phone",
+                    "Email",
+                    "User"
+                ]
+            },
+            afterIcon: {
+                enum: [
+                    "Phone",
+                    "Email",
+                    "User"
+                ],
+                // @ts-ignore
+                "enumNames": [
+                    "Phone",
+                    "Email",
+                    "User"
+                ]
+            }
+        }
+    },
+    field: {
+        type: "text",
+    }
+}
diff --git a/packages/playground/src/components/index.ts b/packages/playground/src/components/index.ts
new file mode 100644
index 0000000..ccb8994
--- /dev/null
+++ b/packages/playground/src/components/index.ts
@@ -0,0 +1,25 @@
+import { ButtonsInput } from './buttons-input/ButtonsInput';
+import { CheckboxInput } from './checkbox-input/CheckboxInput';
+import { EmailInput } from './email/EmailInput';
+import { MultilineInput } from './multiline/MultilineInput';
+import { OverviewList } from './overview-list/OverviewList';
+import { PhoneInput } from './phone/PhoneInput';
+import { QuickFormContainer } from './container/QuickFormContainer';
+import { RadioInput } from './radio-input/RadioInput';
+import { SliderInput } from './slider-input/SliderInput';
+import { TextInput } from './text/TextInput';
+import { ToggleOverviewButton } from './toggle-overview-button/ToggleOverviewButton';
+
+export {
+    ButtonsInput,
+    CheckboxInput,
+    EmailInput,
+    MultilineInput,
+    OverviewList,
+    PhoneInput,
+    QuickFormContainer,
+    RadioInput,
+    SliderInput,
+    TextInput,
+    ToggleOverviewButton
+};
diff --git a/packages/playground/src/components/multiline/MultilineInput.tsx b/packages/playground/src/components/multiline/MultilineInput.tsx
new file mode 100644
index 0000000..8575bb8
--- /dev/null
+++ b/packages/playground/src/components/multiline/MultilineInput.tsx
@@ -0,0 +1,78 @@
+"use client";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import { makeStyles, shorthands } from "@griffel/react";
+import {  useQuickForm, InputComponentType, registerInputComponent, quickformtokens } from "@eavfw/quickform-core";
+import { multilineInputSchema } from "./MultilineInputSchema";
+import { MultilineProperties } from "../../../../core/src/model";
+
+const useInputTextStyles = makeStyles({
+    inputText: {
+        backgroundColor: 'transparent',
+        ...shorthands.border(`1px solid ${quickformtokens.onSurface}`),
+        ...shorthands.borderRadius('5px'),
+        color: quickformtokens.onSurface,
+        fontSize: quickformtokens.multilineTextFontSize,
+        marginTop: '15px',
+        paddingBottom: '9px',
+        width: '100%',
+        maxHeight: '8rem', // Set maximum height for three lines
+        height: '8rem',
+        resize: 'vertical',
+        ...shorthands.overflow('auto'),
+        '&:focus-visible': {
+            ...shorthands.borderBottom("2px", "solid", `${quickformtokens.onSurface}`),
+            ...shorthands.outline('none'),
+            paddingBottom: '8px'
+        },
+        '&::placeholder': {
+            color: quickformtokens.onSurface,
+            opacity: quickformtokens.mediumEmphasisOpacity,
+        },
+        '&::-ms-input-placeholder': {
+            color: quickformtokens.onSurface,
+            opacity: quickformtokens.mediumEmphasisOpacity,
+        },
+        '@media screen and (max-width: 599px)': {
+            fontSize: quickformtokens.multilineTextMobileFontSize,
+            marginTop: '32px',
+        },
+    },
+});
+
+export const MultilineInput: InputComponentType<MultilineProperties> = ({ questionModel }) => {
+    const styles = useInputTextStyles();
+    const { isFirstQuestionInCurrentSlide, answerQuestion, state } = useQuickForm();
+    const { placeholder, output } = questionModel;
+    const [text, setText] = useState<string>(output || '');
+    const ref = useRef<HTMLTextAreaElement>(null);
+
+    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+        const newValue = event.target.value.replace(/\r?\n/g, '\n'); // Normalize newline characters
+        setText(newValue);
+        answerQuestion(questionModel.logicalName, newValue, true);
+    };
+
+    /**
+     * The input control is responsible of setting itself focused when becoming active.
+     * - We should also listen to inputcontrols being focused and if not active, trigger a reducer that sets it to active. Ultimately removing active from other questions. 
+     * This happens right now when an answer is given (intermediate or not), so not critical.
+     */
+    useEffect(() => {
+        if (questionModel.isActive || ref.current && isFirstQuestionInCurrentSlide(questionModel.logicalName))
+            ref.current?.focus();
+    }, [ref, isFirstQuestionInCurrentSlide, questionModel.logicalName, questionModel.isActive]);
+
+    return (
+        <textarea onBlur={() => answerQuestion(questionModel.logicalName, text, false)}
+            ref={ref}
+            className={styles.inputText}
+            placeholder={placeholder}
+            value={text}
+            onChange={handleChange}
+            style={{ width: '100%' }}
+        />
+    );
+};
+
+MultilineInput.inputSchema = multilineInputSchema;
+registerInputComponent("multilinetext", MultilineInput);
\ No newline at end of file
diff --git a/packages/playground/src/components/multiline/MultilineInputSchema.ts b/packages/playground/src/components/multiline/MultilineInputSchema.ts
new file mode 100644
index 0000000..9c0821b
--- /dev/null
+++ b/packages/playground/src/components/multiline/MultilineInputSchema.ts
@@ -0,0 +1,32 @@
+
+import { InputComponentMetadata } from "../../../../core/src/services/";
+import { InputPropertiesTypes, } from "@eavfw/quickform-core/src/model";
+
+export const multilineInputSchema: InputComponentMetadata<InputPropertiesTypes> = {
+    label: "Multiline Text",
+    uiSchema: {
+        paragraph: {
+            "ui:widget": "textarea"
+        }
+    },
+    schema: {
+        type: "object",
+        properties: {
+            text: {
+                title: "Text",
+                type: "string"
+            },
+            placeholder: {
+                title: "Placeholder",
+                type: "string"
+            },
+            paragraph: {
+                title: "Paragraph",
+                type: "string"
+            }
+        }
+    },
+    field: {
+        type: "text",
+    }
+}
\ No newline at end of file
diff --git a/packages/playground/src/components/phone/PhoneInput.tsx b/packages/playground/src/components/phone/PhoneInput.tsx
new file mode 100644
index 0000000..aff2556
--- /dev/null
+++ b/packages/playground/src/components/phone/PhoneInput.tsx
@@ -0,0 +1,20 @@
+"use client";
+import { InputComponentType, registerInputComponent } from "@eavfw/quickform-core";
+import { BaseInputComponent } from "../baseinput/BaseInputComponent";
+import { phoneInputSchema } from "./PhoneInputSchema";
+import {  IconType } from "../../../../core/src/components/icons/IconResolver";
+
+export type PhoneProperties = {
+    inputType: "phone";
+    defaultValue?: string;
+    beforeIcon?: IconType;
+    afterIcon?: IconType
+}
+
+export const PhoneInput: InputComponentType<PhoneProperties> = (props) => {
+    return <BaseInputComponent type="tel" {...props} />
+}
+
+/* This property assignment grants QuickformDesigner metadata information about which properties the inputcomponent needs */
+PhoneInput.inputSchema = phoneInputSchema;
+registerInputComponent("phone", PhoneInput);
\ No newline at end of file
diff --git a/packages/playground/src/components/phone/PhoneInputSchema.ts b/packages/playground/src/components/phone/PhoneInputSchema.ts
new file mode 100644
index 0000000..1cbe49e
--- /dev/null
+++ b/packages/playground/src/components/phone/PhoneInputSchema.ts
@@ -0,0 +1,58 @@
+
+import { InputComponentMetadata } from "../../../../core/src/services/";
+import { InputPropertiesTypes, } from "@eavfw/quickform-core/src/model";
+
+export const phoneInputSchema: InputComponentMetadata<InputPropertiesTypes> = {
+    label: "Phone",
+    uiSchema: {
+        paragraph: {
+            "ui:widget": "textarea"
+        }
+    },
+    schema: {
+        type: "object",
+
+        properties: {
+            text: {
+                title: "Text",
+                type: "string"
+            },
+            placeholder: {
+                title: "Placeholder",
+                type: "string"
+            },
+            paragraph: {
+                title: "Paragraph",
+                type: "string"
+            },
+            beforeIcon: {
+                enum: [
+                    "Phone",
+                    "Email",
+                    "User"
+                ],
+                // @ts-ignore
+                "enumNames": [
+                    "Phone",
+                    "Email",
+                    "User"
+                ]
+            },
+            afterIcon: {
+                enum: [
+                    "Phone",
+                    "Email",
+                    "User"
+                ],
+                // @ts-ignore
+                "enumNames": [
+                    "Phone",
+                    "Email",
+                    "User"
+                ]
+            }
+        }
+    }, field: {
+        type: "text",
+    }
+}
\ No newline at end of file
diff --git a/packages/playground/src/components/radio-input copy/RadioInput.tsx b/packages/playground/src/components/radio-input copy/RadioInput.tsx
new file mode 100644
index 0000000..c3fc7b9
--- /dev/null
+++ b/packages/playground/src/components/radio-input copy/RadioInput.tsx	
@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { InputComponentType, registerInputComponent, useQuickForm } from "@eavfw/quickform-core";
+import { radioInputSchema } from "./RadioInputSchema";
+
+type RadioProperties = {
+    inputType: "radio";
+    options: {
+        [key: string]: string;
+    }
+    direction?: "horizontal" | "vertical";
+}
+
+export const RadioInput: InputComponentType<RadioProperties> = ({ questionModel, options, direction, }) => {
+    const { answerQuestion } = useQuickForm();
+    const [selectedValue, setSelectedValue] = useState<string>(questionModel.output);
+
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setSelectedValue(event.target.value);
+        answerQuestion(questionModel.logicalName, event.target.value)
+    };
+
+
+    return (
+        <div >
+            {Object.entries(options).map(([key, value]) => (
+                <div key={key} >
+                    <input
+                        type="radio"
+                        id={`${questionModel.logicalName}-${key}`}
+                        name={questionModel.logicalName}
+                        value={value}
+                        checked={selectedValue === value}
+                        onChange={handleChange}
+
+                    />
+                    <label
+                        htmlFor={`${questionModel.logicalName}-${key}`}
+
+                    >
+                        {value}
+                    </label>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+RadioInput.inputSchema = radioInputSchema;
+registerInputComponent("radio", RadioInput);
\ No newline at end of file
diff --git a/packages/playground/src/components/radio-input copy/RadioInputSchema.ts b/packages/playground/src/components/radio-input copy/RadioInputSchema.ts
new file mode 100644
index 0000000..d502b66
--- /dev/null
+++ b/packages/playground/src/components/radio-input copy/RadioInputSchema.ts	
@@ -0,0 +1,29 @@
+import { JSONSchema7 } from "json-schema";
+
+export const radioInputSchema = {
+    label: "Radio",
+    uiSchema: {
+        paragraph: {
+            "ui:widget": "textarea"
+        }
+    },
+    schema: {
+        type: "object",
+        properties: {
+            options: {
+                type: "object",
+                title: "Options",
+                additionalProperties: {
+                    type: "string"
+                }
+            },
+            direction: {
+                type: "string",
+                title: "Direction",
+                enum: ["horizontal", "vertical"],
+                default: "horizontal"
+            }
+        },
+        required: ["options"]
+    } as JSONSchema7
+}
diff --git a/packages/playground/src/components/text/TextInput.tsx b/packages/playground/src/components/text/TextInput.tsx
new file mode 100644
index 0000000..367f3cf
--- /dev/null
+++ b/packages/playground/src/components/text/TextInput.tsx
@@ -0,0 +1,21 @@
+"use client";
+import React from "react";
+import { textInputSchema } from "./TextInputSchema";
+import { BaseInputComponent } from "../baseinput/BaseInputComponent";
+import { InputComponentType, registerInputComponent } from "@eavfw/quickform-core";
+import { IconType } from "../../../../core/src/components/icons/IconResolver";
+
+export type TextProperties = {
+    inputType: "text";
+    defaultValue?: string;
+    beforeIcon?: IconType;
+    afterIcon?: IconType
+}
+
+export const TextInput: InputComponentType<TextProperties> = (props) => {
+    return <BaseInputComponent type="text" {...props} />
+}
+
+/* This property assignment grants QuickformDesigner metadata information about which properties the inputcomponent needs */
+TextInput.inputSchema = textInputSchema;
+registerInputComponent("text", TextInput);
\ No newline at end of file
diff --git a/packages/playground/src/components/text/TextInputSchema.ts b/packages/playground/src/components/text/TextInputSchema.ts
new file mode 100644
index 0000000..6e2d8fa
--- /dev/null
+++ b/packages/playground/src/components/text/TextInputSchema.ts
@@ -0,0 +1,58 @@
+
+import { InputComponentMetadata } from "../../../../core/src/services/";
+import { InputPropertiesTypes, } from "@eavfw/quickform-core/src/model";
+
+export const textInputSchema: InputComponentMetadata<InputPropertiesTypes> = {
+    label: "Text",
+    uiSchema: {
+        paragraph: {
+            "ui:widget": "textarea"
+        }
+    },
+    schema: {
+        type: "object",
+
+        properties: {
+            text: {
+                title: "Text",
+                type: "string"
+            },
+            placeholder: {
+                title: "Placeholder",
+                type: "string"
+            },
+            paragraph: {
+                title: "Paragraph",
+                type: "string"
+            },
+            beforeIcon: {
+                enum: [
+                    "Phone",
+                    "Email",
+                    "User"
+                ],
+                // @ts-ignore
+                "enumNames": [
+                    "Phone",
+                    "Email",
+                    "User"
+                ]
+            },
+            afterIcon: {
+                enum: [
+                    "Phone",
+                    "Email",
+                    "User"
+                ],
+                // @ts-ignore
+                "enumNames": [
+                    "Phone",
+                    "Email",
+                    "User"
+                ]
+            }
+        }
+    }, field: {
+        type: "text",
+    }
+}
\ No newline at end of file

From 0cd96b4b2e4fe21eb1e450f2ff4baaa80587a9cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Fri, 31 May 2024 10:13:04 +0200
Subject: [PATCH 022/118] feat: Added submit payload augmenters

---
 packages/core/src/state/QuickFormContext.tsx          |  4 ++++
 packages/core/src/state/QuickformAction.ts            |  5 ++++-
 packages/core/src/state/QuickformProvider.tsx         | 11 ++++++++++-
 packages/core/src/state/QuickformReducer.ts           |  9 +++++++++
 packages/core/src/state/QuickformState.ts             |  4 +++-
 .../src/state/action-handlers/SubmitActionHandler.ts  |  5 ++++-
 6 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/state/QuickFormContext.tsx b/packages/core/src/state/QuickFormContext.tsx
index a81f723..3b9ca02 100644
--- a/packages/core/src/state/QuickFormContext.tsx
+++ b/packages/core/src/state/QuickFormContext.tsx
@@ -16,6 +16,8 @@ interface IQuickFormContext {
     isFirstQuestionInCurrentSlide: (questionLogicalName: string) => boolean;
     getCurrentSlide: () => SlideModel;
     onSubmitAsync?: (formdata: any) => Promise<string>;
+    addPayloadAugmenter: (augmenter: (payload: any) => any) => void;
+    removePayloadAugmenter: (augmenter: (payload: any) => any) => void;
     cssVariables: { [key: string]: string };
 }
 
@@ -34,6 +36,8 @@ export const QuickFormContext = React.createContext<IQuickFormContext>(
             { questions: [], rows: [], isAnswered: false, addQuestion: () => ({ type: "question", ref: "" }) }
         ),
         onSubmitAsync: async (formdata) => { return "" },
+        addPayloadAugmenter: () => { },
+        removePayloadAugmenter: () => { },
         cssVariables: {}
     }
 );
diff --git a/packages/core/src/state/QuickformAction.ts b/packages/core/src/state/QuickformAction.ts
index 0825d17..5a74ed8 100644
--- a/packages/core/src/state/QuickformAction.ts
+++ b/packages/core/src/state/QuickformAction.ts
@@ -15,4 +15,7 @@ export type QuickformAction =
     | { type: 'SET_SUBMIT_STATUS', status: SubmitStatus }
     | { type: 'SUBMIT', dispatch: React.Dispatch<QuickformAction>, id: string }
     | { type: 'SET_INTRO_VISITED' }
-    | { type: 'GO_TO_ENDING' };
+    | { type: 'GO_TO_ENDING' }
+    | { type: 'ADD_PAYLOAD_AUGMENTER', augmenter }
+    | { type: 'REMOVE_PAYLOAD_AUGMENTER', augmenter }
+    ;
diff --git a/packages/core/src/state/QuickformProvider.tsx b/packages/core/src/state/QuickformProvider.tsx
index a90cad3..b9d560f 100644
--- a/packages/core/src/state/QuickformProvider.tsx
+++ b/packages/core/src/state/QuickformProvider.tsx
@@ -55,6 +55,13 @@ export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
     const isFirstQuestionInCurrentSlide = (questionLogicalName: string) => { return isFirstQInCurrentSlide(questionLogicalName, state); }
     const getCurrentSlide = () => (state.slides[state.currIdx]);
 
+    const addPayloadAugmenter = (augmenter: (payload: any) => any) => {
+        dispatch({ type: 'ADD_PAYLOAD_AUGMENTER', augmenter })
+    }
+    const removePayloadAugmenter = (augmenter: (payload: any) => any) => {
+        dispatch({ type: 'REMOVE_PAYLOAD_AUGMENTER', augmenter })
+    }
+
     return (
         <QuickFormContext.Provider value={{
             state,
@@ -68,7 +75,9 @@ export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
             isFirstQuestionInCurrentSlide,
             getCurrentSlide,
             onSubmitAsync,
-            cssVariables
+            cssVariables,
+            removePayloadAugmenter,
+            addPayloadAugmenter
         }}>
 
             {asContainer ? (
diff --git a/packages/core/src/state/QuickformReducer.ts b/packages/core/src/state/QuickformReducer.ts
index 5b6902a..38839e5 100644
--- a/packages/core/src/state/QuickformReducer.ts
+++ b/packages/core/src/state/QuickformReducer.ts
@@ -20,6 +20,15 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
 
     switch (action.type) {
 
+        case 'ADD_PAYLOAD_AUGMENTER': {
+            state.payloadAugments = [...state.payloadAugments, action.augmenter];
+            return state;
+        }
+        case 'REMOVE_PAYLOAD_AUGMENTER': {
+            state.payloadAugments = state.payloadAugments.filter(augmenter => augmenter !== action.augmenter);
+            return state;
+        }
+
         case 'ANSWER_QUESTION': {
 
             if (span) {
diff --git a/packages/core/src/state/QuickformState.ts b/packages/core/src/state/QuickformState.ts
index 5587dec..e119357 100644
--- a/packages/core/src/state/QuickformState.ts
+++ b/packages/core/src/state/QuickformState.ts
@@ -20,7 +20,8 @@ export type QuickformState = {
     slides: SlideModel[];
     submitStatus: SubmitStatus;
     totalSteps: number;
-    classes: Partial<QuickformClassNames>
+    classes: Partial<QuickformClassNames>,
+    payloadAugments: Array<(payload: any) => any>
 }
 
 export const defaultState = (data: QuickFormModel = defaultData, layout?: LayoutDefinition): QuickformState => {
@@ -42,6 +43,7 @@ export const defaultState = (data: QuickFormModel = defaultData, layout?: Layout
         slides: data.slides,
         submitStatus: { isSubmitting: false, isSubmitError: false, isSubmitSuccess: false },
         totalSteps: data.slides.length,
+        payloadAugments:[]
     };
 
     return defState;
diff --git a/packages/core/src/state/action-handlers/SubmitActionHandler.ts b/packages/core/src/state/action-handlers/SubmitActionHandler.ts
index fc73ee4..212e18b 100644
--- a/packages/core/src/state/action-handlers/SubmitActionHandler.ts
+++ b/packages/core/src/state/action-handlers/SubmitActionHandler.ts
@@ -42,7 +42,7 @@ export class SubmitActionHandler {
     static generatePayload = (state: QuickformState): Record<string, any> => {
 
         const logger = resolveQuickFormService("logger");
-        const payload: Record<string, any> = {};
+        let payload: Record<string, any> = {};
         for (var slide of state.slides) {
             slide.questions.forEach(q => {
                 payload[q.logicalName!] = q.output;
@@ -63,6 +63,9 @@ export class SubmitActionHandler {
 
             payload["submitFields"][q.logicalName] = value;
         }
+        for (let augmenter of state.payloadAugments) {
+            payload = augmenter(payload);
+        }
 
         return payload;
     }

From 7a4c7765b3397bfdad53f83fd24ccbd5fa6e0fdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Fri, 31 May 2024 12:00:04 +0200
Subject: [PATCH 023/118] fix: regression on types, can be undefined type on
 icon resolver

---
 packages/core/src/components/icons/IconResolver.tsx | 2 +-
 packages/core/src/state/QuickformAction.ts          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/icons/IconResolver.tsx b/packages/core/src/components/icons/IconResolver.tsx
index a2203b0..f5f0d33 100644
--- a/packages/core/src/components/icons/IconResolver.tsx
+++ b/packages/core/src/components/icons/IconResolver.tsx
@@ -6,7 +6,7 @@ import { Checkmark } from '../icons/Checkmark';
 
 export type IconType = "Email" | "Phone" | "User";
 export type IconResolverProps = {
-    type: IconType,
+    type?: IconType,
 } & IconProps
 
 export const IconResolver: React.FC<IconResolverProps> = ({ type, color, className, size, style }): JSX.Element => {
diff --git a/packages/core/src/state/QuickformAction.ts b/packages/core/src/state/QuickformAction.ts
index 5a74ed8..9856817 100644
--- a/packages/core/src/state/QuickformAction.ts
+++ b/packages/core/src/state/QuickformAction.ts
@@ -16,6 +16,6 @@ export type QuickformAction =
     | { type: 'SUBMIT', dispatch: React.Dispatch<QuickformAction>, id: string }
     | { type: 'SET_INTRO_VISITED' }
     | { type: 'GO_TO_ENDING' }
-    | { type: 'ADD_PAYLOAD_AUGMENTER', augmenter }
-    | { type: 'REMOVE_PAYLOAD_AUGMENTER', augmenter }
+    | { type: 'ADD_PAYLOAD_AUGMENTER', augmenter: (payload:any)=>any }
+    | { type: 'REMOVE_PAYLOAD_AUGMENTER', augmenter: (payload: any) => any }
     ;

From 9608d458c5b6a0b6c3ad52e14d3dc9f3d9408668 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Fri, 31 May 2024 12:07:03 +0200
Subject: [PATCH 024/118] fix: adds null and undefined checks to tsconfig in
 playground

---
 packages/playground/tsconfig.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playground/tsconfig.json b/packages/playground/tsconfig.json
index 7087e04..684d1e4 100644
--- a/packages/playground/tsconfig.json
+++ b/packages/playground/tsconfig.json
@@ -4,12 +4,12 @@
     "sourceMap": true,
     "noImplicitAny": true,
     "module": "esnext",
-    "target": "es5",
+    "target": "es2015",
     "lib": [ "dom", "dom.iterable", "esnext" ],
     "jsx": "react-jsx",
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
-    "strictNullChecks": false,
+    "strictNullChecks": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "baseUrl": "./"

From 85731d403152aab88d64c4fd6c42ee7b783f2c52 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Mon, 3 Jun 2024 14:02:12 +0200
Subject: [PATCH 025/118] fix: updated testdata for allInputControlsTest.json

---
 packages/playground/Index.tsx                 |   2 +-
 packages/playground/src/App.tsx               |   2 +-
 .../src/data/allInputControlsTest.json        | 126 +++++++++++++-----
 .../src/views/EditorQuickformView.tsx         |   2 +-
 4 files changed, 93 insertions(+), 39 deletions(-)

diff --git a/packages/playground/Index.tsx b/packages/playground/Index.tsx
index 3989898..9c3c43d 100644
--- a/packages/playground/Index.tsx
+++ b/packages/playground/Index.tsx
@@ -2,4 +2,4 @@ import { App } from './src/App';
 import { createRoot } from 'react-dom/client';
 
 const container = document.getElementById('root');
-createRoot(container).render(<App />);
\ No newline at end of file
+createRoot(container!).render(<App />);
\ No newline at end of file
diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx
index 4add92a..73b15d9 100644
--- a/packages/playground/src/App.tsx
+++ b/packages/playground/src/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { QuickFormDefinition } from '../../core/src/model';
-import testdata from "./data/allInputControlsMultipleSlidesTest.json";
+import testdata from "./data/allInputControlsTest.json";
 import { QuickFormProvider } from '../../core/src/state';
 import { NavigationButton, QuickForm } from '../../core/src/components';
 import { QuickFormContainer } from './components';
diff --git a/packages/playground/src/data/allInputControlsTest.json b/packages/playground/src/data/allInputControlsTest.json
index f37ef22..b8d47d4 100644
--- a/packages/playground/src/data/allInputControlsTest.json
+++ b/packages/playground/src/data/allInputControlsTest.json
@@ -3,7 +3,7 @@
         "autoAdvanceSlides": false,
         "slides": {
             "slide1": {
-                "title": "Test-titel for slide",
+                "title": "Beregn prisen for rengøring af fliser",
                 "rows": {
                     "row1": {
                         "columns": {
@@ -15,15 +15,15 @@
                                     },
                                     "row1_2": {
                                         "type": "question",
-                                        "ref": "emailTest"
+                                        "ref": "multilineTest"
                                     },
                                     "row1_3": {
                                         "type": "question",
-                                        "ref": "phoneTest"
+                                        "ref": "emailTest"
                                     },
                                     "row1_4": {
                                         "type": "question",
-                                        "ref": "multilineTest"
+                                        "ref": "phoneTest"
                                     },
                                     "row1_5": {
                                         "type": "question",
@@ -40,6 +40,18 @@
                                     "row1_8": {
                                         "type": "question",
                                         "ref": "checkboxTest"
+                                    },
+                                    "row1_9": {
+                                        "type": "question",
+                                        "ref": "addressTest"
+                                    },
+                                    "row1_10": {
+                                        "type": "question",
+                                        "ref": "distanceTest"
+                                    },
+                                    "row1_11": {
+                                        "type": "question",
+                                        "ref": "nameTest"
                                     }
                                 }
                             }
@@ -49,11 +61,6 @@
             }
         }
     },
-    "intro": {
-        "text": "Playground Request Form",
-        "paragraph": "Tryk på start for at fortsætte...",
-        "buttonText": "Start"
-    },
     "submit": {
         "text": "",
         "buttonText": "Beregn",
@@ -108,33 +115,9 @@
     "ending": {
         "inputType": "ending",
         "text": "Tak for at du brugte vores service",
-        "paragraph": "Vi vil kontakte dig snarest."
+        "paragraph": "Vi vil kontakte dig snarest med dit tilbud."
     },
     "questions": {
-        "textTest": {
-            "inputType": "text",
-            "text": "Text test",
-            "paragraph": "Test af text",
-            "placeholder": "Skriv noget..",
-            "lang": "DA",
-            "afterIcon": "User"
-        },
-        "emailTest": {
-            "inputType": "email",
-            "text": "Email test",
-            "paragraph": "Test af email",
-            "placeholder": "Indtast din e-mail",
-            "lang": "DA",
-            "beforeIcon": "Email"
-        },
-        "phoneTest": {
-            "inputType": "phone",
-            "text": "Phone test",
-            "paragraph": "Test af phone",
-            "placeholder": "Skriv nogle tal..",
-            "lang": "DA",
-            "beforeIcon": "Phone"
-        },
         "sliderTest": {
             "defaultValue": 100,
             "inputType": "slider",
@@ -170,8 +153,14 @@
             "text": "Buttons test",
             "paragraph": "Test af buttons",
             "options": {
-                "yes": "Ja",
-                "no": "Nej"
+                "yes": {
+                    "key": "yes",
+                    "label": "Ja"
+                },
+                "no": {
+                    "key": "no",
+                    "label": "Nej"
+                }
             },
             "lang": "DA"
         },
@@ -180,6 +169,71 @@
             "text": "Multilinetext test",
             "paragraph": "Test af multilinetext",
             "lang": "DA"
+        },
+        "nameTest": {
+            "inputType": "text",
+            "text": "Text test",
+            "paragraph": "Test af text",
+            "placeholder": "Skriv noget..",
+            "lang": "DA",
+            "afterIcon": "User"
+        },
+        "phoneTest": {
+            "inputType": "phone",
+            "text": "Phone test",
+            "paragraph": "Test af phone",
+            "placeholder": "Skriv nogle tal..",
+            "lang": "DA",
+            "beforeIcon": "Phone"
+        },
+        "emailTest": {
+            "inputType": "email",
+            "text": "Email test",
+            "paragraph": "Test af email",
+            "placeholder": "Indtast din e-mail",
+            "lang": "DA",
+            "beforeIcon": "Email"
+        },
+        "addressTest": {
+            "inputType": "address",
+            "text": "Address test",
+            "paragraph": "Test af address",
+            "placeholder": "Indtast adresse",
+            "lang": "DA"
+        },
+        "distanceTest": {
+            "inputType": "distance",
+            "apiKey": "",
+            "text": "Distance test",
+            "paragraph": "Test af distance",
+            "placeholder": "Indtast adresse",
+            "lang": "DA",
+            "options": {
+                "0": {
+                    "key": 0,
+                    "title": "Fra",
+                    "location": "",
+                    "isUserInput": true
+                },
+                "1": {
+                    "key": 1,
+                    "title": "Via",
+                    "location": "",
+                    "isUserInput": false
+                },
+                "2": {
+                    "key": 2,
+                    "title": "Via",
+                    "location": "",
+                    "isUserInput": true
+                },
+                "3": {
+                    "key": 3,
+                    "title": "Til",
+                    "location": "",
+                    "isUserInput": true
+                }
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/packages/playground/src/views/EditorQuickformView.tsx b/packages/playground/src/views/EditorQuickformView.tsx
index 1073fb7..32b87f4 100644
--- a/packages/playground/src/views/EditorQuickformView.tsx
+++ b/packages/playground/src/views/EditorQuickformView.tsx
@@ -33,7 +33,7 @@ export default function EditorQuickformView() {
                     options={{
                     }}
                     onMount={async (editor) => {
-                        setTimeout(() => editor.getAction('editor.action.formatDocument').run(), 100);
+                        setTimeout(() => editor.getAction('editor.action.formatDocument')?.run(), 100);
                     }}
                     theme="vs-dark"
                 />

From 82039b032756b15065a321647ee1d42ef7c564c8 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Tue, 4 Jun 2024 11:28:38 +0200
Subject: [PATCH 026/118] fix: buttons aligns with screen size more properly
 now. 4 buttons pr. row on large screens is default

---
 packages/core/src/style/index.ts              |   3 +-
 .../core/src/style/modernQuickFormTokens.ts   |  75 ++++++++++
 packages/playground/index.html                |   1 +
 packages/playground/src/App.tsx               |  26 ++--
 .../components/buttons-input/ButtonsInput.tsx | 139 ++++++++++++------
 .../container/QuickFormContainer.tsx          |  24 ++-
 .../src/data/allInputControlsTest.json        |  20 +++
 7 files changed, 218 insertions(+), 70 deletions(-)
 create mode 100644 packages/core/src/style/modernQuickFormTokens.ts

diff --git a/packages/core/src/style/index.ts b/packages/core/src/style/index.ts
index 09c8aee..c173243 100644
--- a/packages/core/src/style/index.ts
+++ b/packages/core/src/style/index.ts
@@ -1 +1,2 @@
-export * from "./quickFormTokensDefinition";
\ No newline at end of file
+export * from "./quickFormTokensDefinition";
+export * from "./modernQuickFormTokens";
\ No newline at end of file
diff --git a/packages/core/src/style/modernQuickFormTokens.ts b/packages/core/src/style/modernQuickFormTokens.ts
new file mode 100644
index 0000000..73048b3
--- /dev/null
+++ b/packages/core/src/style/modernQuickFormTokens.ts
@@ -0,0 +1,75 @@
+import { QuickFormTokens } from "@eavfw/quickform-core";
+
+export const modernQuickFormTokens: QuickFormTokens = {
+    white: '#FFFFFF',
+    black: '#000000',
+    warning: '#FFA000',
+    success: '#4CAF50',
+    info: '#2196F3',
+
+    primary: 'rgb(23, 28, 71)',
+    primaryLighter: 'color-mix(in srgb, var(--primary) 80%, white)',
+    secondary: '#008000',
+
+    background: '#FAFAFA',
+    onBackground: '#212121',
+
+    onBackgroundDarker100: 'color-mix(in srgb, var(--on-background) 90%, black)',
+    onBackgroundDarker200: 'color-mix(in srgb, var(--on-background) 80%, black)',
+    onBackgroundDarker300: 'color-mix(in srgb, var(--on-background) 70%, black)',
+    onBackgroundDarker400: 'color-mix(in srgb, var(--on-background) 60%, black)',
+    onBackgroundDarker500: 'color-mix(in srgb, var(--on-background) 50%, black)',
+    onBackgroundDarker600: 'color-mix(in srgb, var(--on-background) 40%, black)',
+    onBackgroundDarker700: 'color-mix(in srgb, var(--on-background) 30%, black)',
+    onBackgroundDarker800: 'color-mix(in srgb, var(--on-background) 20%, black)',
+    onBackgroundDarker900: 'color-mix(in srgb, var(--on-background) 10%, black)',
+    onBackgroundLighter: 'color-mix(in srgb, var(--on-background) 80%, white)',
+
+    surface: '#EEEEEE',
+    onSurface: '#212121',
+
+    error: '#D32F2F',
+    onError: '#FFFFFF',
+    onErrorDarker100: 'color-mix(in srgb, var(--on-error) 90%, black)',
+    onErrorDarker200: 'color-mix(in srgb, var(--on-error) 80%, black)',
+    onErrorDarker300: 'color-mix(in srgb, var(--on-error) 70%, black)',
+    onErrorDarker400: 'color-mix(in srgb, var(--on-error) 60%, black)',
+    onErrorDarker500: 'color-mix(in srgb, var(--on-error) 50%, black)',
+    onErrorDarker600: 'color-mix(in srgb, var(--on-error) 40%, black)',
+    onErrorDarker700: 'color-mix(in srgb, var(--on-error) 30%, black)',
+    onErrorDarker800: 'color-mix(in srgb, var(--on-error) 20%, black)',
+    onErrorDarker900: 'color-mix(in srgb, var(--on-error) 10%, black)',
+
+    onPrimary: '#FFFFFF',
+    onSecondary: '#FFFFFF',
+
+    fontFamily: 'Outfit, Monaco, monospace',
+
+    headlineFontSize: '2rem',
+    paragraphFontSize: '1rem',
+    paragraphMobileFontSize: '1rem',
+    btnFontSize: '1.1rem',
+    btnFontWeight: 300,
+    btnEnterKeyTextFontSize: '1rem',
+    multilineTextFontSize: '1rem',
+    multilineTextMobileFontSize: '1rem',
+    questionHeadlineFontSize: '1.2em',
+    questionHeadlineFontWeight: 300,
+    questionParagraphFontSize: '1.2rem',
+    questionNumberFontSize: '1.2rem',
+    questionInputFontSize: "1.3rem",
+    questionInputGap: "1.5rem",
+    questionPlaceholderColor: '#757575',
+    questionTopMargin: '15px',
+    questionBottomMargin: '15px',
+    questionBorderRadius: '15px',
+    questionPadding: '0px',
+    gap1: '0.5rem',
+    gap2: '1rem',
+    gap4: '2rem',
+    disabledOpacity: 0.38,
+    dividerOpacity: 0.12,
+    lowEmphasisOpacity: 0.38,
+    mediumEmphasisOpacity: 0.60,
+    highEmphasisOpacity: 0.87,
+};
diff --git a/packages/playground/index.html b/packages/playground/index.html
index 9351b22..9b6ad33 100644
--- a/packages/playground/index.html
+++ b/packages/playground/index.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700&amp;display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Outfit:300,400,600,700&amp;display=swap" rel="stylesheet" />
     <title>QuickForm development env</title>
 </head>
 
diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx
index 73b15d9..5df13c6 100644
--- a/packages/playground/src/App.tsx
+++ b/packages/playground/src/App.tsx
@@ -5,23 +5,22 @@ import { QuickFormProvider } from '../../core/src/state';
 import { NavigationButton, QuickForm } from '../../core/src/components';
 import { QuickFormContainer } from './components';
 import "./components/index";
-
-const containerStyling: React.CSSProperties = {
-    width: '100%',
-    minHeight: '1200px',
-    padding: '10px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-}
+import { modernQuickFormTokens } from '@eavfw/quickform-core';
 
 export const App = () => {
     return (
-        <div style={containerStyling}>
+        <div
+            style={
+                {
+                    width: '100%',
+                }
+            }
+        >
             <QuickFormProvider
                 definition={testdata as QuickFormDefinition}
                 payload={{}}
-                asContainer={true}
+                asContainer={false}
+                tokens={modernQuickFormTokens}
             >
                 <QuickFormContainer
                     title="Test title"
@@ -30,7 +29,10 @@ export const App = () => {
                     <QuickForm />
                     <div
                         style={
-                            { display: 'flex', justifyContent: 'flex-end' }
+                            {
+                                display: 'flex',
+                                justifyContent: 'flex-end'
+                            }
                         }
                     >
                         <NavigationButton />
diff --git a/packages/playground/src/components/buttons-input/ButtonsInput.tsx b/packages/playground/src/components/buttons-input/ButtonsInput.tsx
index 906c01a..9e497d4 100644
--- a/packages/playground/src/components/buttons-input/ButtonsInput.tsx
+++ b/packages/playground/src/components/buttons-input/ButtonsInput.tsx
@@ -1,11 +1,91 @@
 "use client";
-import { useState } from "react";
-import { InputComponentType, registerInputComponent, useQuickForm } from "@eavfw/quickform-core";
+import React, { useState } from "react";
+import { InputComponentType, quickformtokens, registerInputComponent, useQuickForm } from "@eavfw/quickform-core";
+import { makeStyles, shorthands } from '@griffel/react';
 import { buttonsInputSchema } from "./ButtonsInputSchema";
 
-type buttonProps = { key: string, label: string };
 
-type ButtonsProperties = {
+const useButtonStyles = makeStyles({
+    buttonContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        width: '100%',
+        ...shorthands.gap("15px"),
+
+        "@media (max-width: 480px)": {
+            flexDirection: "column",
+        },
+    },
+
+    button: {
+        height: "55px",
+        backgroundColor: `${quickformtokens?.surface ?? "grey"}`,
+        color: `${quickformtokens?.onSurface ?? "white"}`,
+        fontSize: '1rem',
+        cursor: 'pointer',
+        width: "100%",
+        flexGrow: 1,
+        flexBasis: "100%",
+
+        /* Extra small devices (phones, 600px and down) */
+        "@media only screen and (max-width: 600px)": {
+            flexBasis: "100%",
+        },
+
+        /* Small devices (portrait tablets and large phones, 600px and up) */
+        "@media only screen and (min-width: 600px)": {
+            flexBasis: "50%",
+        },
+
+        /* Medium devices (landscape tablets, 768px and up) */
+        "@media only screen and (min-width: 768px)": {
+            flexBasis: "33.33%",
+        },
+
+        /* Large devices (laptops/desktops, 992px and up) */
+        "@media only screen and (min-width: 992px)": {
+            flexBasis: "22%",
+        },
+
+        ":nth-child(n+5)": {
+            flexGrow: 0,
+            "@media only screen and (min-width: 600px)": {
+                flexBasis: "100%",
+            },
+            "@media only screen and (min-width: 768px)": {
+                flexBasis: "48%",
+            },
+            "@media only screen and (min-width: 992px)": {
+                flexBasis: "23%",
+            },
+
+        },
+
+        boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
+        ...shorthands.transition(
+            "background, color, border, border-color, box-shadow",
+            "350ms",
+            "ease-in-out",
+            "0ms"
+        ),
+        ...shorthands.border("1px", "solid", `${quickformtokens?.primary ?? "grey"}`),
+        ...shorthands.borderRadius("5px"),
+        // ...shorthands.padding("0", "25px"),
+        ...shorthands.margin("5px"),
+        // '&:hover': { 
+        //     backgroundColor: `${quickformtokens?.primary || "grey"}`,
+        //     color: `${quickformtokens?.onPrimary || "white"}`,
+        // }
+    },
+    selected: {
+        backgroundColor: `${quickformtokens?.primary ?? "grey"}`,
+        color: `${quickformtokens?.onPrimary ?? "white"}`,
+
+    }
+});
+
+export type ButtonsProperties = {
     inputType: "buttons";
     options: {
         [key: string]: {
@@ -18,24 +98,27 @@ type ButtonsProperties = {
 
 export const ButtonsInput: InputComponentType<ButtonsProperties> = ({ questionModel, options }) => {
     const { answerQuestion } = useQuickForm();
-    const [selectedValue, setSelectedValue] = useState<buttonProps>(questionModel.output);
+    const [selectedValue, setSelectedValue] = useState<string>(questionModel.output);
+    const buttonStyles = useButtonStyles();
 
-    const handleChange = (value: buttonProps) => {
+    const handleChange = (value: string) => {
         setSelectedValue(value);
         answerQuestion(questionModel.logicalName, value);
     };
 
-
     return (
-        <div style={buttonContainerStyles}>
+        <div className={buttonStyles.buttonContainer}>
             {Object.entries(options).map(([key, value]) => (
                 <button
-                    key={key}
-                    onClick={() => handleChange(value)}
-                    style={selectedValue === value ? { ...buttonStyles, ...selectedStyles } : buttonStyles}
-                    id={`${questionModel.logicalName}-${key}`}
+                    key={`button-key-${key}`}
+                    onClick={() => handleChange(key)}
+                    className={`${buttonStyles.button} ${selectedValue === key ? buttonStyles.selected : ''}`}
+                    id={`${questionModel.logicalName}-${value.key}`}
                 >
-                    {value.label}
+                    <div style={{ display: 'flex', justifyContent: 'center' }}>
+                        {/* {selectedValue === key && <Checkmark style={{ paddingLeft: '10px' }} size={20} color={quickformtokens.onPrimary} />}{value} */}
+                        {value.label}
+                    </div>
                 </button>
             ))}
         </div>
@@ -43,32 +126,4 @@ export const ButtonsInput: InputComponentType<ButtonsProperties> = ({ questionMo
 };
 
 ButtonsInput.inputSchema = buttonsInputSchema;
-registerInputComponent("buttons", ButtonsInput);
-
-
-const selectedStyles: React.CSSProperties = {
-    backgroundColor: 'var(--primary)',
-    color: 'white',
-};
-
-const buttonContainerStyles: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: '20px',
-    width: '100%',
-    marginTop: '20px',
-};
-
-const buttonStyles: React.CSSProperties = {
-    height: '50px',
-    width: '50%',
-    maxWidth: 'calc(50% - 10px)',
-    padding: '0 25px',
-    fontSize: '16px',
-    cursor: 'pointer',
-    border: '1px solid var(--surface)',
-    backgroundColor: 'var(--background)',
-    textAlign: 'center',
-    borderRadius: '10px',
-};
+registerInputComponent("buttons", ButtonsInput);
\ No newline at end of file
diff --git a/packages/playground/src/components/container/QuickFormContainer.tsx b/packages/playground/src/components/container/QuickFormContainer.tsx
index a6de368..67dd01d 100644
--- a/packages/playground/src/components/container/QuickFormContainer.tsx
+++ b/packages/playground/src/components/container/QuickFormContainer.tsx
@@ -1,24 +1,12 @@
 import { ErrorPopup, quickformtokens, useQuickForm } from "@eavfw/quickform-core";
 import { makeStyles, shorthands, mergeClasses } from "@griffel/react";
 import React, { PropsWithChildren } from "react";
-// import { Outfit } from "next/font/google";
-// const outfit = Outfit({ subsets: ["latin"] });
-
 
 const useStyles = makeStyles({
     root: {
-        display: 'flex',
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: 'center',
-        width: "100%",
-        minWidth: "800px",
-        maxWidth: "1080px",
-        height: 'fit-content',
         ...shorthands.padding("20px", "20px", "20px", "20px"),
         ...shorthands.margin("20px", "0px"),
         ...shorthands.borderRadius("20px"),
-        // borderRadius: '20px',
         boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px',
     }
 })
@@ -33,8 +21,14 @@ export const QuickFormContainer: React.FC<PropsWithChildren<QuickFormContainerPr
     const styles = useStyles();
     const { state: { errorMsg }, cssVariables } = useQuickForm();
     return (
-        <div id="QuickForm" className={mergeClasses(styles.root/*, outfit.className*/)} style={cssVariables}>
-            <ErrorPopup message={errorMsg} />
+        <div
+            id="QuickForm"
+            className={mergeClasses(styles.root/*, outfit.className*/)}
+            style={cssVariables}
+        >
+            <ErrorPopup
+                message={errorMsg}
+            />
             <Headline
                 text={title}
                 fontWeight={800}
@@ -47,7 +41,7 @@ export const QuickFormContainer: React.FC<PropsWithChildren<QuickFormContainerPr
                 color={"inherit"}
                 lineHeight={1.1}
             />
-            <div style={{ width: "95%", margin: "30px 0px 10px 0px" }}>
+            <div>
                 {children}
             </div>
         </div >
diff --git a/packages/playground/src/data/allInputControlsTest.json b/packages/playground/src/data/allInputControlsTest.json
index b8d47d4..d0c9820 100644
--- a/packages/playground/src/data/allInputControlsTest.json
+++ b/packages/playground/src/data/allInputControlsTest.json
@@ -160,6 +160,26 @@
                 "no": {
                     "key": "no",
                     "label": "Nej"
+                },
+                "maybe": {
+                    "key": "maybe",
+                    "label": "Måske"
+                },
+                "dontKnow": {
+                    "key": "dontKnow",
+                    "label": "Ved ikke"
+                },
+                "dontCare": {
+                    "key": "dontCare",
+                    "label": "Ligeglad"
+                },
+                "other": {
+                    "key": "other",
+                    "label": "Andet"
+                },
+                "other2": {
+                    "key": "other2",
+                    "label": "Andet 2"
                 }
             },
             "lang": "DA"

From e1dc1ca7e615007980ff9d521c66f4bcaa76f244 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Tue, 4 Jun 2024 12:47:15 +0200
Subject: [PATCH 027/118] fix: removed maxWidth on question as it caused
 alignment to behave unexpected on large widths

---
 packages/core/src/components/question/Question.tsx               | 1 -
 .../question/input-types/baseinput/BaseInputComponent.tsx        | 1 -
 .../playground/src/components/baseinput/BaseInputComponent.tsx   | 1 -
 3 files changed, 3 deletions(-)

diff --git a/packages/core/src/components/question/Question.tsx b/packages/core/src/components/question/Question.tsx
index 7509956..dc03085 100644
--- a/packages/core/src/components/question/Question.tsx
+++ b/packages/core/src/components/question/Question.tsx
@@ -15,7 +15,6 @@ type QuestionProps = {
 const questionStyling: React.CSSProperties = {
     marginTop: quickformtokens.questionTopMargin,
     marginBottom: quickformtokens.questionBottomMargin,
-    maxWidth: '72rem',
     transition: "transform 0.3s ease-out",
     minHeight: '100px',
     color: quickformtokens.onSurface,
diff --git a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
index 9e7d25e..d87165b 100644
--- a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
+++ b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
@@ -39,7 +39,6 @@ const useInputTextStyles = makeStyles({
 
         '@media screen and (max-width: 599px)': {
             fontSize: quickformtokens?.questionInputFontSize || "16px",
-            marginTop: '32px',
         },
 
     },
diff --git a/packages/playground/src/components/baseinput/BaseInputComponent.tsx b/packages/playground/src/components/baseinput/BaseInputComponent.tsx
index 2cca179..658b751 100644
--- a/packages/playground/src/components/baseinput/BaseInputComponent.tsx
+++ b/packages/playground/src/components/baseinput/BaseInputComponent.tsx
@@ -38,7 +38,6 @@ const useInputTextStyles = makeStyles({
 
         '@media screen and (max-width: 599px)': {
             fontSize: quickformtokens?.questionInputFontSize || "16px",
-            marginTop: '32px',
         },
 
     },

From a7b0ec4318e43830f9f1a08862b07761f73d53f2 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Tue, 4 Jun 2024 13:11:15 +0200
Subject: [PATCH 028/118] fix: minor width cleanup - added new bottomPadding to
 question to compensate for space needed for error message (so it doesnt bump
 when msg is cleared)

---
 packages/core/src/components/QuickForm.tsx    |  2 +-
 .../core/src/components/question/Question.tsx |  5 ++---
 .../slide-renderer/SlideRenderer.tsx          | 12 ++++--------
 packages/core/src/components/slide/Slide.tsx  | 19 +++++++++++++++----
 .../core/src/style/defaultQuickFormTokens.ts  |  3 ++-
 packages/core/src/style/kbaQuickFormTokens.ts |  1 +
 .../core/src/style/modernQuickFormTokens.ts   |  1 +
 .../src/style/quickFormTokensDefinition.ts    |  3 ++-
 packages/playground/src/App.tsx               |  8 +-------
 9 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/packages/core/src/components/QuickForm.tsx b/packages/core/src/components/QuickForm.tsx
index 40f4ddf..ac4f6b0 100644
--- a/packages/core/src/components/QuickForm.tsx
+++ b/packages/core/src/components/QuickForm.tsx
@@ -19,7 +19,7 @@ export const QuickForm: React.FC = () => {
     };
 
     return (
-        <div style={{ width: "100%" }}>
+        <div>
             {renderComponent()}
         </div>
     );
diff --git a/packages/core/src/components/question/Question.tsx b/packages/core/src/components/question/Question.tsx
index dc03085..231c99a 100644
--- a/packages/core/src/components/question/Question.tsx
+++ b/packages/core/src/components/question/Question.tsx
@@ -13,13 +13,12 @@ type QuestionProps = {
 }
 
 const questionStyling: React.CSSProperties = {
-    marginTop: quickformtokens.questionTopMargin,
-    marginBottom: quickformtokens.questionBottomMargin,
+    margin: `${quickformtokens.questionTopMargin} 0 ${quickformtokens.questionBottomMargin} 0`,
     transition: "transform 0.3s ease-out",
     minHeight: '100px',
     color: quickformtokens.onSurface,
     borderRadius: quickformtokens.questionBorderRadius,
-    padding: quickformtokens.questionPadding
+    padding: `${quickformtokens.questionPadding}, ${quickformtokens.questionPadding}, ${quickformtokens.questionPaddingBottom}, ${quickformtokens.questionPadding}`,
 }
 
 export const Question: React.FC<QuestionProps> = ({ model, style }) => {
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index deb619f..4dc1212 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -41,7 +41,10 @@ export const SlideRenderer: React.FC = () => {
         }
     }, [state.currIdx])
     return (
-        <div className={className} id="SlideRenderer" style={slideStyling}        >
+        <div
+            id="SlideRenderer"
+            className={className}
+        >
             <Slide model={currentSlide} />
             <Button
                 style={{ display: 'flex', alignItems: 'center', justifyContent: 'start' }}
@@ -57,13 +60,6 @@ export const SlideRenderer: React.FC = () => {
     );
 };
 
-const slideStyling: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%'
-}
-
-
 // enum ViewStatus {
 //     InView,
 //     TransitioningOut,
diff --git a/packages/core/src/components/slide/Slide.tsx b/packages/core/src/components/slide/Slide.tsx
index 3ba712a..b50657f 100644
--- a/packages/core/src/components/slide/Slide.tsx
+++ b/packages/core/src/components/slide/Slide.tsx
@@ -9,13 +9,24 @@ type SlideProps = {
 }
 
 export const Slide: React.FC<SlideProps> = ({ model, className }: SlideProps) => {
-    console.log("Slide", model);
     return (
-        <div className={className} id="Slide" style={{ display: 'flex', flexDirection: 'column', width: "100%" }}>
+        <div
+            id="Slide"
+            className={className}
+        // style={{ display: 'flex', flexDirection: 'column', width: "100%" }}
+        >
             {
                 model.rows.map((row, rowIndex) => (
-                    <div key={rowIndex} style={rowContainerStyling}>
-                        <RowRenderer key={"row" + rowIndex} row={row} questions={model.questions} />
+                    <div
+                        id={"row" + rowIndex}
+                        key={rowIndex}
+                        style={rowContainerStyling}
+                    >
+                        <RowRenderer
+                            key={"row" + rowIndex}
+                            row={row}
+                            questions={model.questions}
+                        />
                     </div>
                 ))
             }
diff --git a/packages/core/src/style/defaultQuickFormTokens.ts b/packages/core/src/style/defaultQuickFormTokens.ts
index 1b0d8ad..b81aebe 100644
--- a/packages/core/src/style/defaultQuickFormTokens.ts
+++ b/packages/core/src/style/defaultQuickFormTokens.ts
@@ -57,11 +57,12 @@ export const defaultQuickFormTokens: QuickFormTokens = {
     questionInputFontSize: "3rem",
     questionInputGap: "3.6rem",
     questionPlaceholderColor: 'color-mix(in srgb, var(--on-surface) 80%, black)',
-    questionHeadlineFontWeight:400,
+    questionHeadlineFontWeight: 400,
     questionBottomMargin: '15px',
     questionTopMargin: '15px',
     questionBorderRadius: '15px',
     questionPadding: '0px',
+    questionPaddingBottom: '15px',
     gap1: '0.5rem',
     gap2: '1rem',
     gap4: '2rem',
diff --git a/packages/core/src/style/kbaQuickFormTokens.ts b/packages/core/src/style/kbaQuickFormTokens.ts
index 24875d1..7d5de2b 100644
--- a/packages/core/src/style/kbaQuickFormTokens.ts
+++ b/packages/core/src/style/kbaQuickFormTokens.ts
@@ -64,6 +64,7 @@ export const kbaQuickFormTokens: QuickFormTokens = {
     questionBottomMargin: '15px',
     questionBorderRadius: '15px',
     questionPadding: '0px',
+    questionPaddingBottom: '15px',
     gap1: '0.5rem',
     gap2: '1rem',
     gap4: '2rem',
diff --git a/packages/core/src/style/modernQuickFormTokens.ts b/packages/core/src/style/modernQuickFormTokens.ts
index 73048b3..3e82cd9 100644
--- a/packages/core/src/style/modernQuickFormTokens.ts
+++ b/packages/core/src/style/modernQuickFormTokens.ts
@@ -64,6 +64,7 @@ export const modernQuickFormTokens: QuickFormTokens = {
     questionBottomMargin: '15px',
     questionBorderRadius: '15px',
     questionPadding: '0px',
+    questionPaddingBottom: '15px',
     gap1: '0.5rem',
     gap2: '1rem',
     gap4: '2rem',
diff --git a/packages/core/src/style/quickFormTokensDefinition.ts b/packages/core/src/style/quickFormTokensDefinition.ts
index d0ada9b..6307c4f 100644
--- a/packages/core/src/style/quickFormTokensDefinition.ts
+++ b/packages/core/src/style/quickFormTokensDefinition.ts
@@ -60,9 +60,10 @@ type QuickFormTokensBase = {
     // Question
     questionBorderRadius: string;
     questionTopMargin: string;
-    questionBottomMargin:string;
+    questionBottomMargin: string;
     questionPadding: string;
     questionInputGap: Gap,
+    questionPaddingBottom: string;
 };
 
 export type QuickFormTokens = QuickFormTokensBase & {
diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx
index 5df13c6..8d1d886 100644
--- a/packages/playground/src/App.tsx
+++ b/packages/playground/src/App.tsx
@@ -9,13 +9,7 @@ import { modernQuickFormTokens } from '@eavfw/quickform-core';
 
 export const App = () => {
     return (
-        <div
-            style={
-                {
-                    width: '100%',
-                }
-            }
-        >
+        <div>
             <QuickFormProvider
                 definition={testdata as QuickFormDefinition}
                 payload={{}}

From b1c980212625dee584e8cbd9c70341bb7f82c5b9 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Wed, 5 Jun 2024 09:15:13 +0200
Subject: [PATCH 029/118] fix: corrects a width scaling issue on buttons and
 multilineinput

---
 packages/playground/Index.tsx                 |  1 +
 packages/playground/index.html                |  2 +-
 packages/playground/src/App.tsx               | 30 ++++++++++++-------
 .../components/buttons-input/ButtonsInput.tsx | 20 ++++++-------
 .../container/QuickFormContainer.tsx          |  5 ++--
 .../components/multiline/MultilineInput.tsx   | 14 ++++-----
 .../src/data/allInputControlsTest.json        |  1 +
 7 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/packages/playground/Index.tsx b/packages/playground/Index.tsx
index 9c3c43d..87c0ca0 100644
--- a/packages/playground/Index.tsx
+++ b/packages/playground/Index.tsx
@@ -2,4 +2,5 @@ import { App } from './src/App';
 import { createRoot } from 'react-dom/client';
 
 const container = document.getElementById('root');
+container?.style.setProperty('background-color', 'lightgray');
 createRoot(container!).render(<App />);
\ No newline at end of file
diff --git a/packages/playground/index.html b/packages/playground/index.html
index 9b6ad33..13cde3a 100644
--- a/packages/playground/index.html
+++ b/packages/playground/index.html
@@ -9,7 +9,7 @@
     <title>QuickForm development env</title>
 </head>
 
-<body>
+<body style="margin: 0;">
     <!-- The React app will mount here -->
     <div id="root"></div>
 </body>
diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx
index 8d1d886..1d0cf61 100644
--- a/packages/playground/src/App.tsx
+++ b/packages/playground/src/App.tsx
@@ -6,10 +6,20 @@ import { NavigationButton, QuickForm } from '../../core/src/components';
 import { QuickFormContainer } from './components';
 import "./components/index";
 import { modernQuickFormTokens } from '@eavfw/quickform-core';
+import { makeStyles, shorthands } from "@griffel/react";
+
+const useAppStyles = makeStyles({
+    container: {
+        ...shorthands.padding("40px"),
+        ...shorthands.margin(0),
+    }
+});
 
 export const App = () => {
+
+    const classes = useAppStyles();
     return (
-        <div>
+        <div className={classes.container}>
             <QuickFormProvider
                 definition={testdata as QuickFormDefinition}
                 payload={{}}
@@ -21,16 +31,16 @@ export const App = () => {
                     subtitle='Test subtitle'
                 >
                     <QuickForm />
-                    <div
-                        style={
-                            {
-                                display: 'flex',
-                                justifyContent: 'flex-end'
-                            }
+                    {/* <div
+                    style={
+                        {
+                            display: 'flex',
+                            justifyContent: 'flex-end'
                         }
-                    >
-                        <NavigationButton />
-                    </div>
+                    }
+                >
+                    <NavigationButton />
+                </div> */}
                 </QuickFormContainer>
             </QuickFormProvider>
         </div>
diff --git a/packages/playground/src/components/buttons-input/ButtonsInput.tsx b/packages/playground/src/components/buttons-input/ButtonsInput.tsx
index 9e497d4..14774b2 100644
--- a/packages/playground/src/components/buttons-input/ButtonsInput.tsx
+++ b/packages/playground/src/components/buttons-input/ButtonsInput.tsx
@@ -25,7 +25,7 @@ const useButtonStyles = makeStyles({
         fontSize: '1rem',
         cursor: 'pointer',
         width: "100%",
-        flexGrow: 1,
+        flexGrow: 0,
         flexBasis: "100%",
 
         /* Extra small devices (phones, 600px and down) */
@@ -50,15 +50,15 @@ const useButtonStyles = makeStyles({
 
         ":nth-child(n+5)": {
             flexGrow: 0,
-            "@media only screen and (min-width: 600px)": {
-                flexBasis: "100%",
-            },
-            "@media only screen and (min-width: 768px)": {
-                flexBasis: "48%",
-            },
-            "@media only screen and (min-width: 992px)": {
-                flexBasis: "23%",
-            },
+            // "@media only screen and (min-width: 600px)": {
+            //     flexBasis: "100%",
+            // },
+            // "@media only screen and (min-width: 768px)": {
+            //     flexBasis: "48%",
+            // },
+            // "@media only screen and (min-width: 992px)": {
+            //     flexBasis: "23%",
+            // },
 
         },
 
diff --git a/packages/playground/src/components/container/QuickFormContainer.tsx b/packages/playground/src/components/container/QuickFormContainer.tsx
index 67dd01d..e23b310 100644
--- a/packages/playground/src/components/container/QuickFormContainer.tsx
+++ b/packages/playground/src/components/container/QuickFormContainer.tsx
@@ -1,5 +1,5 @@
 import { ErrorPopup, quickformtokens, useQuickForm } from "@eavfw/quickform-core";
-import { makeStyles, shorthands, mergeClasses } from "@griffel/react";
+import { makeStyles, shorthands } from "@griffel/react";
 import React, { PropsWithChildren } from "react";
 
 const useStyles = makeStyles({
@@ -8,6 +8,7 @@ const useStyles = makeStyles({
         ...shorthands.margin("20px", "0px"),
         ...shorthands.borderRadius("20px"),
         boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px',
+        backgroundColor: quickformtokens.background ?? "white"
     }
 })
 
@@ -23,7 +24,7 @@ export const QuickFormContainer: React.FC<PropsWithChildren<QuickFormContainerPr
     return (
         <div
             id="QuickForm"
-            className={mergeClasses(styles.root/*, outfit.className*/)}
+            className={styles.root}
             style={cssVariables}
         >
             <ErrorPopup
diff --git a/packages/playground/src/components/multiline/MultilineInput.tsx b/packages/playground/src/components/multiline/MultilineInput.tsx
index 8575bb8..a3927cd 100644
--- a/packages/playground/src/components/multiline/MultilineInput.tsx
+++ b/packages/playground/src/components/multiline/MultilineInput.tsx
@@ -1,26 +1,26 @@
 "use client";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
 import { makeStyles, shorthands } from "@griffel/react";
-import {  useQuickForm, InputComponentType, registerInputComponent, quickformtokens } from "@eavfw/quickform-core";
+import { useQuickForm, InputComponentType, registerInputComponent, quickformtokens } from "@eavfw/quickform-core";
 import { multilineInputSchema } from "./MultilineInputSchema";
 import { MultilineProperties } from "../../../../core/src/model";
 
 const useInputTextStyles = makeStyles({
     inputText: {
         backgroundColor: 'transparent',
-        ...shorthands.border(`1px solid ${quickformtokens.onSurface}`),
+        ...shorthands.border(`1px solid ${quickformtokens.primary}`),
         ...shorthands.borderRadius('5px'),
         color: quickformtokens.onSurface,
         fontSize: quickformtokens.multilineTextFontSize,
         marginTop: '15px',
         paddingBottom: '9px',
-        width: '100%',
-        maxHeight: '8rem', // Set maximum height for three lines
+        maxHeight: '8rem',
         height: '8rem',
-        resize: 'vertical',
+        width: '100%',
+        boxSizing: 'border-box',
         ...shorthands.overflow('auto'),
         '&:focus-visible': {
-            ...shorthands.borderBottom("2px", "solid", `${quickformtokens.onSurface}`),
+            ...shorthands.borderBottom("2px", "solid", `${quickformtokens.primary}`),
             ...shorthands.outline('none'),
             paddingBottom: '8px'
         },
@@ -39,6 +39,7 @@ const useInputTextStyles = makeStyles({
     },
 });
 
+
 export const MultilineInput: InputComponentType<MultilineProperties> = ({ questionModel }) => {
     const styles = useInputTextStyles();
     const { isFirstQuestionInCurrentSlide, answerQuestion, state } = useQuickForm();
@@ -69,7 +70,6 @@ export const MultilineInput: InputComponentType<MultilineProperties> = ({ questi
             placeholder={placeholder}
             value={text}
             onChange={handleChange}
-            style={{ width: '100%' }}
         />
     );
 };
diff --git a/packages/playground/src/data/allInputControlsTest.json b/packages/playground/src/data/allInputControlsTest.json
index d0c9820..07b45db 100644
--- a/packages/playground/src/data/allInputControlsTest.json
+++ b/packages/playground/src/data/allInputControlsTest.json
@@ -4,6 +4,7 @@
         "slides": {
             "slide1": {
                 "title": "Beregn prisen for rengøring af fliser",
+                "buttonText": "Næste",
                 "rows": {
                     "row1": {
                         "columns": {

From d88b75dacac91c5ddcc8167df50206093ca94def Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 5 Jun 2024 12:02:24 +0200
Subject: [PATCH 030/118] feat: added support to override the submitfields
 component and setting the nextbutton on layout

---
 packages/core/src/model/json-definitions/Layout.ts    |  4 ++++
 .../src/services/defaults/DefaultModelTransformer.ts  |  7 +++++--
 .../src/Components/Views/QuickFormQuestionsView.tsx   |  9 +++++----
 .../Components/Views/QuickFormSubmitSettingsView.tsx  | 11 ++++++-----
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/model/json-definitions/Layout.ts b/packages/core/src/model/json-definitions/Layout.ts
index e9f2058..5b54026 100644
--- a/packages/core/src/model/json-definitions/Layout.ts
+++ b/packages/core/src/model/json-definitions/Layout.ts
@@ -3,6 +3,10 @@ import { QuickformClassNames } from "../../state/QuickformState";
 import { IconType } from "../../components/icons/IconResolver";
 
 export type LayoutDefinition = {
+    /**
+     * The default text of next button on slides
+     */
+    defaultNextButtonText?: string;
     classes?: Partial<QuickformClassNames>,
     style?: React.CSSProperties;
     tokens?: Partial<QuickFormTokens>;
diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
index 25bfbbc..64fe908 100644
--- a/packages/core/src/services/defaults/DefaultModelTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -91,7 +91,7 @@ function handleLayout(layout: LayoutDefinition, questions: QuickFormQuestionsDef
         Object.values(layout.slides).forEach(slide => {
             const slideModel = new SlideModel();
             slideModel.displayName = slide.title;
-            slideModel.buttonText = slide.buttonText;
+            slideModel.buttonText = slide.buttonText ?? layout.defaultNextButtonText;
             slideModel.icon = slide.icon;
 
             if (slide.rows) {
@@ -153,12 +153,15 @@ function handleSubmit(submit: QuickFormSubmitDefinition, payload: any): SubmitMo
         Object.entries((schema?.properties ?? {}) as { [key: string]: any })
             .filter(([k, v]) => uiSchema?.[k]?.["ui:widget"] !== "hidden")
             .map(([k, v]) => [k, {
+              
                 inputType: v.type === "string" ? "text" : "dropdown",
                 options: v.type === "string" ? undefined : { "Y": "Yes", "N": "No" },
                 placeholder: uiSchema?.[k]?.["ui:placeholder"],
                 text: (uiSchema?.[k]?.["ui:label"] ?? true) ? v.title : undefined,
                 paragraph: v.description,
-                dataType: v.type
+                dataType: v.type,
+                ...uiSchema?.[k]?.["ui:inputProps"] ?? {}
+               
             } as QuestionJsonModel])
     );
 
diff --git a/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx b/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
index 8ad6c38..1a73686 100644
--- a/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
@@ -12,10 +12,11 @@ import { BaseInputTemplate } from "./rjsf/BaseInputTemplate";
 import { InputComponentMetadata, resolveInputComponentSchemas } from "@eavfw/quickform-core";
 
 
-const additionalFields = {} as { [key: string]: React.FC<FieldProps> };
-
-export const registerInputControlDesignerField = (field: string, component: React.FC<FieldProps>) => additionalFields[field] = component;
+export const QuickformDesignerFields = {} as { [key: string]: React.FC<FieldProps> };
 
+export function registerInputControlDesignerField<T = any>(field: string, component: React.FC<FieldProps<T>>) {
+    QuickformDesignerFields[field] = component as React.FC<FieldProps>;
+}
 export const QuickFormQuestionsView: React.FC<{
     dispatch: React.Dispatch<React.SetStateAction<QuickFormDesignerDefinition>>,
     currentQuestion?: string,
@@ -113,7 +114,7 @@ export const QuickFormQuestionsView: React.FC<{
                 {question.inputType &&
                     <Form tagName="div" key={currentQuestion + question.inputType}
                         templates={{ FieldTemplate: FieldTemplate, BaseInputTemplate: BaseInputTemplate }}
-                        fields={additionalFields}
+                        fields={QuickformDesignerFields}
                         validator={validator}
                         {...schemas[question.inputType]}
                         formData={questions[currentQuestion]}
diff --git a/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx
index 1dca757..f16d6c4 100644
--- a/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx
@@ -11,6 +11,7 @@ import { mergeClasses } from "@fluentui/react-components";
 import { JSONSchema7, JSONSchema7Definition } from "json-schema";
 import { JsonField, JsonWidget } from "./rjsf/Widgets/JsonWidget";
 import { RegistryFieldsType } from "@rjsf/utils";
+import { QuickformDesignerFields } from "./QuickFormQuestionsView";
 
 const submitSlideSchema = {
     label: "Ending Settings",
@@ -21,10 +22,8 @@ const submitSlideSchema = {
         paragraph: {
             "ui:widget": "textarea"
         },
-        submitFields: {
-            "ui:widget": "jsonWidget",
-         //   "ui:ObjectFieldTemplate": JsonFieldTemplate
-            "ui:field":"jsonField"
+        submitFields: {         
+            "ui:field":"QFSubmitField"
         }
     },
     schema: {
@@ -63,7 +62,9 @@ export const QuickFormSubmitSettingsView = () => {
 
     return (
         <div className={mergeClasses(styles.section, styles.sectionSlim)}>
-            <Form templates={{ FieldTemplate: FieldTemplate, BaseInputTemplate: BaseInputTemplate }} fields={{ "jsonField": JsonField }} widgets={{ jsonWidget: JsonWidget }}
+            <Form templates={{ FieldTemplate: FieldTemplate, BaseInputTemplate: BaseInputTemplate }}
+                fields={{ ...{ "QFSubmitField": JsonField }, ...QuickformDesignerFields }}
+                widgets={{ jsonWidget: JsonWidget }}
                 validator={validator}
                 {...submitSlideSchema}
                 formData={submit}

From 535fcf029e68da60a81fe6e57e1c07744666dff7 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Wed, 5 Jun 2024 12:04:44 +0200
Subject: [PATCH 031/118] fix: buttonsinput updated

---
 .../components/buttons-input/ButtonsInput.tsx | 29 ++++---------------
 1 file changed, 6 insertions(+), 23 deletions(-)

diff --git a/packages/playground/src/components/buttons-input/ButtonsInput.tsx b/packages/playground/src/components/buttons-input/ButtonsInput.tsx
index 14774b2..d4912e2 100644
--- a/packages/playground/src/components/buttons-input/ButtonsInput.tsx
+++ b/packages/playground/src/components/buttons-input/ButtonsInput.tsx
@@ -20,6 +20,7 @@ const useButtonStyles = makeStyles({
 
     button: {
         height: "55px",
+        minHeight: "55px",
         backgroundColor: `${quickformtokens?.surface ?? "grey"}`,
         color: `${quickformtokens?.onSurface ?? "white"}`,
         fontSize: '1rem',
@@ -35,31 +36,19 @@ const useButtonStyles = makeStyles({
 
         /* Small devices (portrait tablets and large phones, 600px and up) */
         "@media only screen and (min-width: 600px)": {
-            flexBasis: "50%",
+            // flexBasis: "50%",
+            flexBasis: "calc(50% - 7.5px)"
         },
 
         /* Medium devices (landscape tablets, 768px and up) */
         "@media only screen and (min-width: 768px)": {
-            flexBasis: "33.33%",
+            flexBasis: "calc(33.3333% - 10px)",
         },
 
         /* Large devices (laptops/desktops, 992px and up) */
         "@media only screen and (min-width: 992px)": {
-            flexBasis: "22%",
-        },
-
-        ":nth-child(n+5)": {
-            flexGrow: 0,
-            // "@media only screen and (min-width: 600px)": {
-            //     flexBasis: "100%",
-            // },
-            // "@media only screen and (min-width: 768px)": {
-            //     flexBasis: "48%",
-            // },
-            // "@media only screen and (min-width: 992px)": {
-            //     flexBasis: "23%",
-            // },
-
+            // 4 buttons on a row gives 3 gaps (3x15 px) - this provides the calculation 45px/4 items width = 11.25px
+            flexBasis: "calc(25% - 11.25px)",
         },
 
         boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
@@ -71,12 +60,6 @@ const useButtonStyles = makeStyles({
         ),
         ...shorthands.border("1px", "solid", `${quickformtokens?.primary ?? "grey"}`),
         ...shorthands.borderRadius("5px"),
-        // ...shorthands.padding("0", "25px"),
-        ...shorthands.margin("5px"),
-        // '&:hover': { 
-        //     backgroundColor: `${quickformtokens?.primary || "grey"}`,
-        //     color: `${quickformtokens?.onPrimary || "white"}`,
-        // }
     },
     selected: {
         backgroundColor: `${quickformtokens?.primary ?? "grey"}`,

From ab9b8225548a5665fc2385ef5e9a89171590bb87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 6 Jun 2024 09:37:33 +0200
Subject: [PATCH 032/118] fix: support ui:label in submitfields

---
 .../core/src/services/defaults/DefaultModelTransformer.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
index 64fe908..42e8cfc 100644
--- a/packages/core/src/services/defaults/DefaultModelTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -173,8 +173,8 @@ function handleSubmit(submit: QuickFormSubmitDefinition, payload: any): SubmitMo
     });
 
     return {
-        text: schema?.title ?? submit?.text ?? "Submit QuickForm",
-        paragraph: schema?.description,
+        text: uiSchema["ui:label"] === false ? '': schema?.title ?? submit?.text ?? "Submit QuickForm",
+        paragraph: uiSchema["ui:label"] === false ? '' : schema?.description,
         buttonText: submit?.buttonText ?? "Submit",
         submitFields: submitFieldsArray,
         submitUrl: submit.submitUrl,

From 88856fd7f15dc10fcd4e5181a884ad650b68ed17 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Fri, 7 Jun 2024 11:05:49 +0200
Subject: [PATCH 033/118] fix: adds enter button listener hook on '<Submit />'

---
 packages/core/src/components/submit/Submit.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index 1d9b5b3..6a3394e 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -3,6 +3,7 @@ import { SubmitModel } from "../../model";
 import { useQuickForm } from "../../state/QuickFormContext";
 import { Heading, Paragraph, Button, Spinner, Question } from "../index";
 import { SubmitActionHandler } from "../../state/action-handlers/SubmitActionHandler";
+import { useHandleEnterKeypress } from "../../hooks";
 
 type SubmitProps = {
     model: SubmitModel;
@@ -16,9 +17,9 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
         return <Spinner speed="medium" message="Submitting.. Please wait.." />
     }
 
-    const handleSubmit = async () => {
 
 
+    const handleSubmit = async () => {
         dispatch({ type: "SET_SUBMIT_STATUS", status: { ...state.submitStatus, isSubmitting: true } });
 
         try {
@@ -28,6 +29,9 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
         }
     }
 
+    /* Listens to enter key pressed */
+    useHandleEnterKeypress("submit", false, handleSubmit);
+
     return (
         <div style={submitStyling}>
             <Heading >

From 592179144aae492aff4eb50c3e4834391ae7a24b Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Mon, 10 Jun 2024 11:34:32 +0200
Subject: [PATCH 034/118] fix: added ModernQuickformContainer to core and
 removed unused dependencies in package.json

---
 packages/core/package.json                    |  4 --
 packages/core/src/components/index.ts         |  1 +
 .../ModernQuickformContainer.tsx              | 69 +++++++++++++++++++
 3 files changed, 70 insertions(+), 4 deletions(-)
 create mode 100644 packages/core/src/components/modern-container/ModernQuickformContainer.tsx

diff --git a/packages/core/package.json b/packages/core/package.json
index 70e1a08..935912e 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -2,7 +2,6 @@
   "version": "1.0.0-vnext.36",
   "name": "@eavfw/quickform-core",
   "dependencies": {
-    "classnames": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -11,9 +10,6 @@
     "@opentelemetry/api": "^1.8.0"
   },
   "devDependencies": {
-    "react-icons": "^4.11.0",
-    "@types/classnames": "^2.3.1",
-    "html-webpack-plugin": "^5.6.0"
   },
   "license": "MIT",
   "files": [
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
index a388b7b..43fea3c 100644
--- a/packages/core/src/components/index.ts
+++ b/packages/core/src/components/index.ts
@@ -15,6 +15,7 @@ export { QuickForm } from "./QuickForm";
 export { Spinner } from "./spinner/Spinner";
 export { Intro } from "./intro/Intro";
 export { QuickFormContainer } from "./container/QuickFormContainer";
+export { ModernQuickFormContainer } from "./modern-container/ModernQuickformContainer";
 export { SlideRenderer } from "./renderers/slide-renderer/SlideRenderer";
 export { QuestionHeading } from "./question/components/QuestionHeading";
 // import "./question/input-types";
diff --git a/packages/core/src/components/modern-container/ModernQuickformContainer.tsx b/packages/core/src/components/modern-container/ModernQuickformContainer.tsx
new file mode 100644
index 0000000..78bafa6
--- /dev/null
+++ b/packages/core/src/components/modern-container/ModernQuickformContainer.tsx
@@ -0,0 +1,69 @@
+import { ErrorPopup, quickformtokens, useQuickForm } from "../../index";
+import { makeStyles, shorthands } from "@griffel/react";
+import React, { PropsWithChildren } from "react";
+
+const useStyles = makeStyles({
+    root: {
+        ...shorthands.padding("20px", "20px", "20px", "20px"),
+        ...shorthands.margin("20px", "0px"),
+        ...shorthands.borderRadius("20px"),
+        boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px',
+        // backgroundColor: quickformtokens.background || "white"
+    }
+})
+
+type ModernQuickFormContainerProps = {
+    title: string,
+    subtitle: string,
+}
+
+export const ModernQuickFormContainer: React.FC<PropsWithChildren<ModernQuickFormContainerProps>> = ({ children, subtitle, title }) => {
+
+    const styles = useStyles();
+    const { state: { errorMsg }, cssVariables } = useQuickForm();
+    return (
+        <div
+            id="QuickForm"
+            className={styles.root}
+            style={cssVariables}
+        >
+            <ErrorPopup
+                message={errorMsg}
+            />
+            <Headline
+                text={title}
+                fontWeight={800}
+                color={quickformtokens.primary}
+                lineHeight={1.2}
+            />
+            <Headline
+                text={subtitle}
+                fontWeight={300}
+                color={"inherit"}
+                lineHeight={1.1}
+            />
+            <div>
+                {children}
+            </div>
+        </div >
+
+    )
+}
+
+const Headline: React.FC<{ text: string, fontWeight: number, color: string, lineHeight: number }> = ({ text, fontWeight, color, lineHeight }) => {
+    return (
+        <h1
+            style={
+                {
+                    textAlign: "center",
+                    fontSize: "36px",
+                    fontWeight: fontWeight,
+                    color: color,
+                    lineHeight: lineHeight,
+                    margin: 0
+                }
+            }>
+            {text}
+        </h1>
+    )
+}
\ No newline at end of file

From 9b30b1404b3c128bf7b5e3cdf68acd9a7334806d Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Mon, 10 Jun 2024 11:35:02 +0200
Subject: [PATCH 035/118] fix: started implementing quickform preview in
 designer settings view

---
 .../Views/QuickFormSettingsView.tsx           | 56 ++++++++++++++++---
 .../designer/src/Types/QuickFormDefinition.ts | 49 +---------------
 2 files changed, 51 insertions(+), 54 deletions(-)

diff --git a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
index 5df8fd1..6a9902c 100644
--- a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
@@ -6,16 +6,14 @@ import { BaseInputTemplate } from "./rjsf/BaseInputTemplate";
 import { useQuickFormDefinition } from "../../Contexts/QuickFormDefContext";
 import { useViewStyles } from "../Styles/useViewStyles.styles";
 import { mergeClasses } from "@fluentui/react-components";
-import { JSONSchema7, JSONSchema7Definition } from "json-schema";
-import { defaultQuickFormTokens } from "@eavfw/quickform-core";
-
-
+import { JSONSchema7 } from "json-schema";
+import { ModernQuickFormContainer, QuickForm, QuickFormProvider, defaultQuickFormTokens } from "@eavfw/quickform-core";
+import { useState } from "react";
 
 const inputSlideSchema = {
     label: "QuickForm Feature Flags",
     uiSchema: {
         quickFormTokens: {
-
         }
     },
     schema: {
@@ -77,17 +75,45 @@ registerToken("onError", "On Error Color", "The color used for text ontop of err
 registerToken("questionHeadlineFontSize", "Question Headline Font Size", "The size of the question headline...", "text");
 registerToken("questionParagraphFontSize", "Question Paragraph Font Size", "The size of question paragraph...", "text");
 
+type DemoDisplayTypes = "mobile" | "tablet" | "desktop";
+type DemoDisplay = {
+    [key in DemoDisplayTypes]: { width: number, height: number, title: string };
+
+};
+
+const demoDisplays: DemoDisplay = {
+    mobile: {
+        width: 320,
+        height: 568,
+        title: "Mobile"
+
+    },
+    tablet: {
+        width: 768,
+        height: 1024,
+        title: "Tablet"
+    },
+    desktop: {
+        width: 1366,
+        height: 768,
+        title: "Desktop"
+    }
+
+};
+
 export const QuickFormSettingsView = () => {
 
-    const { quickformpayload: { intro }, updateQuickFormPayload: dispatch } = useQuickFormDefinition();
+    const { quickformpayload, updateQuickFormPayload: dispatch } = useQuickFormDefinition();
     const styles = useViewStyles();
+    const [currentDemoDisplay, setCurrentDemoDisplay] = useState<DemoDisplayTypes>("mobile");
+    const tokensSchema = inputSlideSchema.schema.properties?.quickFormTokens! as JSONSchema7;
 
     return (
         <div className={mergeClasses(styles.section, styles.sectionSlim)}>
             <Form templates={{ FieldTemplate: FieldTemplate, BaseInputTemplate: BaseInputTemplate }}
                 validator={validator}
                 {...inputSlideSchema}
-                formData={intro}
+                formData={quickformpayload.intro}
                 onChange={(a, b) => {
                     console.log("change", [a, b]);
 
@@ -100,10 +126,24 @@ export const QuickFormSettingsView = () => {
                     });
                 }}
             >
+                <QuickFormProvider
+                    // Hack to update the form when the payload changes
+                    key={currentDemoDisplay + JSON.stringify(quickformpayload)}
+                    definition={quickformpayload}
+                    payload={{}}
+                    tokens={tokensSchema.properties}
+                >
+                    <ModernQuickFormContainer
+                        title="QuickForm Settings"
+                        subtitle="Customize the look and feel of your QuickForm"
+                    >
+                        <QuickForm />
+                    </ModernQuickFormContainer>
+
+                </QuickFormProvider>
                 <>
                 </>
             </Form>
         </div>
     )
-
 }
\ No newline at end of file
diff --git a/packages/designer/src/Types/QuickFormDefinition.ts b/packages/designer/src/Types/QuickFormDefinition.ts
index e1b8c58..94c0e14 100644
--- a/packages/designer/src/Types/QuickFormDefinition.ts
+++ b/packages/designer/src/Types/QuickFormDefinition.ts
@@ -1,34 +1,7 @@
 import { Locale } from "./Locale";
 import { ViewNames } from "./ViewNames";
-import { QuickFormDefinition } from "@eavfw/quickform-core"
-//export type QuickFormElement = {
-//    type: "question",
-//    ref: string
-//}
-//export type QuickFormColumn = {
-//    rows: {
-//        [key: string]: QuickFormElement
-//    }
-//}
-//export type QuickFormRow = {
-//    columns: {
-//        [key: string]: QuickFormElement /* | QuickFormColumn this is not supported in designer yet */
-//    }
-//};
-//export type QuickFormSlide = {
-//    title: string
-//    logicalName?: string;
-//    schemaName?: string,
-//    rows?: {
-//        [key: string]: QuickFormRow
-//    }
-//}
-//export type QuickFormQuestion = {
-//    inputType?: string,
-//    text: string
-//    logicalName?: string;
-//    schemaName?: string;
-//}
+import { QuickFormDefinition } from "@eavfw/quickform-core";
+
 export type QuickFormDesignerDefinition = {
     __designer: {
         activeView?: ViewNames;
@@ -36,20 +9,4 @@ export type QuickFormDesignerDefinition = {
         activeQuestion?: string;
     },
     designerLocale?: Locale,
-    //intro: {
-
-    //},
-    //submit: {
-
-    //},
-    //ending: {
-
-    //},
-    //layout: {
-    //    slides: { [key: string]: QuickFormSlide }
-
-    //},
-    //questions: {
-    //    [key: string]: QuickFormQuestion
-    //}
-} & QuickFormDefinition
+} & QuickFormDefinition;
\ No newline at end of file

From 2c050a41bfea5f0a659ac16effe2a8b67f3da872 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Mon, 10 Jun 2024 14:05:47 +0200
Subject: [PATCH 036/118] fix: added some null-checks in quickform

---
 package-lock.json                             | 82 ++++-----------
 .../slide-renderer/SlideRenderer.tsx          |  8 +-
 packages/core/src/components/slide/Slide.tsx  |  2 +-
 .../NavigationActionHandler.ts                |  4 +-
 packages/designer/package.json                |  4 +-
 .../Views/QuickFormSettingsView.tsx           | 99 +++++++------------
 6 files changed, 65 insertions(+), 134 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 85c17c4..499c33b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2007,9 +2007,9 @@
       }
     },
     "node_modules/@eavfw/apps": {
-      "version": "1.4.0-vnext.27",
-      "resolved": "https://registry.npmjs.org/@eavfw/apps/-/apps-1.4.0-vnext.27.tgz",
-      "integrity": "sha512-HdkoNiHKmdBRR/rGarwbofaI5LW1L2HC8rGXzaYOrsEZ5NBHoZiypxuujEyFFXconky14QtcWSjbJdS7dl5sIg==",
+      "version": "1.4.0-vnext.32",
+      "resolved": "https://registry.npmjs.org/@eavfw/apps/-/apps-1.4.0-vnext.32.tgz",
+      "integrity": "sha512-ZU7UyNaGJDUEpkhiYLtx3dGx9Z1glCD+4b3mCh1aZwVyJ0Ng72eO6c1U16QKsvbdTxi89lKV3VwFYENdfxM56w==",
       "peer": true,
       "dependencies": {
         "@eavfw/expressions": "*",
@@ -2132,9 +2132,9 @@
       }
     },
     "node_modules/@eavfw/manifest": {
-      "version": "1.5.0-vnext.10",
-      "resolved": "https://registry.npmjs.org/@eavfw/manifest/-/manifest-1.5.0-vnext.10.tgz",
-      "integrity": "sha512-AbxIhGBiku73JNJmc4EJm2ms9cZZwYmLU07krSIjnmtuqL1H1QNnepcdfl75I9UBoaOjHp2cnyJH9mxBv8vK7w==",
+      "version": "1.5.0-vnext.14",
+      "resolved": "https://registry.npmjs.org/@eavfw/manifest/-/manifest-1.5.0-vnext.14.tgz",
+      "integrity": "sha512-ndVAb9qzM7PYH9i6ngGHO4MwlATp/B48QtfHt8J7pOtKkBqL0v7hf7hSzN1nb3riBDshWz2/ureU70PiTnIGug==",
       "peer": true,
       "peerDependencies": {
         "react": "^18.2.0",
@@ -5154,16 +5154,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
-      "deprecated": "This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "dependencies": {
-        "classnames": "*"
-      }
-    },
     "node_modules/@types/clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@types/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -6376,7 +6366,8 @@
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "peer": true
     },
     "node_modules/clean-css": {
       "version": "5.3.3",
@@ -13916,15 +13907,6 @@
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
       "peer": true
     },
-    "node_modules/react-icons": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
-      "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
-      "dev": true,
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -17010,15 +16992,10 @@
       "version": "1.0.0-vnext.36",
       "license": "MIT",
       "dependencies": {
-        "classnames": "^2.5.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
-      "devDependencies": {
-        "@types/classnames": "^2.3.1",
-        "html-webpack-plugin": "^5.6.0",
-        "react-icons": "^4.11.0"
-      },
+      "devDependencies": {},
       "peerDependencies": {
         "@griffel/react": "1.5.23",
         "@opentelemetry/api": "^1.8.0"
@@ -17037,12 +17014,12 @@
       },
       "peerDependencies": {
         "@craftjs/core": "^0.2.4",
-        "@eavfw/apps": "^1.4.0-vnext.27",
+        "@eavfw/apps": "^1.4.0-vnext.32",
         "@eavfw/designer": "^1.1.1",
         "@eavfw/designer-core": "^1.1.1",
         "@eavfw/designer-nodes": "^1.1.2",
         "@eavfw/forms": "^1.2.0-vnext.8",
-        "@eavfw/manifest": "^1.5.0-vnext.10",
+        "@eavfw/manifest": "^1.5.0-vnext.14",
         "@eavfw/utils": "^1.1.0-vnext.1",
         "@fluentui/react-components": "=>9.46.0 <9.49.2",
         "@rjsf/core": "5.17.1",
@@ -18491,9 +18468,9 @@
       "dev": true
     },
     "@eavfw/apps": {
-      "version": "1.4.0-vnext.27",
-      "resolved": "https://registry.npmjs.org/@eavfw/apps/-/apps-1.4.0-vnext.27.tgz",
-      "integrity": "sha512-HdkoNiHKmdBRR/rGarwbofaI5LW1L2HC8rGXzaYOrsEZ5NBHoZiypxuujEyFFXconky14QtcWSjbJdS7dl5sIg==",
+      "version": "1.4.0-vnext.32",
+      "resolved": "https://registry.npmjs.org/@eavfw/apps/-/apps-1.4.0-vnext.32.tgz",
+      "integrity": "sha512-ZU7UyNaGJDUEpkhiYLtx3dGx9Z1glCD+4b3mCh1aZwVyJ0Ng72eO6c1U16QKsvbdTxi89lKV3VwFYENdfxM56w==",
       "peer": true,
       "requires": {
         "@eavfw/expressions": "*",
@@ -18564,21 +18541,17 @@
       "requires": {}
     },
     "@eavfw/manifest": {
-      "version": "1.5.0-vnext.10",
-      "resolved": "https://registry.npmjs.org/@eavfw/manifest/-/manifest-1.5.0-vnext.10.tgz",
-      "integrity": "sha512-AbxIhGBiku73JNJmc4EJm2ms9cZZwYmLU07krSIjnmtuqL1H1QNnepcdfl75I9UBoaOjHp2cnyJH9mxBv8vK7w==",
+      "version": "1.5.0-vnext.14",
+      "resolved": "https://registry.npmjs.org/@eavfw/manifest/-/manifest-1.5.0-vnext.14.tgz",
+      "integrity": "sha512-ndVAb9qzM7PYH9i6ngGHO4MwlATp/B48QtfHt8J7pOtKkBqL0v7hf7hSzN1nb3riBDshWz2/ureU70PiTnIGug==",
       "peer": true,
       "requires": {}
     },
     "@eavfw/quickform-core": {
       "version": "file:packages/core",
       "requires": {
-        "@types/classnames": "^2.3.1",
-        "classnames": "^2.5.1",
-        "html-webpack-plugin": "^5.6.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-icons": "^4.11.0"
+        "react-dom": "^18.2.0"
       }
     },
     "@eavfw/quickform-designer": {
@@ -20959,15 +20932,6 @@
         "@types/node": "*"
       }
     },
-    "@types/classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
-      "dev": true,
-      "requires": {
-        "classnames": "*"
-      }
-    },
     "@types/clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@types/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -21971,7 +21935,8 @@
     "classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "peer": true
     },
     "clean-css": {
       "version": "5.3.3",
@@ -27498,13 +27463,6 @@
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
       "peer": true
     },
-    "react-icons": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
-      "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
-      "dev": true,
-      "requires": {}
-    },
     "react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index 4dc1212..6e22dec 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -14,13 +14,13 @@ export const SlideRenderer: React.FC = () => {
     const [className, setClassName] = useState(state.classes.slide);
 
     const currentSlide: SlideModel = state.slides[state.currIdx];
-    const buttonText: string = currentSlide.buttonText ?? "OK";
-    const showPressEnter: boolean = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive) === false;
+    const buttonText: string = currentSlide?.buttonText ?? "OK";
+    const showPressEnter: boolean = currentSlide?.questions?.some(q => q.inputType === "multilinetext" && q.isActive) === false;
 
     /* KBA - Leaving this for now - have to get back to it since we never actually set .isActive property on question.. so we cant use it to condition with at the moment.. */
     // const showPressEnter: boolean = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive) === false;
     console.log("showPressEnter", showPressEnter);
-    console.log("showPressEnterCondition", currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive));
+    console.log("showPressEnterCondition", currentSlide?.questions?.some(q => q.inputType === "multilinetext" && q.isActive));
     console.log("showPressEnterCurrentSlide", currentSlide);
 
     /* Listens to enter key pressed */
@@ -52,7 +52,7 @@ export const SlideRenderer: React.FC = () => {
                 showPressEnter={showPressEnter}
                 children={
                     <>
-                        {buttonText}<IconResolver type={currentSlide.icon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={24} />
+                        {buttonText}<IconResolver type={currentSlide?.icon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={24} />
                     </>
                 }
             />
diff --git a/packages/core/src/components/slide/Slide.tsx b/packages/core/src/components/slide/Slide.tsx
index b50657f..de023ae 100644
--- a/packages/core/src/components/slide/Slide.tsx
+++ b/packages/core/src/components/slide/Slide.tsx
@@ -16,7 +16,7 @@ export const Slide: React.FC<SlideProps> = ({ model, className }: SlideProps) =>
         // style={{ display: 'flex', flexDirection: 'column', width: "100%" }}
         >
             {
-                model.rows.map((row, rowIndex) => (
+                model?.rows?.map((row, rowIndex) => (
                     <div
                         id={"row" + rowIndex}
                         key={rowIndex}
diff --git a/packages/core/src/state/action-handlers/NavigationActionHandler.ts b/packages/core/src/state/action-handlers/NavigationActionHandler.ts
index 4d686b7..1167666 100644
--- a/packages/core/src/state/action-handlers/NavigationActionHandler.ts
+++ b/packages/core/src/state/action-handlers/NavigationActionHandler.ts
@@ -46,9 +46,9 @@ export class NavigationActionHandler {
 
     static handleNextSlideAction = (state: QuickformState) => {
         // Filter out questions that are explicitly not visible
-        const visibleQuestions = state.slides[state.currIdx].questions.filter(question => question.visible?.isVisible !== false);
+        const visibleQuestions = state.slides[state.currIdx]?.questions?.filter(question => question.visible?.isVisible !== false);
 
-        if (visibleQuestions.length === 0) {
+        if (visibleQuestions?.length === 0) {
             return { ...state, errorMsg: "No visible questions to answer." };
         }
 
diff --git a/packages/designer/package.json b/packages/designer/package.json
index 77dbba7..984fd51 100644
--- a/packages/designer/package.json
+++ b/packages/designer/package.json
@@ -10,8 +10,8 @@
     "@eavfw/designer-core": "^1.1.1",
     "@eavfw/designer-nodes": "^1.1.2",
     
-    "@eavfw/apps": "^1.4.0-vnext.27",
-    "@eavfw/manifest": "^1.5.0-vnext.10",
+    "@eavfw/apps": "^1.4.0-vnext.32",
+    "@eavfw/manifest": "^1.5.0-vnext.14",
     "@eavfw/forms": "^1.2.0-vnext.8",
     "@eavfw/utils": "^1.1.0-vnext.1",
 
diff --git a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
index 6a9902c..a0974e6 100644
--- a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
@@ -5,10 +5,10 @@ import { FieldTemplate } from "./rjsf/FieldTemplate";
 import { BaseInputTemplate } from "./rjsf/BaseInputTemplate";
 import { useQuickFormDefinition } from "../../Contexts/QuickFormDefContext";
 import { useViewStyles } from "../Styles/useViewStyles.styles";
-import { mergeClasses } from "@fluentui/react-components";
+import { makeStyles, mergeClasses } from "@fluentui/react-components";
 import { JSONSchema7 } from "json-schema";
-import { ModernQuickFormContainer, QuickForm, QuickFormProvider, defaultQuickFormTokens } from "@eavfw/quickform-core";
-import { useState } from "react";
+import { defaultQuickFormTokens } from "@eavfw/quickform-core";
+import { Controls } from "@eavfw/apps";
 
 const inputSlideSchema = {
     label: "QuickForm Feature Flags",
@@ -75,75 +75,48 @@ registerToken("onError", "On Error Color", "The color used for text ontop of err
 registerToken("questionHeadlineFontSize", "Question Headline Font Size", "The size of the question headline...", "text");
 registerToken("questionParagraphFontSize", "Question Paragraph Font Size", "The size of question paragraph...", "text");
 
-type DemoDisplayTypes = "mobile" | "tablet" | "desktop";
-type DemoDisplay = {
-    [key in DemoDisplayTypes]: { width: number, height: number, title: string };
-
-};
-
-const demoDisplays: DemoDisplay = {
-    mobile: {
-        width: 320,
-        height: 568,
-        title: "Mobile"
-
-    },
-    tablet: {
-        width: 768,
-        height: 1024,
-        title: "Tablet"
-    },
-    desktop: {
-        width: 1366,
-        height: 768,
-        title: "Desktop"
+const useQuickformSettingsStyles = makeStyles({
+    container: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: "100%"
     }
+});
+
 
-};
 
 export const QuickFormSettingsView = () => {
 
     const { quickformpayload, updateQuickFormPayload: dispatch } = useQuickFormDefinition();
     const styles = useViewStyles();
-    const [currentDemoDisplay, setCurrentDemoDisplay] = useState<DemoDisplayTypes>("mobile");
-    const tokensSchema = inputSlideSchema.schema.properties?.quickFormTokens! as JSONSchema7;
+    const quickformSettingsStyles = useQuickformSettingsStyles();
+    const PreviewComponent = Controls["QuickFormSettingsViewPreviewComponent"];
 
     return (
-        <div className={mergeClasses(styles.section, styles.sectionSlim)}>
-            <Form templates={{ FieldTemplate: FieldTemplate, BaseInputTemplate: BaseInputTemplate }}
-                validator={validator}
-                {...inputSlideSchema}
-                formData={quickformpayload.intro}
-                onChange={(a, b) => {
-                    console.log("change", [a, b]);
-
-                    dispatch(old => {
-                        if (!old.layout)
-                            old.layout = {};
-
-                        old.layout.autoAdvanceSlides = a.formData.autoAdvanceSlides;
-                        return { ...old };
-                    });
-                }}
-            >
-                <QuickFormProvider
-                    // Hack to update the form when the payload changes
-                    key={currentDemoDisplay + JSON.stringify(quickformpayload)}
-                    definition={quickformpayload}
-                    payload={{}}
-                    tokens={tokensSchema.properties}
-                >
-                    <ModernQuickFormContainer
-                        title="QuickForm Settings"
-                        subtitle="Customize the look and feel of your QuickForm"
-                    >
-                        <QuickForm />
-                    </ModernQuickFormContainer>
-
-                </QuickFormProvider>
-                <>
-                </>
-            </Form>
+        <div
+            className={mergeClasses(styles.section, quickformSettingsStyles.container)}
+        >
+            <div className={styles.sectionSlim}>
+                <Form templates={{ FieldTemplate: FieldTemplate, BaseInputTemplate: BaseInputTemplate }}
+                    validator={validator}
+                    {...inputSlideSchema}
+                    formData={quickformpayload.intro}
+                    onChange={(a, b) => {
+                        console.log("change", [a, b]);
+
+                        dispatch(old => {
+                            if (!old.layout)
+                                old.layout = {};
+
+                            old.layout.autoAdvanceSlides = a.formData.autoAdvanceSlides;
+                            return { ...old };
+                        });
+                    }}
+                />
+            </div>
+            <div>
+                <PreviewComponent />
+            </div>
         </div>
     )
 }
\ No newline at end of file

From b34404502df17eb6f2dcffdef140200431a9d5ac Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Tue, 25 Jun 2024 19:59:33 +0200
Subject: [PATCH 037/118] feat: adds the option to disable show press enter
 text on slidebutton and change icons on slidebutton from layout object

---
 package.json                                  |  2 +-
 .../src/components/icons/IconResolver.tsx     | 12 ++-
 .../ModernQuickformContainer.tsx              |  1 +
 .../slide-renderer/SlideRenderer.tsx          | 13 +--
 .../core/src/model/json-definitions/Layout.ts | 14 +++
 .../defaults/DefaultModelTransformer.ts       |  8 +-
 packages/core/src/state/QuickformState.ts     |  9 +-
 .../core/src/style/defaultQuickFormTokens.ts  |  3 +-
 packages/core/src/style/kbaQuickFormTokens.ts |  1 +
 .../core/src/style/modernQuickFormTokens.ts   |  1 +
 .../src/style/quickFormTokensDefinition.ts    |  3 +-
 .../src/Components/Views/DesignerViews.tsx    |  1 -
 .../Views/QuickFormSettingsView.tsx           | 96 +++++++++++--------
 13 files changed, 103 insertions(+), 61 deletions(-)

diff --git a/package.json b/package.json
index 3d36b8b..bc8e4cb 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "release-designer": "npm run release --workspace packages/designer",
     "release-inputs": "npm run release --workspace packages/inputs",
     "release-querybuilder": "npm run release --workspace packages/querybuilder",
-    "eavfw-link": "npm link @eavfw/apps @eavfw/next @eavfw/expressions @eavfw/manifest @eavfw/hooks @eavfw/forms @eavfw/utils @eavfw/designer @eavfw/designer-core @eavfw/designer-nodes",
+    "eavfw-link": "npm link @eavfw/apps @eavfw/next @eavfw/expressions @eavfw/manifest @eavfw/hooks @eavfw/forms @eavfw/utils",
     "playground": "npm --workspace packages/playground run dev"
   },
   "config": {
diff --git a/packages/core/src/components/icons/IconResolver.tsx b/packages/core/src/components/icons/IconResolver.tsx
index f5f0d33..d1203e3 100644
--- a/packages/core/src/components/icons/IconResolver.tsx
+++ b/packages/core/src/components/icons/IconResolver.tsx
@@ -4,16 +4,18 @@ import { UserIcon } from "./UserIcon";
 import { IconProps } from "./iconProps";
 import { Checkmark } from '../icons/Checkmark';
 
-export type IconType = "Email" | "Phone" | "User";
+export type IconType = "Email" | "Phone" | "User" | "Checkmark" | "None";
 export type IconResolverProps = {
     type?: IconType,
 } & IconProps
 
 export const IconResolver: React.FC<IconResolverProps> = ({ type, color, className, size, style }): JSX.Element => {
     switch (type) {
-        case "Email": return <EmailIcon className={className} color={color} size={size} style={style} />
-        case "Phone": return <TelephoneIcon className={className} color={color} size={size} style={style} />
-        case "User": return <UserIcon className={className} color={color} size={size} style={style} />
-        default: return <Checkmark className={className} color={color} size={size} style={style} />;
+        case "Email": return <EmailIcon className={className} color={color} size={size} style={style} />;
+        case "Phone": return <TelephoneIcon className={className} color={color} size={size} style={style} />;
+        case "User": return <UserIcon className={className} color={color} size={size} style={style} />;
+        case "Checkmark": return <Checkmark className={className} color={color} size={size} style={style} />;
+        case "None": return <></>;
+        default: return <></>;
     }
 }
\ No newline at end of file
diff --git a/packages/core/src/components/modern-container/ModernQuickformContainer.tsx b/packages/core/src/components/modern-container/ModernQuickformContainer.tsx
index 78bafa6..bc5424a 100644
--- a/packages/core/src/components/modern-container/ModernQuickformContainer.tsx
+++ b/packages/core/src/components/modern-container/ModernQuickformContainer.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { ErrorPopup, quickformtokens, useQuickForm } from "../../index";
 import { makeStyles, shorthands } from "@griffel/react";
 import React, { PropsWithChildren } from "react";
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index 6e22dec..7704928 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -15,16 +15,17 @@ export const SlideRenderer: React.FC = () => {
 
     const currentSlide: SlideModel = state.slides[state.currIdx];
     const buttonText: string = currentSlide?.buttonText ?? "OK";
-    const showPressEnter: boolean = currentSlide?.questions?.some(q => q.inputType === "multilinetext" && q.isActive) === false;
+    // If not disabled by state.showPressEnter being set to false, and if the slide has questions, and all questions are not multilinetext, show the press enter message
+    const showPressEnter: boolean = (state.showPressEnter === false) ? false : (currentSlide?.questions !== undefined && currentSlide.questions.every(q => q.inputType !== "multilinetext" || !q.isActive));
 
     /* KBA - Leaving this for now - have to get back to it since we never actually set .isActive property on question.. so we cant use it to condition with at the moment.. */
     // const showPressEnter: boolean = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive) === false;
-    console.log("showPressEnter", showPressEnter);
-    console.log("showPressEnterCondition", currentSlide?.questions?.some(q => q.inputType === "multilinetext" && q.isActive));
-    console.log("showPressEnterCurrentSlide", currentSlide);
+    // console.log("showPressEnter", showPressEnter);
+    // console.log("showPressEnterCondition", currentSlide?.questions?.some(q => q.inputType === "multilinetext" && q.isActive));
+    // console.log("showPressEnterCurrentSlide", currentSlide);
 
     /* Listens to enter key pressed */
-    useHandleEnterKeypress("slide", !showPressEnter, goToNextSlide);
+    useHandleEnterKeypress("slide", showPressEnter === false, goToNextSlide);
 
     let nextAllowedEffectTime = useRef(new Date().getTime());
     useEffect(() => {
@@ -52,7 +53,7 @@ export const SlideRenderer: React.FC = () => {
                 showPressEnter={showPressEnter}
                 children={
                     <>
-                        {buttonText}<IconResolver type={currentSlide?.icon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={24} />
+                        {buttonText}<IconResolver type={currentSlide?.icon ?? state.defaultSlideButtonIcon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={24} />
                     </>
                 }
             />
diff --git a/packages/core/src/model/json-definitions/Layout.ts b/packages/core/src/model/json-definitions/Layout.ts
index 5b54026..5d68a0b 100644
--- a/packages/core/src/model/json-definitions/Layout.ts
+++ b/packages/core/src/model/json-definitions/Layout.ts
@@ -10,8 +10,22 @@ export type LayoutDefinition = {
     classes?: Partial<QuickformClassNames>,
     style?: React.CSSProperties;
     tokens?: Partial<QuickFormTokens>;
+    /**
+   * If enabled, when all questions for the slide is filled it auto advances to next slide
+   */
     autoAdvanceSlides?: boolean;
+    /**
+     * If enabled, question numbers are shown in the title
+     */
     enableQuestionNumbers?: boolean;
+    /**
+     * If enabled, the user is shown a message to press enter next to the button on the slide
+     */
+    showPressEnter?: boolean;
+    /**
+     * The icon used for the slide button
+     */
+    defaultSlideButtonIcon?: IconType;
     slides?: { [key: string]: SlideLayout };
 }
 
diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
index 42e8cfc..de1a050 100644
--- a/packages/core/src/services/defaults/DefaultModelTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -92,7 +92,7 @@ function handleLayout(layout: LayoutDefinition, questions: QuickFormQuestionsDef
             const slideModel = new SlideModel();
             slideModel.displayName = slide.title;
             slideModel.buttonText = slide.buttonText ?? layout.defaultNextButtonText;
-            slideModel.icon = slide.icon;
+            slideModel.icon = slide.icon ?? layout.defaultSlideButtonIcon;
 
             if (slide.rows) {
                 slideModel.rows = processRows(slide.rows, slideModel, questions, payload);
@@ -153,7 +153,7 @@ function handleSubmit(submit: QuickFormSubmitDefinition, payload: any): SubmitMo
         Object.entries((schema?.properties ?? {}) as { [key: string]: any })
             .filter(([k, v]) => uiSchema?.[k]?.["ui:widget"] !== "hidden")
             .map(([k, v]) => [k, {
-              
+
                 inputType: v.type === "string" ? "text" : "dropdown",
                 options: v.type === "string" ? undefined : { "Y": "Yes", "N": "No" },
                 placeholder: uiSchema?.[k]?.["ui:placeholder"],
@@ -161,7 +161,7 @@ function handleSubmit(submit: QuickFormSubmitDefinition, payload: any): SubmitMo
                 paragraph: v.description,
                 dataType: v.type,
                 ...uiSchema?.[k]?.["ui:inputProps"] ?? {}
-               
+
             } as QuestionJsonModel])
     );
 
@@ -173,7 +173,7 @@ function handleSubmit(submit: QuickFormSubmitDefinition, payload: any): SubmitMo
     });
 
     return {
-        text: uiSchema["ui:label"] === false ? '': schema?.title ?? submit?.text ?? "Submit QuickForm",
+        text: uiSchema["ui:label"] === false ? '' : schema?.title ?? submit?.text ?? "Submit QuickForm",
         paragraph: uiSchema["ui:label"] === false ? '' : schema?.description,
         buttonText: submit?.buttonText ?? "Submit",
         submitFields: submitFieldsArray,
diff --git a/packages/core/src/state/QuickformState.ts b/packages/core/src/state/QuickformState.ts
index e119357..a0db524 100644
--- a/packages/core/src/state/QuickformState.ts
+++ b/packages/core/src/state/QuickformState.ts
@@ -1,11 +1,15 @@
 import { SubmitStatus } from "../model/SubmitStatus";
 import { SlideModel } from "../model/SlideModel";
 import { LayoutDefinition, QuickFormModel } from "../model";
+import { IconType } from "../components/icons/IconResolver";
 
 export type QuickformClassNames = { slide: string, slideIsIn: string, slideIsOut: string };
 export type QuickformState = {
     autoAdvanceSlides?: boolean;
     enableQuestionNumbers?: boolean;
+    showPressEnter?: boolean;
+    defaultNextButtonText?: string;
+    defaultSlideButtonIcon?: IconType;
     currIdx: number;
     currStep: number;
     data: QuickFormModel;
@@ -28,6 +32,9 @@ export const defaultState = (data: QuickFormModel = defaultData, layout?: Layout
     const defState = {
         autoAdvanceSlides: layout?.autoAdvanceSlides ?? false,
         enableQuestionNumbers: layout?.enableQuestionNumbers ?? false,
+        showPressEnter: layout?.showPressEnter ?? undefined,
+        defaultNextButtonText: layout?.defaultNextButtonText ?? "Næste",
+        defaultSlideButtonIcon: layout?.defaultSlideButtonIcon ?? undefined,
         classes: layout?.classes ?? {},
         currIdx: 0,
         currStep: data.slides.length > 0 ? 1 : 0,
@@ -43,7 +50,7 @@ export const defaultState = (data: QuickFormModel = defaultData, layout?: Layout
         slides: data.slides,
         submitStatus: { isSubmitting: false, isSubmitError: false, isSubmitSuccess: false },
         totalSteps: data.slides.length,
-        payloadAugments:[]
+        payloadAugments: []
     };
 
     return defState;
diff --git a/packages/core/src/style/defaultQuickFormTokens.ts b/packages/core/src/style/defaultQuickFormTokens.ts
index b81aebe..d030553 100644
--- a/packages/core/src/style/defaultQuickFormTokens.ts
+++ b/packages/core/src/style/defaultQuickFormTokens.ts
@@ -42,8 +42,9 @@ export const defaultQuickFormTokens: QuickFormTokens = {
     onPrimary: '#ffffff',
     onSecondary: '#000000',
 
-    fontFamily: 'var(--chivo), Monaco, Consolas',
+    fontFamily: 'Outfit, Monaco, Consolas',
     headlineFontSize: '2rem',
+    subtitleFontSize: '1.5rem',
     paragraphFontSize: '1.3rem',
     paragraphMobileFontSize: '1.9rem',
     btnFontSize: '2rem',
diff --git a/packages/core/src/style/kbaQuickFormTokens.ts b/packages/core/src/style/kbaQuickFormTokens.ts
index 7d5de2b..204b5b3 100644
--- a/packages/core/src/style/kbaQuickFormTokens.ts
+++ b/packages/core/src/style/kbaQuickFormTokens.ts
@@ -46,6 +46,7 @@ export const kbaQuickFormTokens: QuickFormTokens = {
     fontFamily: 'Monaco, "Lucida Console", monospace',
 
     headlineFontSize: '2rem',
+    subtitleFontSize: '1.5rem',
     paragraphFontSize: '1rem',
     paragraphMobileFontSize: '1rem',
     btnFontSize: '1.1rem',
diff --git a/packages/core/src/style/modernQuickFormTokens.ts b/packages/core/src/style/modernQuickFormTokens.ts
index 3e82cd9..e778503 100644
--- a/packages/core/src/style/modernQuickFormTokens.ts
+++ b/packages/core/src/style/modernQuickFormTokens.ts
@@ -46,6 +46,7 @@ export const modernQuickFormTokens: QuickFormTokens = {
     fontFamily: 'Outfit, Monaco, monospace',
 
     headlineFontSize: '2rem',
+    subtitleFontSize: '1.5rem',
     paragraphFontSize: '1rem',
     paragraphMobileFontSize: '1rem',
     btnFontSize: '1.1rem',
diff --git a/packages/core/src/style/quickFormTokensDefinition.ts b/packages/core/src/style/quickFormTokensDefinition.ts
index 6307c4f..f638d80 100644
--- a/packages/core/src/style/quickFormTokensDefinition.ts
+++ b/packages/core/src/style/quickFormTokensDefinition.ts
@@ -33,6 +33,7 @@ type QuickFormTokensBase = {
     /* Typography */
     fontFamily: string,
     headlineFontSize: FontSize;
+    subtitleFontSize: FontSize;
     paragraphFontSize: FontSize;
     paragraphMobileFontSize: FontSize;
     btnFontSize: FontSize,
@@ -81,7 +82,7 @@ export type QuickFormTokens = QuickFormTokensBase & {
  */
 export const defineQuickFormTokens = (...tokens: Array<Partial<QuickFormTokens>>) => {
     // Merges and overrides default tokens with provided ones in reverse order for precedence.
-    const mergedTokens = tokens.reduceRight((newTokens, currentToken) => ({
+    const mergedTokens = tokens.reduce((newTokens, currentToken) => ({
         ...newTokens,
         ...currentToken,
     }), defaultQuickFormTokens);
diff --git a/packages/designer/src/Components/Views/DesignerViews.tsx b/packages/designer/src/Components/Views/DesignerViews.tsx
index 31ba116..4ac532c 100644
--- a/packages/designer/src/Components/Views/DesignerViews.tsx
+++ b/packages/designer/src/Components/Views/DesignerViews.tsx
@@ -19,6 +19,5 @@ export const DesignerViews = () => {
         {view === "ending" && <QuickFormEndingSettingsView />}
         {view === "layout" && <QuickFormLayoutView slideId={activeSlide} layout={quickformpayload.layout} dispatch={updateQuickFormPayload} />}
         {view === "questions" && <QuickFormQuestionsView dispatch={updateQuickFormPayload} questions={quickformpayload.questions} currentQuestion={activeQuestion} />}
-
     </>
 }
\ No newline at end of file
diff --git a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
index a0974e6..7425ed2 100644
--- a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
@@ -13,7 +13,10 @@ import { Controls } from "@eavfw/apps";
 const inputSlideSchema = {
     label: "QuickForm Feature Flags",
     uiSchema: {
-        quickFormTokens: {
+        tokens: {
+        },
+        defaultSlideButtonIcon: {
+            "ui:widget": "select"
         }
     },
     schema: {
@@ -26,7 +29,18 @@ const inputSlideSchema = {
                 type: "boolean"
 
             },
-            quickFormTokens: {
+            showPressEnter: {
+                title: "Show Press Enter",
+                description: "Enable to show a message to press enter next to the button on the slide",
+                type: "boolean"
+            },
+            defaultSlideButtonIcon: {
+                title: "Default Slide Button Icon",
+                description: "The icon used for the slide button",
+                type: "string",
+                enum: ["None", "Email", "Phone", "User", "Checkmark"]
+            },
+            tokens: {
                 title: "Tokens (Variables)",
                 type: "object",
                 properties: {
@@ -39,8 +53,8 @@ const inputSlideSchema = {
 
 function registerToken(key: keyof typeof defaultQuickFormTokens, title: string, description: string, widget: string) {
 
-    const tokensSchema = inputSlideSchema.schema.properties?.quickFormTokens! as JSONSchema7;
-    const uiSchema = inputSlideSchema.uiSchema.quickFormTokens;
+    const tokensSchema = inputSlideSchema.schema.properties?.tokens! as JSONSchema7;
+    const uiSchema = inputSlideSchema.uiSchema.tokens;
     if (tokensSchema && tokensSchema.properties) {
         tokensSchema.properties[key] = {
             title,
@@ -54,69 +68,69 @@ function registerToken(key: keyof typeof defaultQuickFormTokens, title: string,
     }
 }
 
+// Typography
 registerToken("fontFamily", "Font Used", "The font used", "text");
+registerToken("headlineFontSize", "Headline Font Size", "The size of the headline...", "text");
+registerToken("subtitleFontSize", "Subtitle Font Size", "The size of the subtitle...", "text");
+registerToken("questionHeadlineFontSize", "Question Headline Font Size", "The size of the question headline...", "text");
+registerToken("questionParagraphFontSize", "Question Paragraph Font Size", "The size of question paragraph...", "text");
 
+// Colors
+registerToken("primary", "Primary Color", "The primary color used. This is the color used for primary buttons and other important elements. Also considered the brand colour", "color");
+registerToken("onPrimary", "On Primary Color", "The color used for text on top of primary color....", "color");
+registerToken("secondary", "Secondary Color", "The secondary color used. This is default color for buttons, sliders and components used in input controls", "color");
+registerToken("onSecondary", "On Secondary Color", "The color used for text on top of secondary color....", "color");
+registerToken("error", "Error Color", "The colour used for containers with errors, aka background colour.", "color");
+registerToken("onError", "On Error Color", "The color used for text on top of error color....", "color");
 registerToken("surface", "Surface Color", "The surface color....", "color");
 registerToken("onSurface", "On Surface Color", "The color used on the surface....", "color");
-
 registerToken("background", "Background Color", "The background color used on the webplace where the quickform is used...", "color");
-registerToken("onBackground", "On Background Color", "The color used for text ontop of background color....", "color");
-
-registerToken("secondary", "Secondary Color", "The secondary color used. This is default color for buttons, sliders and components used in input controls", "color");
-registerToken("onSecondary", "On Secondary Color", "The color used for text ontop of secondary color....", "color");
-
-
-registerToken("primary", "Primary Color", "The priamry color used. This is the color used for next buttons and other important elements. Also considered the brand colour", "color");
-registerToken("onPrimary", "On Primary Color", "The color used for text ontop of primary color....", "color");
-
-registerToken("error", "Error Color", "The colour used for containers with errors, aka background colour.", "color");
-registerToken("onError", "On Error Color", "The color used for text ontop of error color....", "color");
-
-registerToken("questionHeadlineFontSize", "Question Headline Font Size", "The size of the question headline...", "text");
-registerToken("questionParagraphFontSize", "Question Paragraph Font Size", "The size of question paragraph...", "text");
+registerToken("onBackground", "On Background Color", "The color used for text on top of background color....", "color");
 
 const useQuickformSettingsStyles = makeStyles({
     container: {
         display: 'flex',
         flexDirection: 'row',
-        width: "100%"
+    },
+    previewContainer: {
+        overflow: 'scroll'
     }
 });
 
-
-
 export const QuickFormSettingsView = () => {
-
     const { quickformpayload, updateQuickFormPayload: dispatch } = useQuickFormDefinition();
     const styles = useViewStyles();
     const quickformSettingsStyles = useQuickformSettingsStyles();
     const PreviewComponent = Controls["QuickFormSettingsViewPreviewComponent"];
-
+    console.log("quickformpayloadV1", JSON.stringify(quickformpayload.layout));
     return (
-        <div
-            className={mergeClasses(styles.section, quickformSettingsStyles.container)}
-        >
-            <div className={styles.sectionSlim}>
-                <Form templates={{ FieldTemplate: FieldTemplate, BaseInputTemplate: BaseInputTemplate }}
+        <div className={mergeClasses(styles.section, quickformSettingsStyles.container)}>
+            <div className={mergeClasses(styles.sectionSlim, styles.section)}>
+                <Form templates={{ FieldTemplate, BaseInputTemplate }}
                     validator={validator}
                     {...inputSlideSchema}
-                    formData={quickformpayload.intro}
+                    formData={quickformpayload.layout}
                     onChange={(a, b) => {
                         console.log("change", [a, b]);
-
                         dispatch(old => {
-                            if (!old.layout)
-                                old.layout = {};
-
+                            if (!old.layout) old.layout = {};
                             old.layout.autoAdvanceSlides = a.formData.autoAdvanceSlides;
-                            return { ...old };
+                            old.layout.showPressEnter = a.formData.showPressEnter;
+                            old.layout.tokens = { ...a.formData.tokens };
+                            old.layout.defaultSlideButtonIcon = a.formData.defaultSlideButtonIcon;
+                            console.log("quickformpayload_old", { ...old, layout: { ...old.layout } });
+                            return { ...old, layout: { ...old.layout } };
                         });
                     }}
-                />
-            </div>
-            <div>
-                <PreviewComponent />
+                >
+                    <></>
+                </Form>
             </div>
+            {PreviewComponent &&
+                <div className={mergeClasses(styles.section, quickformSettingsStyles.previewContainer)}>
+                    <PreviewComponent />
+                </div>
+            }
         </div>
-    )
-}
\ No newline at end of file
+    );
+};
\ No newline at end of file

From 6f832e8fe568208b21486a76a6482e0c8818c66c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 26 Jun 2024 07:32:52 +0200
Subject: [PATCH 038/118] fix: fixed issue with visisbility engine

---
 package-lock.json                             | 3354 ++++++++++-------
 packages/designer/package.json                |   16 +-
 .../Components/Drawers/QuestionTreeItem.tsx   |    2 +-
 .../Header/QuickFormSettingsViewHeader.tsx    |    4 +-
 packages/inputs/select/package.json           |    8 +-
 .../querybuilder/src/VisibilityQueryField.tsx |   42 +-
 .../src/reactQueryBuilderVisibilityEngine.ts  |   13 +-
 7 files changed, 2042 insertions(+), 1397 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 85c17c4..39d2f8d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2007,9 +2007,9 @@
       }
     },
     "node_modules/@eavfw/apps": {
-      "version": "1.4.0-vnext.27",
-      "resolved": "https://registry.npmjs.org/@eavfw/apps/-/apps-1.4.0-vnext.27.tgz",
-      "integrity": "sha512-HdkoNiHKmdBRR/rGarwbofaI5LW1L2HC8rGXzaYOrsEZ5NBHoZiypxuujEyFFXconky14QtcWSjbJdS7dl5sIg==",
+      "version": "1.4.0-vnext.33",
+      "resolved": "https://registry.npmjs.org/@eavfw/apps/-/apps-1.4.0-vnext.33.tgz",
+      "integrity": "sha512-WEEc9uvqyYY7b023v2k/yceEjdA08PnutOEpgGyv6WPBC0UcOh4IQjNjldex06Yc6QN8X+KoDLghs2p/l0b/gA==",
       "peer": true,
       "dependencies": {
         "@eavfw/expressions": "*",
@@ -2019,18 +2019,20 @@
         "@eavfw/utils": "*"
       },
       "peerDependencies": {
-        "@fluentui/react": "^8.115.6",
-        "@fluentui/react-components": "^9.46.7",
-        "@fluentui/react-datepicker-compat": "^0.4.25",
-        "@fluentui/react-hooks": "^8.6.36",
+        "@fluentui/react": "^8.118.7",
+        "@fluentui/react-components": "^9.54.0",
+        "@fluentui/react-datepicker-compat": "^0.4.40",
+        "@fluentui/react-hooks": "^8.8.6",
         "@fluentui/react-message-bar-preview": "^0.2.1",
-        "@fluentui/react-migration-v0-v9": "^9.1.18",
-        "@fluentui/react-portal-compat": "^9.0.131",
+        "@fluentui/react-migration-v0-v9": "^9.1.34",
+        "@fluentui/react-nav-preview": "0.3.0",
+        "@fluentui/react-portal-compat": "^9.0.148",
         "@opentelemetry/api": "*",
-        "@rjsf/core": "^5.17.1",
-        "@rjsf/fluentui-rc": "^5.17.1",
-        "@rjsf/validator-ajv8": "^5.17.1",
+        "@rjsf/core": "^5.18.4",
+        "@rjsf/fluentui-rc": "^5.18.4",
+        "@rjsf/validator-ajv8": "^5.18.4",
         "json-schema": "^0.4.0",
+        "next": "^14.2.3",
         "react": "^18.2.0"
       }
     },
@@ -2132,9 +2134,9 @@
       }
     },
     "node_modules/@eavfw/manifest": {
-      "version": "1.5.0-vnext.10",
-      "resolved": "https://registry.npmjs.org/@eavfw/manifest/-/manifest-1.5.0-vnext.10.tgz",
-      "integrity": "sha512-AbxIhGBiku73JNJmc4EJm2ms9cZZwYmLU07krSIjnmtuqL1H1QNnepcdfl75I9UBoaOjHp2cnyJH9mxBv8vK7w==",
+      "version": "1.5.0-vnext.15",
+      "resolved": "https://registry.npmjs.org/@eavfw/manifest/-/manifest-1.5.0-vnext.15.tgz",
+      "integrity": "sha512-OMrI70zO1dyqz2ZuhfGjJ5wlmCi9XGD/qw8bI7e10DCjj3TGA8whD0r4ZJTMrU24NHAGsgvrHhC2mviw6PH2Pg==",
       "peer": true,
       "peerDependencies": {
         "react": "^18.2.0",
@@ -2158,9 +2160,9 @@
       "link": true
     },
     "node_modules/@eavfw/utils": {
-      "version": "1.1.0-vnext.1",
-      "resolved": "https://registry.npmjs.org/@eavfw/utils/-/utils-1.1.0-vnext.1.tgz",
-      "integrity": "sha512-NpITIbjN3UT/mr/sMpxhsYL3AKoz3sLYOFzLUX1wAPMqElfZvrmZtkC2x9JWo58Snb6A88187WZvZ2ILP4wkYw==",
+      "version": "1.1.0-vnext.2",
+      "resolved": "https://registry.npmjs.org/@eavfw/utils/-/utils-1.1.0-vnext.2.tgz",
+      "integrity": "sha512-7PC194MWHUzoKiBgDV2YQj6zSHHlijAilvcBx+MzzQMRHCMbc1B1hdoZn1+fy77C8yxmB+R8qS+TWFqTseSA+A==",
       "peer": true
     },
     "node_modules/@emotion/hash": {
@@ -2251,12 +2253,12 @@
       }
     },
     "node_modules/@fluentui/dom-utilities": {
-      "version": "2.2.14",
-      "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.2.14.tgz",
-      "integrity": "sha512-+4DVm5sNfJh+l8fM+7ylpOkGNZkNr4X1z1uKQPzRJ1PRhlnvc6vLpWNNicGwpjTbgufSrVtGKXwP5sf++r81lg==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.3.7.tgz",
+      "integrity": "sha512-AaTR9BhJEF0i042NS1Ju8l95f24p2tBMq6jVVbUEDtYnKaxWnpv8R9eYjOwy8SDniQc1ino+BkolIgCVXXvDmw==",
       "peer": true,
       "dependencies": {
-        "@fluentui/set-version": "^8.2.14",
+        "@fluentui/set-version": "^8.2.23",
         "tslib": "^2.1.0"
       }
     },
@@ -2308,19 +2310,19 @@
       }
     },
     "node_modules/@fluentui/merge-styles": {
-      "version": "8.5.15",
-      "resolved": "https://registry.npmjs.org/@fluentui/merge-styles/-/merge-styles-8.5.15.tgz",
-      "integrity": "sha512-4CdKwo4k1Un2QLulpSVIz/KMgLNBMgin4NPyapmKDMVuO1OOxJUqfocubRGNO5x9mKgAMMYwBKGO9i0uxMMpJw==",
+      "version": "8.6.12",
+      "resolved": "https://registry.npmjs.org/@fluentui/merge-styles/-/merge-styles-8.6.12.tgz",
+      "integrity": "sha512-v8njux9frUkoGGlBnQXKHaKCX2nLZVHPFMDMzibtAIt4vIkkv+oY2lFmJ2h96tSIkg4eVN7h5sSDTFVoAPwpYg==",
       "peer": true,
       "dependencies": {
-        "@fluentui/set-version": "^8.2.14",
+        "@fluentui/set-version": "^8.2.23",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@fluentui/priority-overflow": {
-      "version": "9.1.11",
-      "resolved": "https://registry.npmjs.org/@fluentui/priority-overflow/-/priority-overflow-9.1.11.tgz",
-      "integrity": "sha512-sdrpavvKX2kepQ1d6IaI3ObLq5SAQBPRHPGx2+wiMWL7cEx9vGGM0fmeicl3soqqmM5uwCmWnZk9QZv9XOY98w==",
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@fluentui/priority-overflow/-/priority-overflow-9.1.13.tgz",
+      "integrity": "sha512-yDojVpkhBZTXOYExrCgW1GXbw3x9pYIS617xlNJIc2t06Cd3H32y2p51QXFt94sBmlVyAvPu7UKBHaq1Yw7u+w==",
       "peer": true,
       "dependencies": {
         "@swc/helpers": "^0.5.1"
@@ -2355,20 +2357,20 @@
       }
     },
     "node_modules/@fluentui/react-accordion": {
-      "version": "9.3.50",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-accordion/-/react-accordion-9.3.50.tgz",
-      "integrity": "sha512-I/dL89nrNC9BzjzTsXRApaQMpmegdSZ4ofh4vpbTJ/ZohHPBKTjpPzgPFuSRsUPY3ZUX0P5q4Xb5MpObLY+t0g==",
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-accordion/-/react-accordion-9.4.1.tgz",
+      "integrity": "sha512-xvQWtpnHVn4c8MCcCVUyoq284AtmQCvH4Dyd0kJUT13j8JwLSh2NxW0XPR+gutfoOVSlShEtpRFXdV0RO1ApsQ==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2402,16 +2404,16 @@
       }
     },
     "node_modules/@fluentui/react-aria": {
-      "version": "9.10.5",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-aria/-/react-aria-9.10.5.tgz",
-      "integrity": "sha512-mltw1Kelz31UxeZXlQpmX5eW4UUQBRQm4OLTlM4YDiDNe1N3Qd63cUIDGhgn0MvCvwVpIryOO89jj+RJGXkpkA==",
+      "version": "9.12.1",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-aria/-/react-aria-9.12.1.tgz",
+      "integrity": "sha512-YKI1e/rzOsC2x0OMjOEMY/YCPETA6P0/LV1N8UzeFSYU2NyRavacLpYfRY7LfQjCYqFfM5eHd3uWOQfuzjPPmw==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
-        "@fluentui/react-utilities": "^9.18.7",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
+        "@fluentui/react-utilities": "^9.18.10",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2422,22 +2424,22 @@
       }
     },
     "node_modules/@fluentui/react-avatar": {
-      "version": "9.6.22",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-avatar/-/react-avatar-9.6.22.tgz",
-      "integrity": "sha512-AYK2Ak4DhbUTDIHvde1DQ9NLSx/iOq2GduDOI6tIwUxVMmqrjF+ec+DxJLjtdrBK6RCnYtvb5F4fMezySBZrPQ==",
-      "peer": true,
-      "dependencies": {
-        "@fluentui/react-badge": "^9.2.32",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-popover": "^9.9.5",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+      "version": "9.6.30",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-avatar/-/react-avatar-9.6.30.tgz",
+      "integrity": "sha512-oujqsEzLgTUBkvcvTYM4WIi5DNOac0oATtOfMYSk5ws+kh0nPA5umUSC505snG2KrWySrpxHZeX/SaG8MZgHvA==",
+      "peer": true,
+      "dependencies": {
+        "@fluentui/react-badge": "^9.2.38",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-popover": "^9.9.12",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-tooltip": "^9.4.24",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-tooltip": "^9.4.31",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2448,17 +2450,17 @@
       }
     },
     "node_modules/@fluentui/react-badge": {
-      "version": "9.2.32",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-badge/-/react-badge-9.2.32.tgz",
-      "integrity": "sha512-fqO8Mlg129h3yuYwodVk4bj02fe9ryiA+37MKMzajQSGrOJH1xnTzD+R8ngf8s1iEq5TUsy7dQXLyzGSxllhVw==",
+      "version": "9.2.38",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-badge/-/react-badge-9.2.38.tgz",
+      "integrity": "sha512-Tc9zJQLWr/+O2x2IGPBTlnC18TXtvFqA7MTeQK+GRrGPmmDR24wdubuJHDRvkHT7olF+bcpVf6v96kry+9eIKA==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2469,21 +2471,21 @@
       }
     },
     "node_modules/@fluentui/react-breadcrumb": {
-      "version": "9.0.22",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-breadcrumb/-/react-breadcrumb-9.0.22.tgz",
-      "integrity": "sha512-EGHbOwaInu7CJmCdd5V0jI88iC9/xQiCQYEwn8EaZpciSpv6AD1QMiwwdr9OHLq3Y4NgEZTDki8JD+fWbhlk8Q==",
-      "peer": true,
-      "dependencies": {
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-button": "^9.3.76",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-link": "^9.2.18",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+      "version": "9.0.30",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-breadcrumb/-/react-breadcrumb-9.0.30.tgz",
+      "integrity": "sha512-Q4O6M7C1PcvkbCo/tlBrIkJvuXShsoFMTf1k0drD0S2IlFVO+F1sI6RCT1hsq8PWDSfFj63EEOpWf1gPvyHY1w==",
+      "peer": true,
+      "dependencies": {
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-button": "^9.3.84",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-link": "^9.2.25",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2494,20 +2496,20 @@
       }
     },
     "node_modules/@fluentui/react-button": {
-      "version": "9.3.76",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-button/-/react-button-9.3.76.tgz",
-      "integrity": "sha512-3ZsEjbRcNY3oEAjxCOuXg6JNtA6/jryMs/IKoP0b7yh8UyJsChRy9hhlRD8ms+f7OBfqLoUyz4WUfwV9eeQV8g==",
+      "version": "9.3.84",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-button/-/react-button-9.3.84.tgz",
+      "integrity": "sha512-tZX4mt2dUIguTOmBYGEL555sRnf8H9MIrqD8YsBU+2sADBWgaYOoajoZrN6TUXkmpQoG5AYggwscqJcFICzeQg==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2518,19 +2520,19 @@
       }
     },
     "node_modules/@fluentui/react-calendar-compat": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-calendar-compat/-/react-calendar-compat-0.1.3.tgz",
-      "integrity": "sha512-L1ammyCPG9bSuHgLw+13amz5jSlaa5zPSp8NVOw/jV+aI8uvOeu57/EZGVBzxT1WFhALKBON/1YqoN7Qw+lV6w==",
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-calendar-compat/-/react-calendar-compat-0.1.11.tgz",
+      "integrity": "sha512-0yrwdJaG4zJio9TolGVYW3Xq2Ud6bGaOvPLdmxO57kN+ZwwznAfoEFA4zz76V/rCB8BFxiRwWLni3r3HVs9hYA==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2541,17 +2543,17 @@
       }
     },
     "node_modules/@fluentui/react-card": {
-      "version": "9.0.75",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-card/-/react-card-9.0.75.tgz",
-      "integrity": "sha512-AWtgjvKm0hRbnelIMfXZrPJ8kke2bGLKQhVTLcRybTjLh7aXHp/PPVtY5ktZODUp96VuAZkZl1yL3IxJLjldog==",
+      "version": "9.0.84",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-card/-/react-card-9.0.84.tgz",
+      "integrity": "sha512-P3mOPT4ON62tNrMXI79RZSbj789nt+E6B5gRX2/cuTLbiMyrOepaF4zsYRE4+8tX7YFiKbv45xobRI/Oe31WRg==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2562,20 +2564,20 @@
       }
     },
     "node_modules/@fluentui/react-checkbox": {
-      "version": "9.2.21",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-checkbox/-/react-checkbox-9.2.21.tgz",
-      "integrity": "sha512-oma+pLiLvtWonUiXUsJLXeIJ4fUIbd6TgvK6v5SFU+97loaQGsx+0TtayUBj1dCVVvoW/tjJebNtud92Ozz/qQ==",
+      "version": "9.2.29",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-checkbox/-/react-checkbox-9.2.29.tgz",
+      "integrity": "sha512-3KIY50KQ+i3Iwqi165zRo/kZ7sjeLoFX5yYYB3BXpqNey+EGP6zhm1C7NAOy3d6dUlREbOHHxbM+9QUHtgUv1w==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-label": "^9.1.68",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-label": "^9.1.71",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2586,24 +2588,24 @@
       }
     },
     "node_modules/@fluentui/react-combobox": {
-      "version": "9.10.1",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-combobox/-/react-combobox-9.10.1.tgz",
-      "integrity": "sha512-RoXXtB7bKlT7JbuNP5mQxZMANbq2opT+vslNVhoOy5Gu8EJe1gxdNwKfug+NY/SC2N1SFBH1xdgsBzhPsGi38g==",
+      "version": "9.11.8",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-combobox/-/react-combobox-9.11.8.tgz",
+      "integrity": "sha512-qOKRnotJ53cBWVtSfJ3ZM1cpJ05Fzidfsygz351Jw6Gk8CKgvO9Vi9EvpadP8rrWcnr1GcPhnW2KGP9qsEFnJQ==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-positioning": "^9.14.4",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-positioning": "^9.15.3",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2714,12 +2716,12 @@
       }
     },
     "node_modules/@fluentui/react-context-selector": {
-      "version": "9.1.58",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-context-selector/-/react-context-selector-9.1.58.tgz",
-      "integrity": "sha512-XFL+X09+AABkC1D/4P20e+AbU+hG3+AiivA2+ZW+6Lqpg2RmYe5a9AhZdMCD0Desyq2BoKurYNyNOmI3OPJF8w==",
+      "version": "9.1.62",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-context-selector/-/react-context-selector-9.1.62.tgz",
+      "integrity": "sha512-XXSCkqzisRWGjckdkZLLx0uYnQyfwa0xedEB6HMMeCnJqYWj4aFj27IhQC25UQ2SMdrl1vnjdfqUYjn6G3NsAQ==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-utilities": "^9.18.7",
+        "@fluentui/react-utilities": "^9.18.10",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2731,25 +2733,25 @@
       }
     },
     "node_modules/@fluentui/react-datepicker-compat": {
-      "version": "0.4.33",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-datepicker-compat/-/react-datepicker-compat-0.4.33.tgz",
-      "integrity": "sha512-4SZ5LsY43ra1o11kiDQXaLeIxkvpP+bZClpuFvfTPCadNpOnTJvDxsDZkeC7RJiTPLluBEyiDelagNqrM+AxaA==",
+      "version": "0.4.41",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-datepicker-compat/-/react-datepicker-compat-0.4.41.tgz",
+      "integrity": "sha512-EA7ye5ubW2nNBzykqpR8y9UuIPze9hCBPvy3BtJcEPulY+kw10zoE01ofZlgNRw5kOkdrqESFoczwvF9mlMZgg==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-calendar-compat": "^0.1.3",
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-input": "^9.4.72",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-popover": "^9.9.5",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-positioning": "^9.14.4",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-calendar-compat": "^0.1.11",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-input": "^9.4.79",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-popover": "^9.9.12",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-positioning": "^9.15.3",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2760,24 +2762,24 @@
       }
     },
     "node_modules/@fluentui/react-dialog": {
-      "version": "9.10.1",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-dialog/-/react-dialog-9.10.1.tgz",
-      "integrity": "sha512-xtNk5cuSFAqxAvFG8wbsyCDMjduRX7kpmOMym0jRveEiAnXirWApJlXtIbqGhQq1E13bHhcUrgk+rThYNj++0A==",
+      "version": "9.11.2",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-dialog/-/react-dialog-9.11.2.tgz",
+      "integrity": "sha512-us1JbZ7iucDyJyd372sJQqdcJPCgQJLsxR3OFVoecQ+wOC66eLKTHHKhyHhdIRem/dfpm8X1mzEmrj+ipws1jQ==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-motion": "^9.2.0",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
-        "@swc/helpers": "^0.5.1",
-        "react-transition-group": "^4.4.1"
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
+        "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
         "@types/react": ">=16.14.0 <19.0.0",
@@ -2787,16 +2789,16 @@
       }
     },
     "node_modules/@fluentui/react-divider": {
-      "version": "9.2.67",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-divider/-/react-divider-9.2.67.tgz",
-      "integrity": "sha512-+25KhiweeFQUW4PrqnkBhVgTktMSF+965Xlezjpp7848MYEb2SfyvJC2akeZ4bcZUwCyqth9RTv/4hKBdYXmOw==",
+      "version": "9.2.70",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-divider/-/react-divider-9.2.70.tgz",
+      "integrity": "sha512-PtPAQp+j9icisZrmZR65LLug/uk/cWBdyQAMKse6jKmF/274xp9M9xuB833fgryJ3NIMp+dVHsJT8XJxhMVHcQ==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2807,19 +2809,19 @@
       }
     },
     "node_modules/@fluentui/react-drawer": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-drawer/-/react-drawer-9.1.12.tgz",
-      "integrity": "sha512-YFIrKhcdi6seNjgNIC1P8VeajNFLlbYe1WRPJi0J/6fcQEQRBOfMpLgwUdqw4rXV/54U4+F5DI6q5t67i5jLGg==",
+      "version": "9.5.2",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-drawer/-/react-drawer-9.5.2.tgz",
+      "integrity": "sha512-uUXGrVRiG+LsF82EdtVlEdfO0EH5+zN/T7eOWdADm94M5LIK5VT+ifm31f+bERdJIPfCV2HbfUTtqgL9ubho1A==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-dialog": "^9.10.1",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-motion-preview": "^0.5.19",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-dialog": "^9.11.2",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-motion-preview": "^0.5.22",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2830,18 +2832,18 @@
       }
     },
     "node_modules/@fluentui/react-field": {
-      "version": "9.1.62",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-field/-/react-field-9.1.62.tgz",
-      "integrity": "sha512-p1x4NYdGO9CMOAQ9yqos0liSEb84i5tpTFXPgdSCyYrAcsFbBnblabgyg0hUtdtuuuZVKcHGE3M+vk8xaa0n+A==",
+      "version": "9.1.68",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-field/-/react-field-9.1.68.tgz",
+      "integrity": "sha512-PiXti7L9rBwk98S+BcS9EKj13nmvl/lymwdrw2vguOMJvNQYIW4UhmvAzFDxs92kpfeHIjZgcEv+cskhJ7Uo7g==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-label": "^9.1.68",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-label": "^9.1.71",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2870,14 +2872,14 @@
       }
     },
     "node_modules/@fluentui/react-hooks": {
-      "version": "8.6.36",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.6.36.tgz",
-      "integrity": "sha512-kI0Z4Q4xHUs4SOmmI5n5OH5fPckqMSCovTRpiuxzCO2TNzLmfC861+nqf4Ygw/ChqNm2gWNZZfUADfnNAEsq+Q==",
+      "version": "8.8.9",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.8.9.tgz",
+      "integrity": "sha512-1m9tEUlUzvyU/ENwbQQdqlsVJSu113cjeFxPRAx56tcmc2THsuVy+Kdn8qRf/4om/W0W+Doc+CK4WFgYAGsfhw==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-window-provider": "^2.2.18",
-        "@fluentui/set-version": "^8.2.14",
-        "@fluentui/utilities": "^8.13.24",
+        "@fluentui/react-window-provider": "^2.2.27",
+        "@fluentui/set-version": "^8.2.23",
+        "@fluentui/utilities": "^8.15.12",
         "tslib": "^2.1.0"
       },
       "peerDependencies": {
@@ -2903,9 +2905,9 @@
       }
     },
     "node_modules/@fluentui/react-icons": {
-      "version": "2.0.237",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.237.tgz",
-      "integrity": "sha512-J+6XDB/Y3G3nfNWvKKI6xhUXDN6/xvhksnV+zfXiGb6tqtK7QiihAzvRRgPnKuS3BH/H1TM7k3KC19V0AJrTDg==",
+      "version": "2.0.245",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.245.tgz",
+      "integrity": "sha512-okaKAWR9BPTEu7g/Lz7M+SeABkveiDC0A5dA+AKbnGX/5V60/0jV/m/mnTCs9EfsbMdHZaoErsVqzCxP3mqYGQ==",
       "peer": true,
       "dependencies": {
         "@griffel/react": "^1.0.0",
@@ -2932,16 +2934,16 @@
       }
     },
     "node_modules/@fluentui/react-image": {
-      "version": "9.1.64",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-image/-/react-image-9.1.64.tgz",
-      "integrity": "sha512-GIf3ld0McmndF6vc9I0WS/90d9ON11J9QB9tnI7TxYEFpzgpJ7UIMjVsqqICM/xIj+RtBqYu/1VgiXccIcuZsw==",
+      "version": "9.1.68",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-image/-/react-image-9.1.68.tgz",
+      "integrity": "sha512-cjUoL7nt9cyO5WrPw5wG2GFYRvAEpOA2/nbeUooeAAQQ11V+d7ekSxpfD9OyyiA5KABpn909puzu96kqNTwKFg==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2975,19 +2977,19 @@
       }
     },
     "node_modules/@fluentui/react-infolabel": {
-      "version": "9.0.29",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-infolabel/-/react-infolabel-9.0.29.tgz",
-      "integrity": "sha512-FloTgj6lsK+wH2YaOonwfmc2TexTbpnGfw+fQ140rKTYEJlsgbb41PzviY3YUbokaG1S/S2rxy+JBlnUU8zzTQ==",
+      "version": "9.0.37",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-infolabel/-/react-infolabel-9.0.37.tgz",
+      "integrity": "sha512-q3GzoMQXv6r6d/9d6PRA1XDTY9mJDO/7Kh538E1b4HEQwyVSW21NpuUZSHURp5O7v3tfuCq47BMO0339ePCu+g==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-label": "^9.1.68",
-        "@fluentui/react-popover": "^9.9.5",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-label": "^9.1.71",
+        "@fluentui/react-popover": "^9.9.12",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -2998,17 +3000,17 @@
       }
     },
     "node_modules/@fluentui/react-input": {
-      "version": "9.4.72",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-input/-/react-input-9.4.72.tgz",
-      "integrity": "sha512-MhxgCJd0dma8qx3AOlfgowRTyGabEW8a9vczM9uaex6dO0vtf2CIsP7MfR3DC4b8MeHT1+XEEmfCTNFJb9q3BA==",
+      "version": "9.4.79",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-input/-/react-input-9.4.79.tgz",
+      "integrity": "sha512-Nuf3n4Py77v5zOVE9MLaQeC6ywwjfL7jTdEaKVGL3k/geWTG5WFqjG79CzNJo0Ajo0DKnPqul6MtLdRF+tqeNQ==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3019,12 +3021,12 @@
       }
     },
     "node_modules/@fluentui/react-jsx-runtime": {
-      "version": "9.0.36",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-jsx-runtime/-/react-jsx-runtime-9.0.36.tgz",
-      "integrity": "sha512-qCaZJ2UagJ6aEahSp83n6OPFAKkxFGB2NEJZ+Cg+PDNZHScA80ds6NfO/FkQ3rz0Vmx0R+qN8MH/zgb6Il05Kg==",
+      "version": "9.0.39",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-jsx-runtime/-/react-jsx-runtime-9.0.39.tgz",
+      "integrity": "sha512-mfK3L68Gfu9rMkfg1iVT06rOOPeOZasy+nKJID451YfKiAQYy1Zy9bhaTRDoNrOQcu2jDEOZAxAPURZw5oGLtw==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-utilities": "^9.18.7",
+        "@fluentui/react-utilities": "^9.18.10",
         "@swc/helpers": "^0.5.1",
         "react-is": "^17.0.2"
       },
@@ -3040,16 +3042,16 @@
       "peer": true
     },
     "node_modules/@fluentui/react-label": {
-      "version": "9.1.68",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-label/-/react-label-9.1.68.tgz",
-      "integrity": "sha512-j9aQw47kQKX9ECI2EehXvXUwQC2qrOokn1TJsabo54ipgt6yxxjQJPODluqQNWeBxRT0ctuYBTiZvJNvJkw+1A==",
+      "version": "9.1.71",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-label/-/react-label-9.1.71.tgz",
+      "integrity": "sha512-PkzRsl86+AkSn6p26C0Y2AV4IxYUhbBV+lFNSwN/hVgiXwMVdUjPOZx4Nm4Fnvv5ctt/BVuaE0dB/nSSDsrnQw==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3060,18 +3062,18 @@
       }
     },
     "node_modules/@fluentui/react-link": {
-      "version": "9.2.18",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-link/-/react-link-9.2.18.tgz",
-      "integrity": "sha512-dQc9ryjAI6TEyH+pFp71Qzz3jLg4WyiB5oNHNAN6HDRQKSdJKwMzn2HexGmuIV5e/WVH9E9kTfQe5g7a0WMwqw==",
+      "version": "9.2.25",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-link/-/react-link-9.2.25.tgz",
+      "integrity": "sha512-yhwgXjIFC39Nd5zveaOu3AgAra3H0Cv+gQ4rOLKW95ejlXHJqZEqcFPrf39d930YVCeIThiBH7IG1JCfo4z8/Q==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3082,23 +3084,23 @@
       }
     },
     "node_modules/@fluentui/react-menu": {
-      "version": "9.14.0",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-menu/-/react-menu-9.14.0.tgz",
-      "integrity": "sha512-rI7NI18Q8FS6p0hs56DRjfo337egGpfpj1AgU6qPKd8TnzX87+LGVAQ0/AuIiDTW9XIIhJmlPaNe9tw2NsoZ4w==",
+      "version": "9.14.8",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-menu/-/react-menu-9.14.8.tgz",
+      "integrity": "sha512-FFY44tCxzQJaFVKXqJuR00++FSJPUSkx/qg41e73j/8+ytelD0FtyzLoS0r/ditAfDVSJtFwuuL10+3Dagk2WQ==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-positioning": "^9.14.4",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-positioning": "^9.15.3",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3109,18 +3111,18 @@
       }
     },
     "node_modules/@fluentui/react-message-bar": {
-      "version": "9.0.27",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-message-bar/-/react-message-bar-9.0.27.tgz",
-      "integrity": "sha512-U42QwnMziF9MHKeY4j4YUg9P0SnNGLlvIbtSlLGry4yIh6qa4I3aSuY0skPemkbr4TAsKTwiUMDFkd0SbyztFA==",
+      "version": "9.2.3",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-message-bar/-/react-message-bar-9.2.3.tgz",
+      "integrity": "sha512-l/Z2MWgXTcc4OkN5txduZidGghbEXUhN0xKkrhxNnQrQzZLjC9C3tyOKog8/v8rkT7HEDWX6idvzDCAPEIPf4A==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-button": "^9.3.76",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-button": "^9.3.84",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1",
         "react-transition-group": "^4.4.1"
       },
@@ -3155,21 +3157,21 @@
       }
     },
     "node_modules/@fluentui/react-migration-v0-v9": {
-      "version": "9.1.27",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-migration-v0-v9/-/react-migration-v0-v9-9.1.27.tgz",
-      "integrity": "sha512-zjJhX2mVTHfqP9S16i1GtLdLeAz9g45iqKhzGh03tbwGTJrRFUu0AIjLKPySZbhjfk1kVPJ8lBE97KPVu3aSgw==",
-      "peer": true,
-      "dependencies": {
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-components": "^9.49.0",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+      "version": "9.1.37",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-migration-v0-v9/-/react-migration-v0-v9-9.1.37.tgz",
+      "integrity": "sha512-8Qz9Prk/U3p03R2cDc+39DaEIYbNMkWUlTOhte9qItq5PMFRuHTUubgfyLRbhzZj84c28kttm614frUC59FjLQ==",
+      "peer": true,
+      "dependencies": {
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-components": "^9.54.2",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3181,19 +3183,19 @@
       }
     },
     "node_modules/@fluentui/react-migration-v0-v9/node_modules/@fluentui/react-alert": {
-      "version": "9.0.0-beta.117",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-alert/-/react-alert-9.0.0-beta.117.tgz",
-      "integrity": "sha512-vZYEyILCKN8XpUB+bk4a7OoDI23vtD5IR4g2Fm6OHqEGxauQPEUTCFK6Ogxt85mQLce0pWEK75p5dVkWOvCzWw==",
+      "version": "9.0.0-beta.124",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-alert/-/react-alert-9.0.0-beta.124.tgz",
+      "integrity": "sha512-yFBo3B5H9hnoaXxlkuz8wRz04DEyQ+ElYA/p5p+Vojf19Zuta8DmFZZ6JtWdtxcdnnQ4LvAfC5OYYlzdReozPA==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-avatar": "^9.6.22",
-        "@fluentui/react-button": "^9.3.76",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-avatar": "^9.6.29",
+        "@fluentui/react-button": "^9.3.83",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-tabster": "^9.21.5",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3204,65 +3206,68 @@
       }
     },
     "node_modules/@fluentui/react-migration-v0-v9/node_modules/@fluentui/react-components": {
-      "version": "9.49.0",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-components/-/react-components-9.49.0.tgz",
-      "integrity": "sha512-7IRiUhdMlGcyAVHxnNTdj2l2WbEaXkHeETMkkLDxf3x7d8qwWkRcrRYm/Ds36aI37kBOYKwKjYNqaybDxq4WBw==",
-      "peer": true,
-      "dependencies": {
-        "@fluentui/react-accordion": "^9.3.50",
-        "@fluentui/react-alert": "9.0.0-beta.117",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-avatar": "^9.6.22",
-        "@fluentui/react-badge": "^9.2.32",
-        "@fluentui/react-breadcrumb": "^9.0.22",
-        "@fluentui/react-button": "^9.3.76",
-        "@fluentui/react-card": "^9.0.75",
-        "@fluentui/react-checkbox": "^9.2.21",
-        "@fluentui/react-combobox": "^9.10.1",
-        "@fluentui/react-dialog": "^9.10.1",
-        "@fluentui/react-divider": "^9.2.67",
-        "@fluentui/react-drawer": "^9.1.12",
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-image": "^9.1.64",
-        "@fluentui/react-infobutton": "9.0.0-beta.101",
-        "@fluentui/react-infolabel": "^9.0.29",
-        "@fluentui/react-input": "^9.4.72",
-        "@fluentui/react-label": "^9.1.68",
-        "@fluentui/react-link": "^9.2.18",
-        "@fluentui/react-menu": "^9.14.0",
-        "@fluentui/react-message-bar": "^9.0.27",
-        "@fluentui/react-overflow": "^9.1.17",
-        "@fluentui/react-persona": "^9.2.81",
-        "@fluentui/react-popover": "^9.9.5",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-positioning": "^9.14.4",
-        "@fluentui/react-progress": "^9.1.72",
-        "@fluentui/react-provider": "^9.14.0",
-        "@fluentui/react-radio": "^9.2.16",
-        "@fluentui/react-rating": "^9.0.4",
-        "@fluentui/react-search": "^9.0.1",
-        "@fluentui/react-select": "^9.1.72",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-skeleton": "^9.1.0",
-        "@fluentui/react-slider": "^9.1.78",
-        "@fluentui/react-spinbutton": "^9.2.72",
-        "@fluentui/react-spinner": "^9.4.5",
-        "@fluentui/react-switch": "^9.1.78",
-        "@fluentui/react-table": "^9.15.0",
-        "@fluentui/react-tabs": "^9.4.17",
-        "@fluentui/react-tabster": "^9.20.1",
-        "@fluentui/react-tags": "^9.3.1",
-        "@fluentui/react-teaching-popover": "^9.1.0",
-        "@fluentui/react-text": "^9.4.16",
-        "@fluentui/react-textarea": "^9.3.72",
+      "version": "9.54.2",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-components/-/react-components-9.54.2.tgz",
+      "integrity": "sha512-NcpmVmYtF7BQComrRcnjlHijXCApDXKKJx+aTxJb7lWl3C5oPIzWzKNtiIwm3zXKDlGMuN336FHc0I0sduMtHA==",
+      "peer": true,
+      "dependencies": {
+        "@fluentui/react-accordion": "^9.4.1",
+        "@fluentui/react-alert": "9.0.0-beta.124",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-avatar": "^9.6.30",
+        "@fluentui/react-badge": "^9.2.38",
+        "@fluentui/react-breadcrumb": "^9.0.30",
+        "@fluentui/react-button": "^9.3.84",
+        "@fluentui/react-card": "^9.0.84",
+        "@fluentui/react-checkbox": "^9.2.29",
+        "@fluentui/react-combobox": "^9.11.8",
+        "@fluentui/react-dialog": "^9.11.2",
+        "@fluentui/react-divider": "^9.2.70",
+        "@fluentui/react-drawer": "^9.5.2",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-image": "^9.1.68",
+        "@fluentui/react-infobutton": "9.0.0-beta.102",
+        "@fluentui/react-infolabel": "^9.0.37",
+        "@fluentui/react-input": "^9.4.79",
+        "@fluentui/react-label": "^9.1.71",
+        "@fluentui/react-link": "^9.2.25",
+        "@fluentui/react-menu": "^9.14.8",
+        "@fluentui/react-message-bar": "^9.2.3",
+        "@fluentui/react-motion": "^9.2.0",
+        "@fluentui/react-overflow": "^9.1.22",
+        "@fluentui/react-persona": "^9.2.89",
+        "@fluentui/react-popover": "^9.9.12",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-positioning": "^9.15.3",
+        "@fluentui/react-progress": "^9.1.79",
+        "@fluentui/react-provider": "^9.16.3",
+        "@fluentui/react-radio": "^9.2.24",
+        "@fluentui/react-rating": "^9.0.12",
+        "@fluentui/react-search": "^9.0.8",
+        "@fluentui/react-select": "^9.1.79",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-skeleton": "^9.1.7",
+        "@fluentui/react-slider": "^9.1.86",
+        "@fluentui/react-spinbutton": "^9.2.79",
+        "@fluentui/react-spinner": "^9.4.9",
+        "@fluentui/react-swatch-picker": "^9.1.3",
+        "@fluentui/react-switch": "^9.1.86",
+        "@fluentui/react-table": "^9.15.8",
+        "@fluentui/react-tabs": "^9.4.24",
+        "@fluentui/react-tabster": "^9.22.0",
+        "@fluentui/react-tag-picker": "^9.1.1",
+        "@fluentui/react-tags": "^9.3.9",
+        "@fluentui/react-teaching-popover": "^9.1.8",
+        "@fluentui/react-text": "^9.4.20",
+        "@fluentui/react-textarea": "^9.3.79",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-toast": "^9.3.38",
-        "@fluentui/react-toolbar": "^9.1.79",
-        "@fluentui/react-tooltip": "^9.4.24",
-        "@fluentui/react-tree": "^9.4.39",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@fluentui/react-virtualizer": "9.0.0-alpha.75",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-toast": "^9.3.47",
+        "@fluentui/react-toolbar": "^9.1.87",
+        "@fluentui/react-tooltip": "^9.4.31",
+        "@fluentui/react-tree": "^9.7.1",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@fluentui/react-virtualizer": "9.0.0-alpha.79",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3273,16 +3278,16 @@
       }
     },
     "node_modules/@fluentui/react-migration-v0-v9/node_modules/@fluentui/react-infobutton": {
-      "version": "9.0.0-beta.101",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-infobutton/-/react-infobutton-9.0.0-beta.101.tgz",
-      "integrity": "sha512-gX8Y8/cCc8LgfXtB4aJE+SRo3H3FA+DtWoGvmdaMLIWEoUbxv8sLSEl537MPGhlmTeu+ogXmA+c0RaFMJhvDsw==",
+      "version": "9.0.0-beta.102",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-infobutton/-/react-infobutton-9.0.0-beta.102.tgz",
+      "integrity": "sha512-3kA4F0Vga8Ds6JGlBajLCCDOo/LmPuS786Wg7ui4ZTDYVIMzy1yp2XuVcZniifBFvEp0HQCUoDPWUV0VI3FfzQ==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-icons": "^2.0.235",
+        "@fluentui/react-icons": "^2.0.237",
         "@fluentui/react-jsx-runtime": "^9.0.36",
         "@fluentui/react-label": "^9.1.68",
-        "@fluentui/react-popover": "^9.9.5",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-popover": "^9.9.6",
+        "@fluentui/react-tabster": "^9.21.0",
         "@fluentui/react-theme": "^9.1.19",
         "@fluentui/react-utilities": "^9.18.7",
         "@griffel/react": "^1.5.14",
@@ -3296,15 +3301,15 @@
       }
     },
     "node_modules/@fluentui/react-migration-v0-v9/node_modules/@fluentui/react-virtualizer": {
-      "version": "9.0.0-alpha.75",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-virtualizer/-/react-virtualizer-9.0.0-alpha.75.tgz",
-      "integrity": "sha512-1ISbGEr4XVDcrSCQfnStc+yH3lD2bZuK2zg6cEouqZNBo6GdNFtvRU5Zi84CfOFeGMzO6NItHfBHLoJYqSYCSw==",
+      "version": "9.0.0-alpha.79",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-virtualizer/-/react-virtualizer-9.0.0-alpha.79.tgz",
+      "integrity": "sha512-L2X9PKaH88VcA5LE7DxsmDZu3qy9N8fUIrvoYc4x6WXa2cAefwknvkPj/tezDvkTz3lttck5/MlEeu88qpUmtg==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3314,17 +3319,67 @@
         "react-dom": ">=16.14.0 <19.0.0"
       }
     },
+    "node_modules/@fluentui/react-motion": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-motion/-/react-motion-9.2.0.tgz",
+      "integrity": "sha512-gM38DObOXXEcE1xUe/c2bDd4J4wWwEeHghuIMOlQ+yElr8F4906bEv+gIlEbfSdACGDJ3SWixhGkxlAoAjaBow==",
+      "peer": true,
+      "dependencies": {
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@swc/helpers": "^0.5.1",
+        "react-is": "^17.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8.0 <19.0.0",
+        "@types/react-dom": ">=16.8.0 <19.0.0",
+        "react": ">=16.8.0 <19.0.0",
+        "react-dom": ">=16.8.0 <19.0.0"
+      }
+    },
     "node_modules/@fluentui/react-motion-preview": {
-      "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-motion-preview/-/react-motion-preview-0.5.19.tgz",
-      "integrity": "sha512-Gb77BuKbwVlpPZXm+nMAKp6jpjeAT7p6qFkW7YKan8CgDArxUFOLbo2CmpzysJKvd6z6ni21eEFd7gdD7N9p7Q==",
+      "version": "0.5.22",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-motion-preview/-/react-motion-preview-0.5.22.tgz",
+      "integrity": "sha512-ii8y7eQm5NEq+XUs9ul1AtiwF40l8DBKkEbvrm4Q1nd/pwl8Je4Aw2lzI0DnSS8NbKkZyGcdnhZ0HKZ6ap/auQ==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
+        "@swc/helpers": "^0.5.1"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.0 <19.0.0",
+        "@types/react-dom": ">=16.9.0 <19.0.0",
+        "react": ">=16.14.0 <19.0.0",
+        "react-dom": ">=16.14.0 <19.0.0"
+      }
+    },
+    "node_modules/@fluentui/react-motion/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "peer": true
+    },
+    "node_modules/@fluentui/react-nav-preview": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-nav-preview/-/react-nav-preview-0.3.0.tgz",
+      "integrity": "sha512-ka4yrRiQXPm3gexy6MtpOgPFdvgc2TOiHWlqLqE8pcPcwZpDkUVyYxlmvymQPjF7H8ohsl7YKjqdH5qYWoV0Uw==",
+      "peer": true,
+      "dependencies": {
+        "@fluentui/react-aria": "^9.12.0",
+        "@fluentui/react-button": "^9.3.83",
+        "@fluentui/react-context-selector": "^9.1.61",
+        "@fluentui/react-drawer": "^9.5.0",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.21.5",
+        "@fluentui/react-theme": "^9.1.19",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3494,16 +3549,16 @@
       "peer": true
     },
     "node_modules/@fluentui/react-overflow": {
-      "version": "9.1.17",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-overflow/-/react-overflow-9.1.17.tgz",
-      "integrity": "sha512-21QUisRSs4/aOSxDvSBSm6Tj7ow0WEECbLEI9Vvb7AuaIGGUWujTOuFIWehK9/ME9Ml/Uv23pHtTcBesc0JzOw==",
+      "version": "9.1.22",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-overflow/-/react-overflow-9.1.22.tgz",
+      "integrity": "sha512-h+mFyOdozdlyd0F7gzqMHyKk6jFgyAZutBwtMKiocxSSzyU44G5ZUS3hVAY6+qnVk7Ft8DkjHOZybv85naXuGA==",
       "peer": true,
       "dependencies": {
-        "@fluentui/priority-overflow": "^9.1.11",
-        "@fluentui/react-context-selector": "^9.1.58",
+        "@fluentui/priority-overflow": "^9.1.13",
+        "@fluentui/react-context-selector": "^9.1.62",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3514,18 +3569,18 @@
       }
     },
     "node_modules/@fluentui/react-persona": {
-      "version": "9.2.81",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-persona/-/react-persona-9.2.81.tgz",
-      "integrity": "sha512-LQnteXDG5C8Jlwgk4TQsHTNvHV9r1uqWRLEmKqDrrKFf2ApA3lHyHy1EEc8a5BwOv0ef1dpalqgnAuArXZrEiw==",
+      "version": "9.2.89",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-persona/-/react-persona-9.2.89.tgz",
+      "integrity": "sha512-WzQ9amNhtkKNP00Uf/5xopyci+Zo1oOg8uEkWhT69PwBYLdeLHu7RF5QFPz4U/HmlW8waR8vbH25GSHD2oo9oA==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-avatar": "^9.6.22",
-        "@fluentui/react-badge": "^9.2.32",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-avatar": "^9.6.30",
+        "@fluentui/react-badge": "^9.2.38",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3536,22 +3591,22 @@
       }
     },
     "node_modules/@fluentui/react-popover": {
-      "version": "9.9.5",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-popover/-/react-popover-9.9.5.tgz",
-      "integrity": "sha512-yhKaMAKlj+wnV2LzoBqUXlLe5l0EiHg8m2I4n9efXHIVGzyaZEkVc26rwSaxoTbUnFSS8NG1EG5EYqQGh3wiwA==",
+      "version": "9.9.12",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-popover/-/react-popover-9.9.12.tgz",
+      "integrity": "sha512-oyNiU/NIrRV7N/JUIyX0IZgQSBgrYZE4C4GEpxCkB/wd8IYuF4ws/hm18WMl8NomItiC04mMfOcaB/VH4/JS9A==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-positioning": "^9.14.4",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-positioning": "^9.15.3",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3562,15 +3617,15 @@
       }
     },
     "node_modules/@fluentui/react-portal": {
-      "version": "9.4.21",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-portal/-/react-portal-9.4.21.tgz",
-      "integrity": "sha512-FsDOmvvpC7OAFiwSAiSvvu/WoUUC4oMTQnY/zyotqnzKEyGS/6nMJ5Mr0gyzxtPDCzl6wIPAch5rVksseCm8vg==",
+      "version": "9.4.28",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-portal/-/react-portal-9.4.28.tgz",
+      "integrity": "sha512-QtG/rVQ0ekF7irZDlI5KKQqmeT7I9aVsawP5E2/XISejVwFc5AGboPlXELldhGqgWx0M3nNRNVk1QdKkc0PlEQ==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1",
         "use-disposable": "^1.0.1"
       },
@@ -3582,17 +3637,17 @@
       }
     },
     "node_modules/@fluentui/react-portal-compat": {
-      "version": "9.0.140",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-portal-compat/-/react-portal-compat-9.0.140.tgz",
-      "integrity": "sha512-u+AxWHtD56NpDp4yd6sH6octW1F+xDkF7QIvPoqGd17ns62Brq9pDAIJDaBkEMhzGKwoTU0/1EA0rNYYkIYyZQ==",
+      "version": "9.0.150",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-portal-compat/-/react-portal-compat-9.0.150.tgz",
+      "integrity": "sha512-KgVioDG3Yohuand8fUuYlDA+3a9L+MWESiLirdbWMXEv8mYcd5gFxsnfry/ivX3/REzqxjCki0U+em86/CJrHg==",
       "peer": true,
       "dependencies": {
         "@fluentui/react-portal-compat-context": "^9.0.11",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-tabster": "^9.22.0",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
-        "@fluentui/react-components": "^9.49.0",
+        "@fluentui/react-components": "^9.54.2",
         "@types/react": ">=16.14.0 <19.0.0",
         "react": ">=16.14.0 <19.0.0"
       }
@@ -3611,17 +3666,17 @@
       }
     },
     "node_modules/@fluentui/react-positioning": {
-      "version": "9.14.4",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-positioning/-/react-positioning-9.14.4.tgz",
-      "integrity": "sha512-mQz0C0iwRWy3g14laBcbbEEeoTb21dXn/ve8DNEJbVQ4P70MM43vCQeXWbHIDNw6HON+bIG3TyfNyFKQIpLwNA==",
+      "version": "9.15.3",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-positioning/-/react-positioning-9.15.3.tgz",
+      "integrity": "sha512-hW9CGHLlz5q+IlBdpTh1xtj2OZZ6abPcDQ4WjxWneWmG3jAf4sFkwS8ylvSZ7i7QcUk+ckVuCiuJsc/GjcRzKQ==",
       "peer": true,
       "dependencies": {
         "@floating-ui/devtools": "0.2.1",
         "@floating-ui/dom": "^1.2.0",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3632,17 +3687,17 @@
       }
     },
     "node_modules/@fluentui/react-progress": {
-      "version": "9.1.72",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-progress/-/react-progress-9.1.72.tgz",
-      "integrity": "sha512-+pXMRybkZx5qjz3Cfnuj0ntzT6gvLlqukSPHGaneFHOMbivWz9TjVj/FCGIwy6OrY3nAQcgk92zN5sapgM0Nsw==",
+      "version": "9.1.79",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-progress/-/react-progress-9.1.79.tgz",
+      "integrity": "sha512-NBHnpcOKQ9OOKnAIVd3HW4cn/yv7xjureJxn8EM2Om7ZBPS5HrKJqZHwJVrUE/QJ4WssTfiU8MipKwWwot+8Vg==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3664,19 +3719,19 @@
       }
     },
     "node_modules/@fluentui/react-provider": {
-      "version": "9.14.0",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-provider/-/react-provider-9.14.0.tgz",
-      "integrity": "sha512-uau0iv04ncFJLkRqKF1tFS8mUqumMBLc+n9CvUE8MK6/QXqHwcWPMUr09dCOsVAB6zpjiQO+4yHBZlja6RKKxA==",
+      "version": "9.16.3",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-provider/-/react-provider-9.16.3.tgz",
+      "integrity": "sha512-rF3FFvqsXPshpgk+nq1sxwzysFKRPFM0fV872qP/kHiyUU7IpEyRU8HcSU5j8sFgpRSNVatAjiD0I+rvy6ekjg==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/core": "^1.14.1",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/core": "^1.16.0",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3687,19 +3742,19 @@
       }
     },
     "node_modules/@fluentui/react-radio": {
-      "version": "9.2.16",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-radio/-/react-radio-9.2.16.tgz",
-      "integrity": "sha512-H5NzFFYYkQ2osE7Rh96DjWRgI24POZoaBnjJrUvds5B/3Jod4905c2VsP6MSvkr+cslVRnO55OCeBX7MlqP17g==",
+      "version": "9.2.24",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-radio/-/react-radio-9.2.24.tgz",
+      "integrity": "sha512-Wl19e4CQo4Fv2A+x0ta3rS2F1OMTL7mF4qVfdfhdTOTH2J/0WmmFPrz26E2ZhqENKivIv1+NXEV/KgpPFbWF0w==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-label": "^9.1.68",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-label": "^9.1.71",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3710,17 +3765,17 @@
       }
     },
     "node_modules/@fluentui/react-rating": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-rating/-/react-rating-9.0.4.tgz",
-      "integrity": "sha512-AieJyOO6Ldflfr8IxbUYkBpEDKOm+zPJJhtzUVQrb/kqJOsCDknPoO4UkL3VbfjN8QGCQ353Aq1ZX2svL5ar3Q==",
+      "version": "9.0.12",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-rating/-/react-rating-9.0.12.tgz",
+      "integrity": "sha512-d7fIVckXzdno4eXdN/bv9mdarvVxNh54CJJVO3/aNK8dfrcqH9NXPp4bCg+lCAYYr8fQVbe25OiUUFhYtaOJ+w==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3731,17 +3786,17 @@
       }
     },
     "node_modules/@fluentui/react-search": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-search/-/react-search-9.0.1.tgz",
-      "integrity": "sha512-Hz/44MwKCaSjoGSxzwE9pu/cj0XtjeNNl2ky3aRYgvmfHTIMGc2c72vhxp98EYrVolyV7ijCdm3AnwWW7aA6Kw==",
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-search/-/react-search-9.0.8.tgz",
+      "integrity": "sha512-Zbb3pUjLCeEUzxy2WS+gsZsk8PGLUHAeW8RWHSIsHJEe4zZmNfJxv1PI8DrOd3a08UiOfR5q5PixZ32oCWWtUg==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-input": "^9.4.72",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-input": "^9.4.79",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3752,18 +3807,18 @@
       }
     },
     "node_modules/@fluentui/react-select": {
-      "version": "9.1.72",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-select/-/react-select-9.1.72.tgz",
-      "integrity": "sha512-xtdiK++/aT49xT/JRSNhOSwgfMR/OcifShXrLCx1WNG78yXMCFOv7J2/i+01MsPZHZDo7EYWgxKmAYZ0+e4TIw==",
+      "version": "9.1.79",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-select/-/react-select-9.1.79.tgz",
+      "integrity": "sha512-E9EuUIUy2MzHRkQPmXyJp5txVo5EYH+lNoV3xgZKd9zijg7QQJWxfgbNJqddubmnRdr8MtBt/fM4qmHia5cgSQ==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3774,9 +3829,9 @@
       }
     },
     "node_modules/@fluentui/react-shared-contexts": {
-      "version": "9.17.0",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-shared-contexts/-/react-shared-contexts-9.17.0.tgz",
-      "integrity": "sha512-SvfFmzzy0QfhaCrGcUJFJcscc6NGyuoYxT0Q8wgu5ol3vZ+idvVgGIJbhwQFVT08Ph5yR6FsWS22/nLjTqE58A==",
+      "version": "9.19.0",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-shared-contexts/-/react-shared-contexts-9.19.0.tgz",
+      "integrity": "sha512-KWHRVuKSvQpFdGGxj802AwoHlq7VyFKaj89cgX2pBu2ZqZrdpxkbkfFQIvxLoaZ/Bzm7fWXVQrDYpj+8JHAfCA==",
       "peer": true,
       "dependencies": {
         "@fluentui/react-theme": "^9.1.19",
@@ -3788,17 +3843,17 @@
       }
     },
     "node_modules/@fluentui/react-skeleton": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-skeleton/-/react-skeleton-9.1.0.tgz",
-      "integrity": "sha512-eV+UbqZ3Xq8aShusyDnGrex9NG+7wcmvnKiTY8aOAf4Kl5XJwNr8WE5nHcHO3pyIsX6bQQcvSWsyxMw5rJy/Ag==",
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-skeleton/-/react-skeleton-9.1.7.tgz",
+      "integrity": "sha512-2Ve7NZ1LyssPgztw+K55znY/uiZRx/g8Iif7L6ETvvcn3nE3WZFWISLfVdCF7SQBTa+oV+gDBjUKpEZcFA512Q==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3809,18 +3864,18 @@
       }
     },
     "node_modules/@fluentui/react-slider": {
-      "version": "9.1.78",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-slider/-/react-slider-9.1.78.tgz",
-      "integrity": "sha512-0+SC1TG6smvlK21MU6DCO6dEGtnFNa/Zt2VqNxP2h56iusdPzDwqj2UQre5S6tfigR1fCAMEMeOkerOpXKWW/g==",
+      "version": "9.1.86",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-slider/-/react-slider-9.1.86.tgz",
+      "integrity": "sha512-icgE/5iYx69DQLcOlPicATxQJcNBYg2uJGvVgzVhhLuXy87mkqv7Lh5YFfmcMpMSWbOhoEbDle73MMTDu8UC9g==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3831,19 +3886,19 @@
       }
     },
     "node_modules/@fluentui/react-spinbutton": {
-      "version": "9.2.72",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-spinbutton/-/react-spinbutton-9.2.72.tgz",
-      "integrity": "sha512-79/IfTrRWmsq4C09q6nZsCGBsHSbfLCsTe8WI13sB0zWBlCDQVXOwsi7XuS8DbO3jmT8eUggJbaYEn4h/8iHHQ==",
+      "version": "9.2.79",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-spinbutton/-/react-spinbutton-9.2.79.tgz",
+      "integrity": "sha512-qqe7eQ4ra3Iu/RhZHXxjnYqhH9GNPr1FlTSqPRIHa7Kf0/0Hrig+gLQYw7N5BXzDSU4+cz29/9PyXowdg5mBLQ==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3854,17 +3909,17 @@
       }
     },
     "node_modules/@fluentui/react-spinner": {
-      "version": "9.4.5",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-spinner/-/react-spinner-9.4.5.tgz",
-      "integrity": "sha512-Kg5NUB2UrViDiBEKNdV7UVN4mPxeZF5seUm7qZP4hBSKf90oj2xcJ+BKggQg++MelDLMFeLnTE1pJO/Lv/ovbA==",
+      "version": "9.4.9",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-spinner/-/react-spinner-9.4.9.tgz",
+      "integrity": "sha512-+X9OmvDIhdwdiKO7I0CKrgjiS5Y2DzSVgkONMmpuu6u+DywhgLWh1JLatCiEl8Qp2/cBlg32XNfBl0lAfQHHFw==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-label": "^9.1.68",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-label": "^9.1.71",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3874,21 +3929,44 @@
         "react-dom": ">=16.14.0 <19.0.0"
       }
     },
+    "node_modules/@fluentui/react-swatch-picker": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-swatch-picker/-/react-swatch-picker-9.1.3.tgz",
+      "integrity": "sha512-L8EE6jTOzQe1jLsZuZCWEUiNq3bkOYrmvwtHvHRCBLcdD6+fOcYxvZP9PIBLgkj+hNSf7E4A/8Kol/SOn419Wg==",
+      "peer": true,
+      "dependencies": {
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
+        "@fluentui/react-theme": "^9.1.19",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
+        "@swc/helpers": "^0.5.1"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8.0 <19.0.0",
+        "@types/react-dom": ">=16.8.0 <19.0.0",
+        "react": ">=16.8.0 <19.0.0",
+        "react-dom": ">=16.8.0 <19.0.0"
+      }
+    },
     "node_modules/@fluentui/react-switch": {
-      "version": "9.1.78",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-switch/-/react-switch-9.1.78.tgz",
-      "integrity": "sha512-pyqKSXE5vglqkGS9UXIQe/l2Q78t/PFPuiCbfEr1c8TYhzdQWXJq2WkK5WbrZAwLRL9AEbhCmoD1Lig9PXvGHQ==",
+      "version": "9.1.86",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-switch/-/react-switch-9.1.86.tgz",
+      "integrity": "sha512-tcgkSv+VwT4QzP/wuMT472R5oZJtiUhbLnSgMWGlyuETBMDMF0Vp3SNkp8noalTyNHPnrJgylKgUuKtt3MyL1Q==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-label": "^9.1.68",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-label": "^9.1.71",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3899,24 +3977,24 @@
       }
     },
     "node_modules/@fluentui/react-table": {
-      "version": "9.15.0",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-table/-/react-table-9.15.0.tgz",
-      "integrity": "sha512-uvdmF7JdlYZ5jXi8Y7M4KB2TmNNm9+oTevwiF3BmnQVLCoHq0lX1Mlv12gLRuztAuHiTOsNcPETZTbUjlf1GZg==",
+      "version": "9.15.8",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-table/-/react-table-9.15.8.tgz",
+      "integrity": "sha512-awEJcDF+LX0xCpIArGBRwUh4/4vw0rJcwVnmlujn2DoYBwasUoyL9QYZF2W5U+XnHazYBgX7Bm+JMJ7awVdSVQ==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-avatar": "^9.6.22",
-        "@fluentui/react-checkbox": "^9.2.21",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-radio": "^9.2.16",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-avatar": "^9.6.30",
+        "@fluentui/react-checkbox": "^9.2.29",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-radio": "^9.2.24",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3927,18 +4005,18 @@
       }
     },
     "node_modules/@fluentui/react-tabs": {
-      "version": "9.4.17",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-tabs/-/react-tabs-9.4.17.tgz",
-      "integrity": "sha512-ZdzS46h2FW8dZOLCZPkrnvYEE6dD4HRYN6M4/RGqiN8dT8jWxj0FBZSNpp6gGTCftADr6k675GqKWoGmnr2ctA==",
+      "version": "9.4.24",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-tabs/-/react-tabs-9.4.24.tgz",
+      "integrity": "sha512-HBy+TNI0XoC1WqLjIAWokW5HeCD59h//Cy+nHELI4xSVc3gbWDb2KLRptDLYawcDT9hsUnwxtnSXmQgnGLhH2A==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3949,18 +4027,18 @@
       }
     },
     "node_modules/@fluentui/react-tabster": {
-      "version": "9.20.1",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-tabster/-/react-tabster-9.20.1.tgz",
-      "integrity": "sha512-dDm18fThjQfDYL5dH2WdcECdbYNe0T8sn6j2RGP3V6cxqCwXpAI+zfquIAjqkgoR9bn/XDDSkUKTyxrFMrVMVA==",
+      "version": "9.22.0",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-tabster/-/react-tabster-9.22.0.tgz",
+      "integrity": "sha512-R61y6/kRWjA8UP9F/wMvOBtOFM1frgiQA0zF49BfrQvwnJMFEYidaLsc1e6IkNS34IiwpsESaIIOlDMn5mUXzg==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1",
-        "keyborg": "^2.5.0",
-        "tabster": "^7.1.0"
+        "keyborg": "^2.6.0",
+        "tabster": "^8.0.0"
       },
       "peerDependencies": {
         "@types/react": ">=16.14.0 <19.0.0",
@@ -3969,22 +4047,27 @@
         "react-dom": ">=16.14.0 <19.0.0"
       }
     },
-    "node_modules/@fluentui/react-tags": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-tags/-/react-tags-9.3.1.tgz",
-      "integrity": "sha512-tzfMFmM3q4Rl65M7qDSIHSNM6PLMcctLfjpt0qBj//OriomJ1cG0N1tmEXRVWlq3BMeGI+xIXCXktrl/2xbpCA==",
+    "node_modules/@fluentui/react-tag-picker": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-tag-picker/-/react-tag-picker-9.1.1.tgz",
+      "integrity": "sha512-S4RRX4TMm/EwxaHIDIrTJMIv4YXa849BTQuS9WUO/QKO4dlRiC1E5LdS8jm6Fo0wQRr/MVasG6EkGJ8atm6ruw==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-avatar": "^9.6.22",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-combobox": "^9.11.8",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-positioning": "^9.15.3",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
+        "@fluentui/react-tags": "^9.3.9",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -3994,23 +4077,48 @@
         "react-dom": ">=16.14.0 <19.0.0"
       }
     },
-    "node_modules/@fluentui/react-teaching-popover": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-teaching-popover/-/react-teaching-popover-9.1.0.tgz",
-      "integrity": "sha512-KBeCqzoPc8jiGTQmvEABJuxcJHyM2sp/hSNLpdl68zniqXCJCvqY3o02Av1xWRjmyFKn7Lt5q6MTs5ZkaEYcYQ==",
+    "node_modules/@fluentui/react-tags": {
+      "version": "9.3.9",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-tags/-/react-tags-9.3.9.tgz",
+      "integrity": "sha512-hwriI1Uj4rI5qQ0A8FrAlCHJ9pZCo8mwWM0VTKpssN5vK4nqcSpiMq91mw810+GUlNiXnTW+gZCn0RlaryCQFw==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-button": "^9.3.76",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-popover": "^9.9.5",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/keyboard-keys": "^9.0.7",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-avatar": "^9.6.30",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
+        "@swc/helpers": "^0.5.1"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.0 <19.0.0",
+        "@types/react-dom": ">=16.9.0 <19.0.0",
+        "react": ">=16.14.0 <19.0.0",
+        "react-dom": ">=16.14.0 <19.0.0"
+      }
+    },
+    "node_modules/@fluentui/react-teaching-popover": {
+      "version": "9.1.8",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-teaching-popover/-/react-teaching-popover-9.1.8.tgz",
+      "integrity": "sha512-idi9GeIm4Hl3pcnELhN1mxvK9eIVCqdEES1IeTSGpEUHsjGiRZCmBV+Z6upv9HSpiTM+zJnCQPXCwp7x5KDP9Q==",
+      "peer": true,
+      "dependencies": {
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-button": "^9.3.84",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-popover": "^9.9.12",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
+        "@fluentui/react-theme": "^9.1.19",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1",
         "use-sync-external-store": "^1.2.0"
       },
@@ -4022,16 +4130,16 @@
       }
     },
     "node_modules/@fluentui/react-text": {
-      "version": "9.4.16",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-text/-/react-text-9.4.16.tgz",
-      "integrity": "sha512-rgdLtbY6rHdFrxNWqflh88aEqqONWBgoMA6xEOQix357E3A5J7S8NJSlKAsd00zQO5gFRiKO+gr5iiRFVKDqeA==",
+      "version": "9.4.20",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-text/-/react-text-9.4.20.tgz",
+      "integrity": "sha512-9ulw77qtUfxmgFTIC3UwzCyw0mn9xWV16VZ3j8MzDeLOapvGUz4UnvOV8aLXIWmI7VbeEVRRcQ5eFMvL6dbhRQ==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -4042,17 +4150,17 @@
       }
     },
     "node_modules/@fluentui/react-textarea": {
-      "version": "9.3.72",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-textarea/-/react-textarea-9.3.72.tgz",
-      "integrity": "sha512-lLYtumX6CxHPbsTP2W+PX6ehWGlZXAKpcgqrhCU4YGxNAdD7FbBO30SIQMAgQ6ygWMAZRztGGRQYkihFz8SeiQ==",
+      "version": "9.3.79",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-textarea/-/react-textarea-9.3.79.tgz",
+      "integrity": "sha512-7nAMBINpKWgvftXvKdynppiLhv0+O97bMwoLyhUdHnBu0fJi/2yYXlsCh1RFAaBg07qc+wqdQX1TdI4ad2nluQ==",
       "peer": true,
       "dependencies": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -4073,23 +4181,23 @@
       }
     },
     "node_modules/@fluentui/react-toast": {
-      "version": "9.3.38",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-toast/-/react-toast-9.3.38.tgz",
-      "integrity": "sha512-oGLdXgObrDCpWzGoM+AKEz1QmwvIix9xCyA2Tf5j9n4kuXAzN9QQZCrS0qVt+I43SboUdsvW8VT+06oSdNPNUA==",
+      "version": "9.3.47",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-toast/-/react-toast-9.3.47.tgz",
+      "integrity": "sha512-sFvdp8OOniYMasIIQB2kwZkezb8lx7mw14RtnPyUG/E8bo5j96uVEZWVH8nAbZGezxSi2X75WZbplla55vhJ6Q==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-motion": "^9.2.0",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
-        "@swc/helpers": "^0.5.1",
-        "react-transition-group": "^4.4.1"
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
+        "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
         "@types/react": ">=16.14.0 <19.0.0",
@@ -4099,21 +4207,21 @@
       }
     },
     "node_modules/@fluentui/react-toolbar": {
-      "version": "9.1.79",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-toolbar/-/react-toolbar-9.1.79.tgz",
-      "integrity": "sha512-9PnMPBh9Yz519qJad18fxe8mQxeLipkB2X9E7xfqMk0zJM1Yni2PmyjuFfJZlgMipkdD26/G1P+gqt45O+b4oQ==",
-      "peer": true,
-      "dependencies": {
-        "@fluentui/react-button": "^9.3.76",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-divider": "^9.2.67",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-radio": "^9.2.16",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+      "version": "9.1.87",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-toolbar/-/react-toolbar-9.1.87.tgz",
+      "integrity": "sha512-jxi5cSw4tj++goEjz85prAJdsfRSqZhY0IV4UAhYvcQLaNaR1mqdJzjynXWHwf5SyKj7u4lsgfJ8XYibBL9/JA==",
+      "peer": true,
+      "dependencies": {
+        "@fluentui/react-button": "^9.3.84",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-divider": "^9.2.70",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-radio": "^9.2.24",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -4124,20 +4232,20 @@
       }
     },
     "node_modules/@fluentui/react-tooltip": {
-      "version": "9.4.24",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-tooltip/-/react-tooltip-9.4.24.tgz",
-      "integrity": "sha512-TJNP3KBZID+yLc4BlJ0A4lrB7SlelI9RPgpFs7En5AR35eqKsRriGLiiIj3cAeKh7BvvH+dNCDjg6zo82rbytQ==",
+      "version": "9.4.31",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-tooltip/-/react-tooltip-9.4.31.tgz",
+      "integrity": "sha512-e6DZgYWDwzt1i0guZjUIrBxuX8sQ1KZg/snJ4puM6IWpbUC2dLahBvOdJbAZopyFRwhsvP37Cey4nTrwhhDVSA==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-positioning": "^9.14.4",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-positioning": "^9.15.3",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -4148,25 +4256,25 @@
       }
     },
     "node_modules/@fluentui/react-tree": {
-      "version": "9.4.39",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-tree/-/react-tree-9.4.39.tgz",
-      "integrity": "sha512-3Zab9biXU+ds2Vx59NGuDksYtGNLuVrAxWQxTmXDbGQ0Y8ogPTA82t52Nf2vRbygzw8PV4dBfwbgau6uQgFNNQ==",
+      "version": "9.7.1",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-tree/-/react-tree-9.7.1.tgz",
+      "integrity": "sha512-zyUW0NwuafZE1618ssOmBZidHg6Luccgmz67XO3zhv5VlVYvMnr1ci55tgyp4L1SY2P/6hVB216EVK0c7oJA6w==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-avatar": "^9.6.22",
-        "@fluentui/react-button": "^9.3.76",
-        "@fluentui/react-checkbox": "^9.2.21",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-radio": "^9.2.16",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-avatar": "^9.6.30",
+        "@fluentui/react-button": "^9.3.84",
+        "@fluentui/react-checkbox": "^9.2.29",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-radio": "^9.2.24",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -4177,13 +4285,13 @@
       }
     },
     "node_modules/@fluentui/react-utilities": {
-      "version": "9.18.7",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-utilities/-/react-utilities-9.18.7.tgz",
-      "integrity": "sha512-voVd4xrx+9VxCPYt51JlzLuJYsjCf3LYjoytAyruu7kEOkPF31Fnjkmp81yrXnAbM+J+tL8HajG5bUHjt8H59w==",
+      "version": "9.18.10",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-utilities/-/react-utilities-9.18.10.tgz",
+      "integrity": "sha512-1yUFZrJyBO1qizHa20S35JATQwr0QoTZ5vBmov0K49BWxDpJxpiAClMpFaMlw0hj9cI7HMLFF8Y87OhUYvaheQ==",
       "peer": true,
       "dependencies": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@swc/helpers": "^0.5.1"
       },
       "peerDependencies": {
@@ -4211,12 +4319,12 @@
       }
     },
     "node_modules/@fluentui/react-window-provider": {
-      "version": "2.2.18",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.18.tgz",
-      "integrity": "sha512-nBKqxd0P8NmIR0qzFvka1urE2LVbUm6cse1I1T7TcOVNYa5jDf5BrO06+JRZfwbn00IJqOnIVoP0qONqceypWQ==",
+      "version": "2.2.27",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.27.tgz",
+      "integrity": "sha512-Dg0G9bizjryV0Q/r0CPtCVTPa2II/EsT9E6JT3jPSALjQADDLlW4/+ZXbcEC7geZ/40+KpZDmhplvk/AJSFBKg==",
       "peer": true,
       "dependencies": {
-        "@fluentui/set-version": "^8.2.14",
+        "@fluentui/set-version": "^8.2.23",
         "tslib": "^2.1.0"
       },
       "peerDependencies": {
@@ -4225,9 +4333,9 @@
       }
     },
     "node_modules/@fluentui/set-version": {
-      "version": "8.2.14",
-      "resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.2.14.tgz",
-      "integrity": "sha512-f/QWJnSeyfAjGAqq57yjMb6a5ejPlwfzdExPmzFBuEOuupi8hHbV8Yno12XJcTW4I0KXEQGw+PUaM1aOf/j7jw==",
+      "version": "8.2.23",
+      "resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.2.23.tgz",
+      "integrity": "sha512-VPXaBsiaa3Xn/AY40nLU9bvDQ62lpMVnFzFTlQ8CbpdwrjxNlRxDUY5vRToNzp1+Zu5gD/+CgsXqIZGcry5L5w==",
       "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
@@ -4293,14 +4401,15 @@
       }
     },
     "node_modules/@fluentui/utilities": {
-      "version": "8.13.24",
-      "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.13.24.tgz",
-      "integrity": "sha512-/jo6hWCzTGCx06l2baAMwsjjBZ/dyMouls53uNaQLUGUUhUwXh/DcDDXMqLRJB3MaH9zvgfvRw61iKmm2s9fIA==",
+      "version": "8.15.12",
+      "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.15.12.tgz",
+      "integrity": "sha512-rDykd3jdIgeIT8vxW66JVS2kipCD2P+NXmjG/uKiRe/OylPSdv0KcewkwcysFYN6XkdVZ/FEKHVRUjD1ejRnxQ==",
       "peer": true,
       "dependencies": {
-        "@fluentui/dom-utilities": "^2.2.14",
-        "@fluentui/merge-styles": "^8.5.15",
-        "@fluentui/set-version": "^8.2.14",
+        "@fluentui/dom-utilities": "^2.3.7",
+        "@fluentui/merge-styles": "^8.6.12",
+        "@fluentui/react-window-provider": "^2.2.27",
+        "@fluentui/set-version": "^8.2.23",
         "tslib": "^2.1.0"
       },
       "peerDependencies": {
@@ -4474,6 +4583,156 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@next/env": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.4.tgz",
+      "integrity": "sha512-3EtkY5VDkuV2+lNmKlbkibIJxcO4oIHEhBWne6PaAp+76J9KoSsGvNikp6ivzAT8dhhBMYrm6op2pS1ApG0Hzg==",
+      "peer": true
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.4.tgz",
+      "integrity": "sha512-AH3mO4JlFUqsYcwFUHb1wAKlebHU/Hv2u2kb1pAuRanDZ7pD/A/KPD98RHZmwsJpdHQwfEc/06mgpSzwrJYnNg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.4.tgz",
+      "integrity": "sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.4.tgz",
+      "integrity": "sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.4.tgz",
+      "integrity": "sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.4.tgz",
+      "integrity": "sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.4.tgz",
+      "integrity": "sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.4.tgz",
+      "integrity": "sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.4.tgz",
+      "integrity": "sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.4.tgz",
+      "integrity": "sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4787,9 +5046,9 @@
       }
     },
     "node_modules/@rjsf/core": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.17.1.tgz",
-      "integrity": "sha512-COZSuumwHskWN8Pz3RxdxvuQUP6M/qBMXAkIi+TSWLFLaF6SUugpLiceMT1jGemDCr7fOSTiPxjkToSsgpvueQ==",
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.18.4.tgz",
+      "integrity": "sha512-OUPC+l44X1geYT9sSsmQC2pakvFWCQB+5Iy/ITfLMJq3MIjJn0gakCwYHXMMBGUAKM1SSMIyKWyCazt3kY9fhg==",
       "peer": true,
       "dependencies": {
         "lodash": "^4.17.21",
@@ -4802,14 +5061,14 @@
         "node": ">=14"
       },
       "peerDependencies": {
-        "@rjsf/utils": "^5.16.x",
+        "@rjsf/utils": "^5.18.x",
         "react": "^16.14.0 || >=17"
       }
     },
     "node_modules/@rjsf/fluentui-rc": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/@rjsf/fluentui-rc/-/fluentui-rc-5.17.1.tgz",
-      "integrity": "sha512-HGCGIDTgYbU5Ch739RoHbd1YG2qWsWdyAMQMDwBnyCirgV26UqTKLOed88CTkPheVgEJq4rFleFw/L+Or1UWzA==",
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/@rjsf/fluentui-rc/-/fluentui-rc-5.18.4.tgz",
+      "integrity": "sha512-lkRaVrh2Hm6AtzSxMAUeP5lOBPKGhAEAzUpQoGSdY6Y2QXaGYku69Dfp0zm2zfAcO5kWdLCTSNcHQONuxJnVHQ==",
       "peer": true,
       "dependencies": {
         "@fluentui/react-components": "^9.46.3",
@@ -4820,14 +5079,14 @@
         "node": ">=14"
       },
       "peerDependencies": {
-        "@rjsf/utils": "^5.16.x",
+        "@rjsf/utils": "^5.18.x",
         "react": "^16.14.0 || >=17"
       }
     },
     "node_modules/@rjsf/utils": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.17.1.tgz",
-      "integrity": "sha512-q1Igz/cuM2hi+jiXFkoaXqdRTUFB+a0jfVKNmZlHmvPmfYeeJfcfyOTzO8dQ41fHNHUFb15ryxa/TblDQimwkA==",
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.18.4.tgz",
+      "integrity": "sha512-svLMk5aW6q3JQRYVTJradFc9tLeQ1vX5/k6fPwxf+08eweqPbINq7aokLBSStUNr8FfYgThTl8IfehLoVP2dvw==",
       "peer": true,
       "dependencies": {
         "json-schema-merge-allof": "^0.8.1",
@@ -4844,9 +5103,9 @@
       }
     },
     "node_modules/@rjsf/validator-ajv8": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.17.1.tgz",
-      "integrity": "sha512-KdvHsjDQ60b04fqnoqhfkiCv7E4n4NIHli8QU8dtpuUAVS/TOqDuOtDJVz6bv/rd/QNROGpxlO/OCccE0rmxLQ==",
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.18.4.tgz",
+      "integrity": "sha512-D0bUtruWbUmXG8z3VBbCky0Cx65rmcdG/QypB9ri5YTSNTQIxuq28StBpZUZn84CO/oMOtociGy4afW1aj5C0g==",
       "peer": true,
       "dependencies": {
         "ajv": "^8.12.0",
@@ -4858,7 +5117,7 @@
         "node": ">=14"
       },
       "peerDependencies": {
-        "@rjsf/utils": "^5.16.x"
+        "@rjsf/utils": "^5.18.x"
       }
     },
     "node_modules/@semantic-release/commit-analyzer": {
@@ -5126,6 +5385,12 @@
         "semantic-release": ">=18.0.0-beta.1"
       }
     },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "peer": true
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.6.tgz",
@@ -6190,6 +6455,18 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true
     },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "peer": true,
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
     "node_modules/bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -8461,8 +8738,7 @@
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
     "node_modules/handle-thing": {
       "version": "2.0.1",
@@ -9585,9 +9861,9 @@
       "peer": true
     },
     "node_modules/keyborg": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/keyborg/-/keyborg-2.5.0.tgz",
-      "integrity": "sha512-nb4Ji1suqWqj6VXb61Jrs4ab/UWgtGph4wDch2NIZDfLBUObmLcZE0aiDjZY49ghtu03fvwxDNvS9ZB0XMz6/g==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/keyborg/-/keyborg-2.6.0.tgz",
+      "integrity": "sha512-o5kvLbuTF+o326CMVYpjlaykxqYP9DphFQZ2ZpgrvBouyvOxyEB7oqe8nOLFpiV5VCtz0D3pt8gXQYWpLpBnmA==",
       "peer": true
     },
     "node_modules/kind-of": {
@@ -10125,6 +10401,94 @@
       "integrity": "sha512-EZSPZB70jiVsivaBLYDCyntd5eH8NTSMOn3rB+HxwdmKThGELLdYv8qVIMWvZEFy9w8ZZpW9h9OB32l1rGtj7g==",
       "dev": true
     },
+    "node_modules/next": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.4.tgz",
+      "integrity": "sha512-R8/V7vugY+822rsQGQCjoLhMuC9oFj9SOi4Cl4b2wjDrseD0LRZ10W7R6Czo4w9ZznVSshKjuIomsRjvm9EKJQ==",
+      "peer": true,
+      "dependencies": {
+        "@next/env": "14.2.4",
+        "@swc/helpers": "0.5.5",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "14.2.4",
+        "@next/swc-darwin-x64": "14.2.4",
+        "@next/swc-linux-arm64-gnu": "14.2.4",
+        "@next/swc-linux-arm64-musl": "14.2.4",
+        "@next/swc-linux-x64-gnu": "14.2.4",
+        "@next/swc-linux-x64-musl": "14.2.4",
+        "@next/swc-win32-arm64-msvc": "14.2.4",
+        "@next/swc-win32-ia32-msvc": "14.2.4",
+        "@next/swc-win32-x64-msvc": "14.2.4"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/@swc/helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "peer": true,
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -15461,7 +15825,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15624,6 +15987,15 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "peer": true,
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -15836,6 +16208,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "peer": true,
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/stylis": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
@@ -15908,12 +16303,12 @@
       }
     },
     "node_modules/tabster": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/tabster/-/tabster-7.1.1.tgz",
-      "integrity": "sha512-3VsXUb0XxVcFq9NmzTieAJAlruMiaj/dvXIHm7RgjsUrMGkEcq9KbBdai05NAGp2D2d/CxHc6j1mbuUzGofWBA==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/tabster/-/tabster-8.0.0.tgz",
+      "integrity": "sha512-82pqhDwH3uq7hVcy1nOo7lyYgCJcVUPqb30hvoHtX8DQ5pxEtRz9+FqVcW5w7J6kTjNBBu7cwKvuMy9qoeQt1g==",
       "peer": true,
       "dependencies": {
-        "keyborg": "2.5.0",
+        "keyborg": "2.6.0",
         "tslib": "^2.3.1"
       }
     },
@@ -17037,18 +17432,18 @@
       },
       "peerDependencies": {
         "@craftjs/core": "^0.2.4",
-        "@eavfw/apps": "^1.4.0-vnext.27",
+        "@eavfw/apps": "^1.4.0-vnext.33",
         "@eavfw/designer": "^1.1.1",
         "@eavfw/designer-core": "^1.1.1",
         "@eavfw/designer-nodes": "^1.1.2",
         "@eavfw/forms": "^1.2.0-vnext.8",
-        "@eavfw/manifest": "^1.5.0-vnext.10",
-        "@eavfw/utils": "^1.1.0-vnext.1",
+        "@eavfw/manifest": "^1.5.0-vnext.15",
+        "@eavfw/utils": "^1.1.0-vnext.2",
         "@fluentui/react-components": "=>9.46.0 <9.49.2",
-        "@rjsf/core": "5.17.1",
-        "@rjsf/fluentui-rc": "5.17.1",
-        "@rjsf/utils": "5.17.1",
-        "@rjsf/validator-ajv8": "5.17.1",
+        "@rjsf/core": "5.18.4",
+        "@rjsf/fluentui-rc": "5.18.4",
+        "@rjsf/utils": "5.18.4",
+        "@rjsf/validator-ajv8": "5.18.4",
         "pako": "^2.0.4"
       }
     },
@@ -17059,11 +17454,11 @@
       "devDependencies": {},
       "peerDependencies": {
         "@eavfw/quickform-core": "*",
-        "@fluentui/react-components": "=>9.46.0 <9.49.2",
+        "@fluentui/react-components": "^9.54.0",
         "@fluentui/react-icons": "^2.0.230",
-        "@rjsf/core": "5.17.1",
-        "@rjsf/fluentui-rc": "5.17.1",
-        "@rjsf/validator-ajv8": "5.17.1",
+        "@rjsf/core": "^5.18.4",
+        "@rjsf/fluentui-rc": "^5.18.4",
+        "@rjsf/validator-ajv8": "^5.18.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       }
@@ -18491,9 +18886,9 @@
       "dev": true
     },
     "@eavfw/apps": {
-      "version": "1.4.0-vnext.27",
-      "resolved": "https://registry.npmjs.org/@eavfw/apps/-/apps-1.4.0-vnext.27.tgz",
-      "integrity": "sha512-HdkoNiHKmdBRR/rGarwbofaI5LW1L2HC8rGXzaYOrsEZ5NBHoZiypxuujEyFFXconky14QtcWSjbJdS7dl5sIg==",
+      "version": "1.4.0-vnext.33",
+      "resolved": "https://registry.npmjs.org/@eavfw/apps/-/apps-1.4.0-vnext.33.tgz",
+      "integrity": "sha512-WEEc9uvqyYY7b023v2k/yceEjdA08PnutOEpgGyv6WPBC0UcOh4IQjNjldex06Yc6QN8X+KoDLghs2p/l0b/gA==",
       "peer": true,
       "requires": {
         "@eavfw/expressions": "*",
@@ -18564,9 +18959,9 @@
       "requires": {}
     },
     "@eavfw/manifest": {
-      "version": "1.5.0-vnext.10",
-      "resolved": "https://registry.npmjs.org/@eavfw/manifest/-/manifest-1.5.0-vnext.10.tgz",
-      "integrity": "sha512-AbxIhGBiku73JNJmc4EJm2ms9cZZwYmLU07krSIjnmtuqL1H1QNnepcdfl75I9UBoaOjHp2cnyJH9mxBv8vK7w==",
+      "version": "1.5.0-vnext.15",
+      "resolved": "https://registry.npmjs.org/@eavfw/manifest/-/manifest-1.5.0-vnext.15.tgz",
+      "integrity": "sha512-OMrI70zO1dyqz2ZuhfGjJ5wlmCi9XGD/qw8bI7e10DCjj3TGA8whD0r4ZJTMrU24NHAGsgvrHhC2mviw6PH2Pg==",
       "peer": true,
       "requires": {}
     },
@@ -18601,9 +18996,9 @@
       }
     },
     "@eavfw/utils": {
-      "version": "1.1.0-vnext.1",
-      "resolved": "https://registry.npmjs.org/@eavfw/utils/-/utils-1.1.0-vnext.1.tgz",
-      "integrity": "sha512-NpITIbjN3UT/mr/sMpxhsYL3AKoz3sLYOFzLUX1wAPMqElfZvrmZtkC2x9JWo58Snb6A88187WZvZ2ILP4wkYw==",
+      "version": "1.1.0-vnext.2",
+      "resolved": "https://registry.npmjs.org/@eavfw/utils/-/utils-1.1.0-vnext.2.tgz",
+      "integrity": "sha512-7PC194MWHUzoKiBgDV2YQj6zSHHlijAilvcBx+MzzQMRHCMbc1B1hdoZn1+fy77C8yxmB+R8qS+TWFqTseSA+A==",
       "peer": true
     },
     "@emotion/hash": {
@@ -18692,12 +19087,12 @@
       }
     },
     "@fluentui/dom-utilities": {
-      "version": "2.2.14",
-      "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.2.14.tgz",
-      "integrity": "sha512-+4DVm5sNfJh+l8fM+7ylpOkGNZkNr4X1z1uKQPzRJ1PRhlnvc6vLpWNNicGwpjTbgufSrVtGKXwP5sf++r81lg==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.3.7.tgz",
+      "integrity": "sha512-AaTR9BhJEF0i042NS1Ju8l95f24p2tBMq6jVVbUEDtYnKaxWnpv8R9eYjOwy8SDniQc1ino+BkolIgCVXXvDmw==",
       "peer": true,
       "requires": {
-        "@fluentui/set-version": "^8.2.14",
+        "@fluentui/set-version": "^8.2.23",
         "tslib": "^2.1.0"
       }
     },
@@ -18745,19 +19140,19 @@
       }
     },
     "@fluentui/merge-styles": {
-      "version": "8.5.15",
-      "resolved": "https://registry.npmjs.org/@fluentui/merge-styles/-/merge-styles-8.5.15.tgz",
-      "integrity": "sha512-4CdKwo4k1Un2QLulpSVIz/KMgLNBMgin4NPyapmKDMVuO1OOxJUqfocubRGNO5x9mKgAMMYwBKGO9i0uxMMpJw==",
+      "version": "8.6.12",
+      "resolved": "https://registry.npmjs.org/@fluentui/merge-styles/-/merge-styles-8.6.12.tgz",
+      "integrity": "sha512-v8njux9frUkoGGlBnQXKHaKCX2nLZVHPFMDMzibtAIt4vIkkv+oY2lFmJ2h96tSIkg4eVN7h5sSDTFVoAPwpYg==",
       "peer": true,
       "requires": {
-        "@fluentui/set-version": "^8.2.14",
+        "@fluentui/set-version": "^8.2.23",
         "tslib": "^2.1.0"
       }
     },
     "@fluentui/priority-overflow": {
-      "version": "9.1.11",
-      "resolved": "https://registry.npmjs.org/@fluentui/priority-overflow/-/priority-overflow-9.1.11.tgz",
-      "integrity": "sha512-sdrpavvKX2kepQ1d6IaI3ObLq5SAQBPRHPGx2+wiMWL7cEx9vGGM0fmeicl3soqqmM5uwCmWnZk9QZv9XOY98w==",
+      "version": "9.1.13",
+      "resolved": "https://registry.npmjs.org/@fluentui/priority-overflow/-/priority-overflow-9.1.13.tgz",
+      "integrity": "sha512-yDojVpkhBZTXOYExrCgW1GXbw3x9pYIS617xlNJIc2t06Cd3H32y2p51QXFt94sBmlVyAvPu7UKBHaq1Yw7u+w==",
       "peer": true,
       "requires": {
         "@swc/helpers": "^0.5.1"
@@ -18786,20 +19181,20 @@
       }
     },
     "@fluentui/react-accordion": {
-      "version": "9.3.50",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-accordion/-/react-accordion-9.3.50.tgz",
-      "integrity": "sha512-I/dL89nrNC9BzjzTsXRApaQMpmegdSZ4ofh4vpbTJ/ZohHPBKTjpPzgPFuSRsUPY3ZUX0P5q4Xb5MpObLY+t0g==",
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-accordion/-/react-accordion-9.4.1.tgz",
+      "integrity": "sha512-xvQWtpnHVn4c8MCcCVUyoq284AtmQCvH4Dyd0kJUT13j8JwLSh2NxW0XPR+gutfoOVSlShEtpRFXdV0RO1ApsQ==",
       "peer": true,
       "requires": {
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
@@ -18821,160 +19216,160 @@
       }
     },
     "@fluentui/react-aria": {
-      "version": "9.10.5",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-aria/-/react-aria-9.10.5.tgz",
-      "integrity": "sha512-mltw1Kelz31UxeZXlQpmX5eW4UUQBRQm4OLTlM4YDiDNe1N3Qd63cUIDGhgn0MvCvwVpIryOO89jj+RJGXkpkA==",
+      "version": "9.12.1",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-aria/-/react-aria-9.12.1.tgz",
+      "integrity": "sha512-YKI1e/rzOsC2x0OMjOEMY/YCPETA6P0/LV1N8UzeFSYU2NyRavacLpYfRY7LfQjCYqFfM5eHd3uWOQfuzjPPmw==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
-        "@fluentui/react-utilities": "^9.18.7",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
+        "@fluentui/react-utilities": "^9.18.10",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-avatar": {
-      "version": "9.6.22",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-avatar/-/react-avatar-9.6.22.tgz",
-      "integrity": "sha512-AYK2Ak4DhbUTDIHvde1DQ9NLSx/iOq2GduDOI6tIwUxVMmqrjF+ec+DxJLjtdrBK6RCnYtvb5F4fMezySBZrPQ==",
-      "peer": true,
-      "requires": {
-        "@fluentui/react-badge": "^9.2.32",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-popover": "^9.9.5",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+      "version": "9.6.30",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-avatar/-/react-avatar-9.6.30.tgz",
+      "integrity": "sha512-oujqsEzLgTUBkvcvTYM4WIi5DNOac0oATtOfMYSk5ws+kh0nPA5umUSC505snG2KrWySrpxHZeX/SaG8MZgHvA==",
+      "peer": true,
+      "requires": {
+        "@fluentui/react-badge": "^9.2.38",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-popover": "^9.9.12",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-tooltip": "^9.4.24",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-tooltip": "^9.4.31",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-badge": {
-      "version": "9.2.32",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-badge/-/react-badge-9.2.32.tgz",
-      "integrity": "sha512-fqO8Mlg129h3yuYwodVk4bj02fe9ryiA+37MKMzajQSGrOJH1xnTzD+R8ngf8s1iEq5TUsy7dQXLyzGSxllhVw==",
+      "version": "9.2.38",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-badge/-/react-badge-9.2.38.tgz",
+      "integrity": "sha512-Tc9zJQLWr/+O2x2IGPBTlnC18TXtvFqA7MTeQK+GRrGPmmDR24wdubuJHDRvkHT7olF+bcpVf6v96kry+9eIKA==",
       "peer": true,
       "requires": {
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-breadcrumb": {
-      "version": "9.0.22",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-breadcrumb/-/react-breadcrumb-9.0.22.tgz",
-      "integrity": "sha512-EGHbOwaInu7CJmCdd5V0jI88iC9/xQiCQYEwn8EaZpciSpv6AD1QMiwwdr9OHLq3Y4NgEZTDki8JD+fWbhlk8Q==",
-      "peer": true,
-      "requires": {
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-button": "^9.3.76",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-link": "^9.2.18",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+      "version": "9.0.30",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-breadcrumb/-/react-breadcrumb-9.0.30.tgz",
+      "integrity": "sha512-Q4O6M7C1PcvkbCo/tlBrIkJvuXShsoFMTf1k0drD0S2IlFVO+F1sI6RCT1hsq8PWDSfFj63EEOpWf1gPvyHY1w==",
+      "peer": true,
+      "requires": {
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-button": "^9.3.84",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-link": "^9.2.25",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-button": {
-      "version": "9.3.76",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-button/-/react-button-9.3.76.tgz",
-      "integrity": "sha512-3ZsEjbRcNY3oEAjxCOuXg6JNtA6/jryMs/IKoP0b7yh8UyJsChRy9hhlRD8ms+f7OBfqLoUyz4WUfwV9eeQV8g==",
+      "version": "9.3.84",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-button/-/react-button-9.3.84.tgz",
+      "integrity": "sha512-tZX4mt2dUIguTOmBYGEL555sRnf8H9MIrqD8YsBU+2sADBWgaYOoajoZrN6TUXkmpQoG5AYggwscqJcFICzeQg==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-calendar-compat": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-calendar-compat/-/react-calendar-compat-0.1.3.tgz",
-      "integrity": "sha512-L1ammyCPG9bSuHgLw+13amz5jSlaa5zPSp8NVOw/jV+aI8uvOeu57/EZGVBzxT1WFhALKBON/1YqoN7Qw+lV6w==",
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-calendar-compat/-/react-calendar-compat-0.1.11.tgz",
+      "integrity": "sha512-0yrwdJaG4zJio9TolGVYW3Xq2Ud6bGaOvPLdmxO57kN+ZwwznAfoEFA4zz76V/rCB8BFxiRwWLni3r3HVs9hYA==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-card": {
-      "version": "9.0.75",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-card/-/react-card-9.0.75.tgz",
-      "integrity": "sha512-AWtgjvKm0hRbnelIMfXZrPJ8kke2bGLKQhVTLcRybTjLh7aXHp/PPVtY5ktZODUp96VuAZkZl1yL3IxJLjldog==",
+      "version": "9.0.84",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-card/-/react-card-9.0.84.tgz",
+      "integrity": "sha512-P3mOPT4ON62tNrMXI79RZSbj789nt+E6B5gRX2/cuTLbiMyrOepaF4zsYRE4+8tX7YFiKbv45xobRI/Oe31WRg==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-checkbox": {
-      "version": "9.2.21",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-checkbox/-/react-checkbox-9.2.21.tgz",
-      "integrity": "sha512-oma+pLiLvtWonUiXUsJLXeIJ4fUIbd6TgvK6v5SFU+97loaQGsx+0TtayUBj1dCVVvoW/tjJebNtud92Ozz/qQ==",
+      "version": "9.2.29",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-checkbox/-/react-checkbox-9.2.29.tgz",
+      "integrity": "sha512-3KIY50KQ+i3Iwqi165zRo/kZ7sjeLoFX5yYYB3BXpqNey+EGP6zhm1C7NAOy3d6dUlREbOHHxbM+9QUHtgUv1w==",
       "peer": true,
       "requires": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-label": "^9.1.68",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-label": "^9.1.71",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-combobox": {
-      "version": "9.10.1",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-combobox/-/react-combobox-9.10.1.tgz",
-      "integrity": "sha512-RoXXtB7bKlT7JbuNP5mQxZMANbq2opT+vslNVhoOy5Gu8EJe1gxdNwKfug+NY/SC2N1SFBH1xdgsBzhPsGi38g==",
+      "version": "9.11.8",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-combobox/-/react-combobox-9.11.8.tgz",
+      "integrity": "sha512-qOKRnotJ53cBWVtSfJ3ZM1cpJ05Fzidfsygz351Jw6Gk8CKgvO9Vi9EvpadP8rrWcnr1GcPhnW2KGP9qsEFnJQ==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-positioning": "^9.14.4",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-positioning": "^9.15.3",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
@@ -19066,103 +19461,103 @@
       }
     },
     "@fluentui/react-context-selector": {
-      "version": "9.1.58",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-context-selector/-/react-context-selector-9.1.58.tgz",
-      "integrity": "sha512-XFL+X09+AABkC1D/4P20e+AbU+hG3+AiivA2+ZW+6Lqpg2RmYe5a9AhZdMCD0Desyq2BoKurYNyNOmI3OPJF8w==",
+      "version": "9.1.62",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-context-selector/-/react-context-selector-9.1.62.tgz",
+      "integrity": "sha512-XXSCkqzisRWGjckdkZLLx0uYnQyfwa0xedEB6HMMeCnJqYWj4aFj27IhQC25UQ2SMdrl1vnjdfqUYjn6G3NsAQ==",
       "peer": true,
       "requires": {
-        "@fluentui/react-utilities": "^9.18.7",
+        "@fluentui/react-utilities": "^9.18.10",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-datepicker-compat": {
-      "version": "0.4.33",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-datepicker-compat/-/react-datepicker-compat-0.4.33.tgz",
-      "integrity": "sha512-4SZ5LsY43ra1o11kiDQXaLeIxkvpP+bZClpuFvfTPCadNpOnTJvDxsDZkeC7RJiTPLluBEyiDelagNqrM+AxaA==",
+      "version": "0.4.41",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-datepicker-compat/-/react-datepicker-compat-0.4.41.tgz",
+      "integrity": "sha512-EA7ye5ubW2nNBzykqpR8y9UuIPze9hCBPvy3BtJcEPulY+kw10zoE01ofZlgNRw5kOkdrqESFoczwvF9mlMZgg==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-calendar-compat": "^0.1.3",
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-input": "^9.4.72",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-popover": "^9.9.5",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-positioning": "^9.14.4",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-calendar-compat": "^0.1.11",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-input": "^9.4.79",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-popover": "^9.9.12",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-positioning": "^9.15.3",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-dialog": {
-      "version": "9.10.1",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-dialog/-/react-dialog-9.10.1.tgz",
-      "integrity": "sha512-xtNk5cuSFAqxAvFG8wbsyCDMjduRX7kpmOMym0jRveEiAnXirWApJlXtIbqGhQq1E13bHhcUrgk+rThYNj++0A==",
+      "version": "9.11.2",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-dialog/-/react-dialog-9.11.2.tgz",
+      "integrity": "sha512-us1JbZ7iucDyJyd372sJQqdcJPCgQJLsxR3OFVoecQ+wOC66eLKTHHKhyHhdIRem/dfpm8X1mzEmrj+ipws1jQ==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-motion": "^9.2.0",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
-        "@swc/helpers": "^0.5.1",
-        "react-transition-group": "^4.4.1"
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
+        "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-divider": {
-      "version": "9.2.67",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-divider/-/react-divider-9.2.67.tgz",
-      "integrity": "sha512-+25KhiweeFQUW4PrqnkBhVgTktMSF+965Xlezjpp7848MYEb2SfyvJC2akeZ4bcZUwCyqth9RTv/4hKBdYXmOw==",
+      "version": "9.2.70",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-divider/-/react-divider-9.2.70.tgz",
+      "integrity": "sha512-PtPAQp+j9icisZrmZR65LLug/uk/cWBdyQAMKse6jKmF/274xp9M9xuB833fgryJ3NIMp+dVHsJT8XJxhMVHcQ==",
       "peer": true,
       "requires": {
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-drawer": {
-      "version": "9.1.12",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-drawer/-/react-drawer-9.1.12.tgz",
-      "integrity": "sha512-YFIrKhcdi6seNjgNIC1P8VeajNFLlbYe1WRPJi0J/6fcQEQRBOfMpLgwUdqw4rXV/54U4+F5DI6q5t67i5jLGg==",
+      "version": "9.5.2",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-drawer/-/react-drawer-9.5.2.tgz",
+      "integrity": "sha512-uUXGrVRiG+LsF82EdtVlEdfO0EH5+zN/T7eOWdADm94M5LIK5VT+ifm31f+bERdJIPfCV2HbfUTtqgL9ubho1A==",
       "peer": true,
       "requires": {
-        "@fluentui/react-dialog": "^9.10.1",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-motion-preview": "^0.5.19",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-dialog": "^9.11.2",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-motion-preview": "^0.5.22",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-field": {
-      "version": "9.1.62",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-field/-/react-field-9.1.62.tgz",
-      "integrity": "sha512-p1x4NYdGO9CMOAQ9yqos0liSEb84i5tpTFXPgdSCyYrAcsFbBnblabgyg0hUtdtuuuZVKcHGE3M+vk8xaa0n+A==",
+      "version": "9.1.68",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-field/-/react-field-9.1.68.tgz",
+      "integrity": "sha512-PiXti7L9rBwk98S+BcS9EKj13nmvl/lymwdrw2vguOMJvNQYIW4UhmvAzFDxs92kpfeHIjZgcEv+cskhJ7Uo7g==",
       "peer": true,
       "requires": {
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-label": "^9.1.68",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-label": "^9.1.71",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
@@ -19181,14 +19576,14 @@
       }
     },
     "@fluentui/react-hooks": {
-      "version": "8.6.36",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.6.36.tgz",
-      "integrity": "sha512-kI0Z4Q4xHUs4SOmmI5n5OH5fPckqMSCovTRpiuxzCO2TNzLmfC861+nqf4Ygw/ChqNm2gWNZZfUADfnNAEsq+Q==",
+      "version": "8.8.9",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.8.9.tgz",
+      "integrity": "sha512-1m9tEUlUzvyU/ENwbQQdqlsVJSu113cjeFxPRAx56tcmc2THsuVy+Kdn8qRf/4om/W0W+Doc+CK4WFgYAGsfhw==",
       "peer": true,
       "requires": {
-        "@fluentui/react-window-provider": "^2.2.18",
-        "@fluentui/set-version": "^8.2.14",
-        "@fluentui/utilities": "^8.13.24",
+        "@fluentui/react-window-provider": "^2.2.27",
+        "@fluentui/set-version": "^8.2.23",
+        "@fluentui/utilities": "^8.15.12",
         "tslib": "^2.1.0"
       }
     },
@@ -19204,9 +19599,9 @@
       }
     },
     "@fluentui/react-icons": {
-      "version": "2.0.237",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.237.tgz",
-      "integrity": "sha512-J+6XDB/Y3G3nfNWvKKI6xhUXDN6/xvhksnV+zfXiGb6tqtK7QiihAzvRRgPnKuS3BH/H1TM7k3KC19V0AJrTDg==",
+      "version": "2.0.245",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.245.tgz",
+      "integrity": "sha512-okaKAWR9BPTEu7g/Lz7M+SeABkveiDC0A5dA+AKbnGX/5V60/0jV/m/mnTCs9EfsbMdHZaoErsVqzCxP3mqYGQ==",
       "peer": true,
       "requires": {
         "@griffel/react": "^1.0.0",
@@ -19227,16 +19622,16 @@
       }
     },
     "@fluentui/react-image": {
-      "version": "9.1.64",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-image/-/react-image-9.1.64.tgz",
-      "integrity": "sha512-GIf3ld0McmndF6vc9I0WS/90d9ON11J9QB9tnI7TxYEFpzgpJ7UIMjVsqqICM/xIj+RtBqYu/1VgiXccIcuZsw==",
+      "version": "9.1.68",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-image/-/react-image-9.1.68.tgz",
+      "integrity": "sha512-cjUoL7nt9cyO5WrPw5wG2GFYRvAEpOA2/nbeUooeAAQQ11V+d7ekSxpfD9OyyiA5KABpn909puzu96kqNTwKFg==",
       "peer": true,
       "requires": {
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
@@ -19258,44 +19653,44 @@
       }
     },
     "@fluentui/react-infolabel": {
-      "version": "9.0.29",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-infolabel/-/react-infolabel-9.0.29.tgz",
-      "integrity": "sha512-FloTgj6lsK+wH2YaOonwfmc2TexTbpnGfw+fQ140rKTYEJlsgbb41PzviY3YUbokaG1S/S2rxy+JBlnUU8zzTQ==",
+      "version": "9.0.37",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-infolabel/-/react-infolabel-9.0.37.tgz",
+      "integrity": "sha512-q3GzoMQXv6r6d/9d6PRA1XDTY9mJDO/7Kh538E1b4HEQwyVSW21NpuUZSHURp5O7v3tfuCq47BMO0339ePCu+g==",
       "peer": true,
       "requires": {
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-label": "^9.1.68",
-        "@fluentui/react-popover": "^9.9.5",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-label": "^9.1.71",
+        "@fluentui/react-popover": "^9.9.12",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-input": {
-      "version": "9.4.72",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-input/-/react-input-9.4.72.tgz",
-      "integrity": "sha512-MhxgCJd0dma8qx3AOlfgowRTyGabEW8a9vczM9uaex6dO0vtf2CIsP7MfR3DC4b8MeHT1+XEEmfCTNFJb9q3BA==",
+      "version": "9.4.79",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-input/-/react-input-9.4.79.tgz",
+      "integrity": "sha512-Nuf3n4Py77v5zOVE9MLaQeC6ywwjfL7jTdEaKVGL3k/geWTG5WFqjG79CzNJo0Ajo0DKnPqul6MtLdRF+tqeNQ==",
       "peer": true,
       "requires": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-jsx-runtime": {
-      "version": "9.0.36",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-jsx-runtime/-/react-jsx-runtime-9.0.36.tgz",
-      "integrity": "sha512-qCaZJ2UagJ6aEahSp83n6OPFAKkxFGB2NEJZ+Cg+PDNZHScA80ds6NfO/FkQ3rz0Vmx0R+qN8MH/zgb6Il05Kg==",
+      "version": "9.0.39",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-jsx-runtime/-/react-jsx-runtime-9.0.39.tgz",
+      "integrity": "sha512-mfK3L68Gfu9rMkfg1iVT06rOOPeOZasy+nKJID451YfKiAQYy1Zy9bhaTRDoNrOQcu2jDEOZAxAPURZw5oGLtw==",
       "peer": true,
       "requires": {
-        "@fluentui/react-utilities": "^9.18.7",
+        "@fluentui/react-utilities": "^9.18.10",
         "@swc/helpers": "^0.5.1",
         "react-is": "^17.0.2"
       },
@@ -19309,69 +19704,69 @@
       }
     },
     "@fluentui/react-label": {
-      "version": "9.1.68",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-label/-/react-label-9.1.68.tgz",
-      "integrity": "sha512-j9aQw47kQKX9ECI2EehXvXUwQC2qrOokn1TJsabo54ipgt6yxxjQJPODluqQNWeBxRT0ctuYBTiZvJNvJkw+1A==",
+      "version": "9.1.71",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-label/-/react-label-9.1.71.tgz",
+      "integrity": "sha512-PkzRsl86+AkSn6p26C0Y2AV4IxYUhbBV+lFNSwN/hVgiXwMVdUjPOZx4Nm4Fnvv5ctt/BVuaE0dB/nSSDsrnQw==",
       "peer": true,
       "requires": {
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-link": {
-      "version": "9.2.18",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-link/-/react-link-9.2.18.tgz",
-      "integrity": "sha512-dQc9ryjAI6TEyH+pFp71Qzz3jLg4WyiB5oNHNAN6HDRQKSdJKwMzn2HexGmuIV5e/WVH9E9kTfQe5g7a0WMwqw==",
+      "version": "9.2.25",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-link/-/react-link-9.2.25.tgz",
+      "integrity": "sha512-yhwgXjIFC39Nd5zveaOu3AgAra3H0Cv+gQ4rOLKW95ejlXHJqZEqcFPrf39d930YVCeIThiBH7IG1JCfo4z8/Q==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-menu": {
-      "version": "9.14.0",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-menu/-/react-menu-9.14.0.tgz",
-      "integrity": "sha512-rI7NI18Q8FS6p0hs56DRjfo337egGpfpj1AgU6qPKd8TnzX87+LGVAQ0/AuIiDTW9XIIhJmlPaNe9tw2NsoZ4w==",
+      "version": "9.14.8",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-menu/-/react-menu-9.14.8.tgz",
+      "integrity": "sha512-FFY44tCxzQJaFVKXqJuR00++FSJPUSkx/qg41e73j/8+ytelD0FtyzLoS0r/ditAfDVSJtFwuuL10+3Dagk2WQ==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-positioning": "^9.14.4",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-positioning": "^9.15.3",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-message-bar": {
-      "version": "9.0.27",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-message-bar/-/react-message-bar-9.0.27.tgz",
-      "integrity": "sha512-U42QwnMziF9MHKeY4j4YUg9P0SnNGLlvIbtSlLGry4yIh6qa4I3aSuY0skPemkbr4TAsKTwiUMDFkd0SbyztFA==",
+      "version": "9.2.3",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-message-bar/-/react-message-bar-9.2.3.tgz",
+      "integrity": "sha512-l/Z2MWgXTcc4OkN5txduZidGghbEXUhN0xKkrhxNnQrQzZLjC9C3tyOKog8/v8rkT7HEDWX6idvzDCAPEIPf4A==",
       "peer": true,
       "requires": {
-        "@fluentui/react-button": "^9.3.76",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-button": "^9.3.84",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1",
         "react-transition-group": "^4.4.1"
       }
@@ -19394,115 +19789,118 @@
       }
     },
     "@fluentui/react-migration-v0-v9": {
-      "version": "9.1.27",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-migration-v0-v9/-/react-migration-v0-v9-9.1.27.tgz",
-      "integrity": "sha512-zjJhX2mVTHfqP9S16i1GtLdLeAz9g45iqKhzGh03tbwGTJrRFUu0AIjLKPySZbhjfk1kVPJ8lBE97KPVu3aSgw==",
-      "peer": true,
-      "requires": {
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-components": "^9.49.0",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+      "version": "9.1.37",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-migration-v0-v9/-/react-migration-v0-v9-9.1.37.tgz",
+      "integrity": "sha512-8Qz9Prk/U3p03R2cDc+39DaEIYbNMkWUlTOhte9qItq5PMFRuHTUubgfyLRbhzZj84c28kttm614frUC59FjLQ==",
+      "peer": true,
+      "requires": {
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-components": "^9.54.2",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       },
       "dependencies": {
         "@fluentui/react-alert": {
-          "version": "9.0.0-beta.117",
-          "resolved": "https://registry.npmjs.org/@fluentui/react-alert/-/react-alert-9.0.0-beta.117.tgz",
-          "integrity": "sha512-vZYEyILCKN8XpUB+bk4a7OoDI23vtD5IR4g2Fm6OHqEGxauQPEUTCFK6Ogxt85mQLce0pWEK75p5dVkWOvCzWw==",
+          "version": "9.0.0-beta.124",
+          "resolved": "https://registry.npmjs.org/@fluentui/react-alert/-/react-alert-9.0.0-beta.124.tgz",
+          "integrity": "sha512-yFBo3B5H9hnoaXxlkuz8wRz04DEyQ+ElYA/p5p+Vojf19Zuta8DmFZZ6JtWdtxcdnnQ4LvAfC5OYYlzdReozPA==",
           "peer": true,
           "requires": {
-            "@fluentui/react-avatar": "^9.6.22",
-            "@fluentui/react-button": "^9.3.76",
-            "@fluentui/react-icons": "^2.0.235",
-            "@fluentui/react-jsx-runtime": "^9.0.36",
-            "@fluentui/react-tabster": "^9.20.1",
+            "@fluentui/react-avatar": "^9.6.29",
+            "@fluentui/react-button": "^9.3.83",
+            "@fluentui/react-icons": "^2.0.239",
+            "@fluentui/react-jsx-runtime": "^9.0.39",
+            "@fluentui/react-tabster": "^9.21.5",
             "@fluentui/react-theme": "^9.1.19",
-            "@fluentui/react-utilities": "^9.18.7",
-            "@griffel/react": "^1.5.14",
+            "@fluentui/react-utilities": "^9.18.10",
+            "@griffel/react": "^1.5.22",
             "@swc/helpers": "^0.5.1"
           }
         },
         "@fluentui/react-components": {
-          "version": "9.49.0",
-          "resolved": "https://registry.npmjs.org/@fluentui/react-components/-/react-components-9.49.0.tgz",
-          "integrity": "sha512-7IRiUhdMlGcyAVHxnNTdj2l2WbEaXkHeETMkkLDxf3x7d8qwWkRcrRYm/Ds36aI37kBOYKwKjYNqaybDxq4WBw==",
+          "version": "9.54.2",
+          "resolved": "https://registry.npmjs.org/@fluentui/react-components/-/react-components-9.54.2.tgz",
+          "integrity": "sha512-NcpmVmYtF7BQComrRcnjlHijXCApDXKKJx+aTxJb7lWl3C5oPIzWzKNtiIwm3zXKDlGMuN336FHc0I0sduMtHA==",
           "peer": true,
           "requires": {
-            "@fluentui/react-accordion": "^9.3.50",
-            "@fluentui/react-alert": "9.0.0-beta.117",
-            "@fluentui/react-aria": "^9.10.5",
-            "@fluentui/react-avatar": "^9.6.22",
-            "@fluentui/react-badge": "^9.2.32",
-            "@fluentui/react-breadcrumb": "^9.0.22",
-            "@fluentui/react-button": "^9.3.76",
-            "@fluentui/react-card": "^9.0.75",
-            "@fluentui/react-checkbox": "^9.2.21",
-            "@fluentui/react-combobox": "^9.10.1",
-            "@fluentui/react-dialog": "^9.10.1",
-            "@fluentui/react-divider": "^9.2.67",
-            "@fluentui/react-drawer": "^9.1.12",
-            "@fluentui/react-field": "^9.1.62",
-            "@fluentui/react-image": "^9.1.64",
-            "@fluentui/react-infobutton": "9.0.0-beta.101",
-            "@fluentui/react-infolabel": "^9.0.29",
-            "@fluentui/react-input": "^9.4.72",
-            "@fluentui/react-label": "^9.1.68",
-            "@fluentui/react-link": "^9.2.18",
-            "@fluentui/react-menu": "^9.14.0",
-            "@fluentui/react-message-bar": "^9.0.27",
-            "@fluentui/react-overflow": "^9.1.17",
-            "@fluentui/react-persona": "^9.2.81",
-            "@fluentui/react-popover": "^9.9.5",
-            "@fluentui/react-portal": "^9.4.21",
-            "@fluentui/react-positioning": "^9.14.4",
-            "@fluentui/react-progress": "^9.1.72",
-            "@fluentui/react-provider": "^9.14.0",
-            "@fluentui/react-radio": "^9.2.16",
-            "@fluentui/react-rating": "^9.0.4",
-            "@fluentui/react-search": "^9.0.1",
-            "@fluentui/react-select": "^9.1.72",
-            "@fluentui/react-shared-contexts": "^9.17.0",
-            "@fluentui/react-skeleton": "^9.1.0",
-            "@fluentui/react-slider": "^9.1.78",
-            "@fluentui/react-spinbutton": "^9.2.72",
-            "@fluentui/react-spinner": "^9.4.5",
-            "@fluentui/react-switch": "^9.1.78",
-            "@fluentui/react-table": "^9.15.0",
-            "@fluentui/react-tabs": "^9.4.17",
-            "@fluentui/react-tabster": "^9.20.1",
-            "@fluentui/react-tags": "^9.3.1",
-            "@fluentui/react-teaching-popover": "^9.1.0",
-            "@fluentui/react-text": "^9.4.16",
-            "@fluentui/react-textarea": "^9.3.72",
+            "@fluentui/react-accordion": "^9.4.1",
+            "@fluentui/react-alert": "9.0.0-beta.124",
+            "@fluentui/react-aria": "^9.12.1",
+            "@fluentui/react-avatar": "^9.6.30",
+            "@fluentui/react-badge": "^9.2.38",
+            "@fluentui/react-breadcrumb": "^9.0.30",
+            "@fluentui/react-button": "^9.3.84",
+            "@fluentui/react-card": "^9.0.84",
+            "@fluentui/react-checkbox": "^9.2.29",
+            "@fluentui/react-combobox": "^9.11.8",
+            "@fluentui/react-dialog": "^9.11.2",
+            "@fluentui/react-divider": "^9.2.70",
+            "@fluentui/react-drawer": "^9.5.2",
+            "@fluentui/react-field": "^9.1.68",
+            "@fluentui/react-image": "^9.1.68",
+            "@fluentui/react-infobutton": "9.0.0-beta.102",
+            "@fluentui/react-infolabel": "^9.0.37",
+            "@fluentui/react-input": "^9.4.79",
+            "@fluentui/react-label": "^9.1.71",
+            "@fluentui/react-link": "^9.2.25",
+            "@fluentui/react-menu": "^9.14.8",
+            "@fluentui/react-message-bar": "^9.2.3",
+            "@fluentui/react-motion": "^9.2.0",
+            "@fluentui/react-overflow": "^9.1.22",
+            "@fluentui/react-persona": "^9.2.89",
+            "@fluentui/react-popover": "^9.9.12",
+            "@fluentui/react-portal": "^9.4.28",
+            "@fluentui/react-positioning": "^9.15.3",
+            "@fluentui/react-progress": "^9.1.79",
+            "@fluentui/react-provider": "^9.16.3",
+            "@fluentui/react-radio": "^9.2.24",
+            "@fluentui/react-rating": "^9.0.12",
+            "@fluentui/react-search": "^9.0.8",
+            "@fluentui/react-select": "^9.1.79",
+            "@fluentui/react-shared-contexts": "^9.19.0",
+            "@fluentui/react-skeleton": "^9.1.7",
+            "@fluentui/react-slider": "^9.1.86",
+            "@fluentui/react-spinbutton": "^9.2.79",
+            "@fluentui/react-spinner": "^9.4.9",
+            "@fluentui/react-swatch-picker": "^9.1.3",
+            "@fluentui/react-switch": "^9.1.86",
+            "@fluentui/react-table": "^9.15.8",
+            "@fluentui/react-tabs": "^9.4.24",
+            "@fluentui/react-tabster": "^9.22.0",
+            "@fluentui/react-tag-picker": "^9.1.1",
+            "@fluentui/react-tags": "^9.3.9",
+            "@fluentui/react-teaching-popover": "^9.1.8",
+            "@fluentui/react-text": "^9.4.20",
+            "@fluentui/react-textarea": "^9.3.79",
             "@fluentui/react-theme": "^9.1.19",
-            "@fluentui/react-toast": "^9.3.38",
-            "@fluentui/react-toolbar": "^9.1.79",
-            "@fluentui/react-tooltip": "^9.4.24",
-            "@fluentui/react-tree": "^9.4.39",
-            "@fluentui/react-utilities": "^9.18.7",
-            "@fluentui/react-virtualizer": "9.0.0-alpha.75",
-            "@griffel/react": "^1.5.14",
+            "@fluentui/react-toast": "^9.3.47",
+            "@fluentui/react-toolbar": "^9.1.87",
+            "@fluentui/react-tooltip": "^9.4.31",
+            "@fluentui/react-tree": "^9.7.1",
+            "@fluentui/react-utilities": "^9.18.10",
+            "@fluentui/react-virtualizer": "9.0.0-alpha.79",
+            "@griffel/react": "^1.5.22",
             "@swc/helpers": "^0.5.1"
           }
         },
         "@fluentui/react-infobutton": {
-          "version": "9.0.0-beta.101",
-          "resolved": "https://registry.npmjs.org/@fluentui/react-infobutton/-/react-infobutton-9.0.0-beta.101.tgz",
-          "integrity": "sha512-gX8Y8/cCc8LgfXtB4aJE+SRo3H3FA+DtWoGvmdaMLIWEoUbxv8sLSEl537MPGhlmTeu+ogXmA+c0RaFMJhvDsw==",
+          "version": "9.0.0-beta.102",
+          "resolved": "https://registry.npmjs.org/@fluentui/react-infobutton/-/react-infobutton-9.0.0-beta.102.tgz",
+          "integrity": "sha512-3kA4F0Vga8Ds6JGlBajLCCDOo/LmPuS786Wg7ui4ZTDYVIMzy1yp2XuVcZniifBFvEp0HQCUoDPWUV0VI3FfzQ==",
           "peer": true,
           "requires": {
-            "@fluentui/react-icons": "^2.0.235",
+            "@fluentui/react-icons": "^2.0.237",
             "@fluentui/react-jsx-runtime": "^9.0.36",
             "@fluentui/react-label": "^9.1.68",
-            "@fluentui/react-popover": "^9.9.5",
-            "@fluentui/react-tabster": "^9.20.1",
+            "@fluentui/react-popover": "^9.9.6",
+            "@fluentui/react-tabster": "^9.21.0",
             "@fluentui/react-theme": "^9.1.19",
             "@fluentui/react-utilities": "^9.18.7",
             "@griffel/react": "^1.5.14",
@@ -19510,31 +19908,71 @@
           }
         },
         "@fluentui/react-virtualizer": {
-          "version": "9.0.0-alpha.75",
-          "resolved": "https://registry.npmjs.org/@fluentui/react-virtualizer/-/react-virtualizer-9.0.0-alpha.75.tgz",
-          "integrity": "sha512-1ISbGEr4XVDcrSCQfnStc+yH3lD2bZuK2zg6cEouqZNBo6GdNFtvRU5Zi84CfOFeGMzO6NItHfBHLoJYqSYCSw==",
+          "version": "9.0.0-alpha.79",
+          "resolved": "https://registry.npmjs.org/@fluentui/react-virtualizer/-/react-virtualizer-9.0.0-alpha.79.tgz",
+          "integrity": "sha512-L2X9PKaH88VcA5LE7DxsmDZu3qy9N8fUIrvoYc4x6WXa2cAefwknvkPj/tezDvkTz3lttck5/MlEeu88qpUmtg==",
           "peer": true,
           "requires": {
-            "@fluentui/react-jsx-runtime": "^9.0.36",
-            "@fluentui/react-shared-contexts": "^9.17.0",
-            "@fluentui/react-utilities": "^9.18.7",
-            "@griffel/react": "^1.5.14",
+            "@fluentui/react-jsx-runtime": "^9.0.39",
+            "@fluentui/react-shared-contexts": "^9.19.0",
+            "@fluentui/react-utilities": "^9.18.10",
+            "@griffel/react": "^1.5.22",
             "@swc/helpers": "^0.5.1"
           }
         }
       }
     },
+    "@fluentui/react-motion": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-motion/-/react-motion-9.2.0.tgz",
+      "integrity": "sha512-gM38DObOXXEcE1xUe/c2bDd4J4wWwEeHghuIMOlQ+yElr8F4906bEv+gIlEbfSdACGDJ3SWixhGkxlAoAjaBow==",
+      "peer": true,
+      "requires": {
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@swc/helpers": "^0.5.1",
+        "react-is": "^17.0.2"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+          "peer": true
+        }
+      }
+    },
     "@fluentui/react-motion-preview": {
-      "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-motion-preview/-/react-motion-preview-0.5.19.tgz",
-      "integrity": "sha512-Gb77BuKbwVlpPZXm+nMAKp6jpjeAT7p6qFkW7YKan8CgDArxUFOLbo2CmpzysJKvd6z6ni21eEFd7gdD7N9p7Q==",
+      "version": "0.5.22",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-motion-preview/-/react-motion-preview-0.5.22.tgz",
+      "integrity": "sha512-ii8y7eQm5NEq+XUs9ul1AtiwF40l8DBKkEbvrm4Q1nd/pwl8Je4Aw2lzI0DnSS8NbKkZyGcdnhZ0HKZ6ap/auQ==",
       "peer": true,
       "requires": {
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
+        "@swc/helpers": "^0.5.1"
+      }
+    },
+    "@fluentui/react-nav-preview": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-nav-preview/-/react-nav-preview-0.3.0.tgz",
+      "integrity": "sha512-ka4yrRiQXPm3gexy6MtpOgPFdvgc2TOiHWlqLqE8pcPcwZpDkUVyYxlmvymQPjF7H8ohsl7YKjqdH5qYWoV0Uw==",
+      "peer": true,
+      "requires": {
+        "@fluentui/react-aria": "^9.12.0",
+        "@fluentui/react-button": "^9.3.83",
+        "@fluentui/react-context-selector": "^9.1.61",
+        "@fluentui/react-drawer": "^9.5.0",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.21.5",
+        "@fluentui/react-theme": "^9.1.19",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
@@ -19678,77 +20116,77 @@
       }
     },
     "@fluentui/react-overflow": {
-      "version": "9.1.17",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-overflow/-/react-overflow-9.1.17.tgz",
-      "integrity": "sha512-21QUisRSs4/aOSxDvSBSm6Tj7ow0WEECbLEI9Vvb7AuaIGGUWujTOuFIWehK9/ME9Ml/Uv23pHtTcBesc0JzOw==",
+      "version": "9.1.22",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-overflow/-/react-overflow-9.1.22.tgz",
+      "integrity": "sha512-h+mFyOdozdlyd0F7gzqMHyKk6jFgyAZutBwtMKiocxSSzyU44G5ZUS3hVAY6+qnVk7Ft8DkjHOZybv85naXuGA==",
       "peer": true,
       "requires": {
-        "@fluentui/priority-overflow": "^9.1.11",
-        "@fluentui/react-context-selector": "^9.1.58",
+        "@fluentui/priority-overflow": "^9.1.13",
+        "@fluentui/react-context-selector": "^9.1.62",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-persona": {
-      "version": "9.2.81",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-persona/-/react-persona-9.2.81.tgz",
-      "integrity": "sha512-LQnteXDG5C8Jlwgk4TQsHTNvHV9r1uqWRLEmKqDrrKFf2ApA3lHyHy1EEc8a5BwOv0ef1dpalqgnAuArXZrEiw==",
+      "version": "9.2.89",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-persona/-/react-persona-9.2.89.tgz",
+      "integrity": "sha512-WzQ9amNhtkKNP00Uf/5xopyci+Zo1oOg8uEkWhT69PwBYLdeLHu7RF5QFPz4U/HmlW8waR8vbH25GSHD2oo9oA==",
       "peer": true,
       "requires": {
-        "@fluentui/react-avatar": "^9.6.22",
-        "@fluentui/react-badge": "^9.2.32",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-avatar": "^9.6.30",
+        "@fluentui/react-badge": "^9.2.38",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-popover": {
-      "version": "9.9.5",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-popover/-/react-popover-9.9.5.tgz",
-      "integrity": "sha512-yhKaMAKlj+wnV2LzoBqUXlLe5l0EiHg8m2I4n9efXHIVGzyaZEkVc26rwSaxoTbUnFSS8NG1EG5EYqQGh3wiwA==",
+      "version": "9.9.12",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-popover/-/react-popover-9.9.12.tgz",
+      "integrity": "sha512-oyNiU/NIrRV7N/JUIyX0IZgQSBgrYZE4C4GEpxCkB/wd8IYuF4ws/hm18WMl8NomItiC04mMfOcaB/VH4/JS9A==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-positioning": "^9.14.4",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-positioning": "^9.15.3",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-portal": {
-      "version": "9.4.21",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-portal/-/react-portal-9.4.21.tgz",
-      "integrity": "sha512-FsDOmvvpC7OAFiwSAiSvvu/WoUUC4oMTQnY/zyotqnzKEyGS/6nMJ5Mr0gyzxtPDCzl6wIPAch5rVksseCm8vg==",
+      "version": "9.4.28",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-portal/-/react-portal-9.4.28.tgz",
+      "integrity": "sha512-QtG/rVQ0ekF7irZDlI5KKQqmeT7I9aVsawP5E2/XISejVwFc5AGboPlXELldhGqgWx0M3nNRNVk1QdKkc0PlEQ==",
       "peer": true,
       "requires": {
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1",
         "use-disposable": "^1.0.1"
       }
     },
     "@fluentui/react-portal-compat": {
-      "version": "9.0.140",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-portal-compat/-/react-portal-compat-9.0.140.tgz",
-      "integrity": "sha512-u+AxWHtD56NpDp4yd6sH6octW1F+xDkF7QIvPoqGd17ns62Brq9pDAIJDaBkEMhzGKwoTU0/1EA0rNYYkIYyZQ==",
+      "version": "9.0.150",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-portal-compat/-/react-portal-compat-9.0.150.tgz",
+      "integrity": "sha512-KgVioDG3Yohuand8fUuYlDA+3a9L+MWESiLirdbWMXEv8mYcd5gFxsnfry/ivX3/REzqxjCki0U+em86/CJrHg==",
       "peer": true,
       "requires": {
         "@fluentui/react-portal-compat-context": "^9.0.11",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-tabster": "^9.22.0",
         "@swc/helpers": "^0.5.1"
       }
     },
@@ -19762,32 +20200,32 @@
       }
     },
     "@fluentui/react-positioning": {
-      "version": "9.14.4",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-positioning/-/react-positioning-9.14.4.tgz",
-      "integrity": "sha512-mQz0C0iwRWy3g14laBcbbEEeoTb21dXn/ve8DNEJbVQ4P70MM43vCQeXWbHIDNw6HON+bIG3TyfNyFKQIpLwNA==",
+      "version": "9.15.3",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-positioning/-/react-positioning-9.15.3.tgz",
+      "integrity": "sha512-hW9CGHLlz5q+IlBdpTh1xtj2OZZ6abPcDQ4WjxWneWmG3jAf4sFkwS8ylvSZ7i7QcUk+ckVuCiuJsc/GjcRzKQ==",
       "peer": true,
       "requires": {
         "@floating-ui/devtools": "0.2.1",
         "@floating-ui/dom": "^1.2.0",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-progress": {
-      "version": "9.1.72",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-progress/-/react-progress-9.1.72.tgz",
-      "integrity": "sha512-+pXMRybkZx5qjz3Cfnuj0ntzT6gvLlqukSPHGaneFHOMbivWz9TjVj/FCGIwy6OrY3nAQcgk92zN5sapgM0Nsw==",
+      "version": "9.1.79",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-progress/-/react-progress-9.1.79.tgz",
+      "integrity": "sha512-NBHnpcOKQ9OOKnAIVd3HW4cn/yv7xjureJxn8EM2Om7ZBPS5HrKJqZHwJVrUE/QJ4WssTfiU8MipKwWwot+8Vg==",
       "peer": true,
       "requires": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
@@ -19803,89 +20241,89 @@
       }
     },
     "@fluentui/react-provider": {
-      "version": "9.14.0",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-provider/-/react-provider-9.14.0.tgz",
-      "integrity": "sha512-uau0iv04ncFJLkRqKF1tFS8mUqumMBLc+n9CvUE8MK6/QXqHwcWPMUr09dCOsVAB6zpjiQO+4yHBZlja6RKKxA==",
+      "version": "9.16.3",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-provider/-/react-provider-9.16.3.tgz",
+      "integrity": "sha512-rF3FFvqsXPshpgk+nq1sxwzysFKRPFM0fV872qP/kHiyUU7IpEyRU8HcSU5j8sFgpRSNVatAjiD0I+rvy6ekjg==",
       "peer": true,
       "requires": {
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/core": "^1.14.1",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/core": "^1.16.0",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-radio": {
-      "version": "9.2.16",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-radio/-/react-radio-9.2.16.tgz",
-      "integrity": "sha512-H5NzFFYYkQ2osE7Rh96DjWRgI24POZoaBnjJrUvds5B/3Jod4905c2VsP6MSvkr+cslVRnO55OCeBX7MlqP17g==",
+      "version": "9.2.24",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-radio/-/react-radio-9.2.24.tgz",
+      "integrity": "sha512-Wl19e4CQo4Fv2A+x0ta3rS2F1OMTL7mF4qVfdfhdTOTH2J/0WmmFPrz26E2ZhqENKivIv1+NXEV/KgpPFbWF0w==",
       "peer": true,
       "requires": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-label": "^9.1.68",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-label": "^9.1.71",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-rating": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-rating/-/react-rating-9.0.4.tgz",
-      "integrity": "sha512-AieJyOO6Ldflfr8IxbUYkBpEDKOm+zPJJhtzUVQrb/kqJOsCDknPoO4UkL3VbfjN8QGCQ353Aq1ZX2svL5ar3Q==",
+      "version": "9.0.12",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-rating/-/react-rating-9.0.12.tgz",
+      "integrity": "sha512-d7fIVckXzdno4eXdN/bv9mdarvVxNh54CJJVO3/aNK8dfrcqH9NXPp4bCg+lCAYYr8fQVbe25OiUUFhYtaOJ+w==",
       "peer": true,
       "requires": {
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-search": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-search/-/react-search-9.0.1.tgz",
-      "integrity": "sha512-Hz/44MwKCaSjoGSxzwE9pu/cj0XtjeNNl2ky3aRYgvmfHTIMGc2c72vhxp98EYrVolyV7ijCdm3AnwWW7aA6Kw==",
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-search/-/react-search-9.0.8.tgz",
+      "integrity": "sha512-Zbb3pUjLCeEUzxy2WS+gsZsk8PGLUHAeW8RWHSIsHJEe4zZmNfJxv1PI8DrOd3a08UiOfR5q5PixZ32oCWWtUg==",
       "peer": true,
       "requires": {
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-input": "^9.4.72",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-input": "^9.4.79",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-select": {
-      "version": "9.1.72",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-select/-/react-select-9.1.72.tgz",
-      "integrity": "sha512-xtdiK++/aT49xT/JRSNhOSwgfMR/OcifShXrLCx1WNG78yXMCFOv7J2/i+01MsPZHZDo7EYWgxKmAYZ0+e4TIw==",
+      "version": "9.1.79",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-select/-/react-select-9.1.79.tgz",
+      "integrity": "sha512-E9EuUIUy2MzHRkQPmXyJp5txVo5EYH+lNoV3xgZKd9zijg7QQJWxfgbNJqddubmnRdr8MtBt/fM4qmHia5cgSQ==",
       "peer": true,
       "requires": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-shared-contexts": {
-      "version": "9.17.0",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-shared-contexts/-/react-shared-contexts-9.17.0.tgz",
-      "integrity": "sha512-SvfFmzzy0QfhaCrGcUJFJcscc6NGyuoYxT0Q8wgu5ol3vZ+idvVgGIJbhwQFVT08Ph5yR6FsWS22/nLjTqE58A==",
+      "version": "9.19.0",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-shared-contexts/-/react-shared-contexts-9.19.0.tgz",
+      "integrity": "sha512-KWHRVuKSvQpFdGGxj802AwoHlq7VyFKaj89cgX2pBu2ZqZrdpxkbkfFQIvxLoaZ/Bzm7fWXVQrDYpj+8JHAfCA==",
       "peer": true,
       "requires": {
         "@fluentui/react-theme": "^9.1.19",
@@ -19893,205 +20331,246 @@
       }
     },
     "@fluentui/react-skeleton": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-skeleton/-/react-skeleton-9.1.0.tgz",
-      "integrity": "sha512-eV+UbqZ3Xq8aShusyDnGrex9NG+7wcmvnKiTY8aOAf4Kl5XJwNr8WE5nHcHO3pyIsX6bQQcvSWsyxMw5rJy/Ag==",
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-skeleton/-/react-skeleton-9.1.7.tgz",
+      "integrity": "sha512-2Ve7NZ1LyssPgztw+K55znY/uiZRx/g8Iif7L6ETvvcn3nE3WZFWISLfVdCF7SQBTa+oV+gDBjUKpEZcFA512Q==",
       "peer": true,
       "requires": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-slider": {
-      "version": "9.1.78",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-slider/-/react-slider-9.1.78.tgz",
-      "integrity": "sha512-0+SC1TG6smvlK21MU6DCO6dEGtnFNa/Zt2VqNxP2h56iusdPzDwqj2UQre5S6tfigR1fCAMEMeOkerOpXKWW/g==",
+      "version": "9.1.86",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-slider/-/react-slider-9.1.86.tgz",
+      "integrity": "sha512-icgE/5iYx69DQLcOlPicATxQJcNBYg2uJGvVgzVhhLuXy87mkqv7Lh5YFfmcMpMSWbOhoEbDle73MMTDu8UC9g==",
       "peer": true,
       "requires": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-spinbutton": {
-      "version": "9.2.72",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-spinbutton/-/react-spinbutton-9.2.72.tgz",
-      "integrity": "sha512-79/IfTrRWmsq4C09q6nZsCGBsHSbfLCsTe8WI13sB0zWBlCDQVXOwsi7XuS8DbO3jmT8eUggJbaYEn4h/8iHHQ==",
+      "version": "9.2.79",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-spinbutton/-/react-spinbutton-9.2.79.tgz",
+      "integrity": "sha512-qqe7eQ4ra3Iu/RhZHXxjnYqhH9GNPr1FlTSqPRIHa7Kf0/0Hrig+gLQYw7N5BXzDSU4+cz29/9PyXowdg5mBLQ==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-spinner": {
-      "version": "9.4.5",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-spinner/-/react-spinner-9.4.5.tgz",
-      "integrity": "sha512-Kg5NUB2UrViDiBEKNdV7UVN4mPxeZF5seUm7qZP4hBSKf90oj2xcJ+BKggQg++MelDLMFeLnTE1pJO/Lv/ovbA==",
+      "version": "9.4.9",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-spinner/-/react-spinner-9.4.9.tgz",
+      "integrity": "sha512-+X9OmvDIhdwdiKO7I0CKrgjiS5Y2DzSVgkONMmpuu6u+DywhgLWh1JLatCiEl8Qp2/cBlg32XNfBl0lAfQHHFw==",
       "peer": true,
       "requires": {
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-label": "^9.1.68",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-label": "^9.1.71",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
+        "@swc/helpers": "^0.5.1"
+      }
+    },
+    "@fluentui/react-swatch-picker": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-swatch-picker/-/react-swatch-picker-9.1.3.tgz",
+      "integrity": "sha512-L8EE6jTOzQe1jLsZuZCWEUiNq3bkOYrmvwtHvHRCBLcdD6+fOcYxvZP9PIBLgkj+hNSf7E4A/8Kol/SOn419Wg==",
+      "peer": true,
+      "requires": {
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
+        "@fluentui/react-theme": "^9.1.19",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-switch": {
-      "version": "9.1.78",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-switch/-/react-switch-9.1.78.tgz",
-      "integrity": "sha512-pyqKSXE5vglqkGS9UXIQe/l2Q78t/PFPuiCbfEr1c8TYhzdQWXJq2WkK5WbrZAwLRL9AEbhCmoD1Lig9PXvGHQ==",
+      "version": "9.1.86",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-switch/-/react-switch-9.1.86.tgz",
+      "integrity": "sha512-tcgkSv+VwT4QzP/wuMT472R5oZJtiUhbLnSgMWGlyuETBMDMF0Vp3SNkp8noalTyNHPnrJgylKgUuKtt3MyL1Q==",
       "peer": true,
       "requires": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-label": "^9.1.68",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-label": "^9.1.71",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-table": {
-      "version": "9.15.0",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-table/-/react-table-9.15.0.tgz",
-      "integrity": "sha512-uvdmF7JdlYZ5jXi8Y7M4KB2TmNNm9+oTevwiF3BmnQVLCoHq0lX1Mlv12gLRuztAuHiTOsNcPETZTbUjlf1GZg==",
+      "version": "9.15.8",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-table/-/react-table-9.15.8.tgz",
+      "integrity": "sha512-awEJcDF+LX0xCpIArGBRwUh4/4vw0rJcwVnmlujn2DoYBwasUoyL9QYZF2W5U+XnHazYBgX7Bm+JMJ7awVdSVQ==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-avatar": "^9.6.22",
-        "@fluentui/react-checkbox": "^9.2.21",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-radio": "^9.2.16",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-avatar": "^9.6.30",
+        "@fluentui/react-checkbox": "^9.2.29",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-radio": "^9.2.24",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-tabs": {
-      "version": "9.4.17",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-tabs/-/react-tabs-9.4.17.tgz",
-      "integrity": "sha512-ZdzS46h2FW8dZOLCZPkrnvYEE6dD4HRYN6M4/RGqiN8dT8jWxj0FBZSNpp6gGTCftADr6k675GqKWoGmnr2ctA==",
+      "version": "9.4.24",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-tabs/-/react-tabs-9.4.24.tgz",
+      "integrity": "sha512-HBy+TNI0XoC1WqLjIAWokW5HeCD59h//Cy+nHELI4xSVc3gbWDb2KLRptDLYawcDT9hsUnwxtnSXmQgnGLhH2A==",
       "peer": true,
       "requires": {
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-tabster": {
-      "version": "9.20.1",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-tabster/-/react-tabster-9.20.1.tgz",
-      "integrity": "sha512-dDm18fThjQfDYL5dH2WdcECdbYNe0T8sn6j2RGP3V6cxqCwXpAI+zfquIAjqkgoR9bn/XDDSkUKTyxrFMrVMVA==",
+      "version": "9.22.0",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-tabster/-/react-tabster-9.22.0.tgz",
+      "integrity": "sha512-R61y6/kRWjA8UP9F/wMvOBtOFM1frgiQA0zF49BfrQvwnJMFEYidaLsc1e6IkNS34IiwpsESaIIOlDMn5mUXzg==",
       "peer": true,
       "requires": {
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1",
-        "keyborg": "^2.5.0",
-        "tabster": "^7.1.0"
+        "keyborg": "^2.6.0",
+        "tabster": "^8.0.0"
       }
     },
-    "@fluentui/react-tags": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-tags/-/react-tags-9.3.1.tgz",
-      "integrity": "sha512-tzfMFmM3q4Rl65M7qDSIHSNM6PLMcctLfjpt0qBj//OriomJ1cG0N1tmEXRVWlq3BMeGI+xIXCXktrl/2xbpCA==",
+    "@fluentui/react-tag-picker": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-tag-picker/-/react-tag-picker-9.1.1.tgz",
+      "integrity": "sha512-S4RRX4TMm/EwxaHIDIrTJMIv4YXa849BTQuS9WUO/QKO4dlRiC1E5LdS8jm6Fo0wQRr/MVasG6EkGJ8atm6ruw==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-avatar": "^9.6.22",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-combobox": "^9.11.8",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-positioning": "^9.15.3",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
+        "@fluentui/react-tags": "^9.3.9",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
-    "@fluentui/react-teaching-popover": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-teaching-popover/-/react-teaching-popover-9.1.0.tgz",
-      "integrity": "sha512-KBeCqzoPc8jiGTQmvEABJuxcJHyM2sp/hSNLpdl68zniqXCJCvqY3o02Av1xWRjmyFKn7Lt5q6MTs5ZkaEYcYQ==",
+    "@fluentui/react-tags": {
+      "version": "9.3.9",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-tags/-/react-tags-9.3.9.tgz",
+      "integrity": "sha512-hwriI1Uj4rI5qQ0A8FrAlCHJ9pZCo8mwWM0VTKpssN5vK4nqcSpiMq91mw810+GUlNiXnTW+gZCn0RlaryCQFw==",
       "peer": true,
       "requires": {
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-button": "^9.3.76",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-popover": "^9.9.5",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/keyboard-keys": "^9.0.7",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-avatar": "^9.6.30",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
+        "@swc/helpers": "^0.5.1"
+      }
+    },
+    "@fluentui/react-teaching-popover": {
+      "version": "9.1.8",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-teaching-popover/-/react-teaching-popover-9.1.8.tgz",
+      "integrity": "sha512-idi9GeIm4Hl3pcnELhN1mxvK9eIVCqdEES1IeTSGpEUHsjGiRZCmBV+Z6upv9HSpiTM+zJnCQPXCwp7x5KDP9Q==",
+      "peer": true,
+      "requires": {
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-button": "^9.3.84",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-popover": "^9.9.12",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
+        "@fluentui/react-theme": "^9.1.19",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1",
         "use-sync-external-store": "^1.2.0"
       }
     },
     "@fluentui/react-text": {
-      "version": "9.4.16",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-text/-/react-text-9.4.16.tgz",
-      "integrity": "sha512-rgdLtbY6rHdFrxNWqflh88aEqqONWBgoMA6xEOQix357E3A5J7S8NJSlKAsd00zQO5gFRiKO+gr5iiRFVKDqeA==",
+      "version": "9.4.20",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-text/-/react-text-9.4.20.tgz",
+      "integrity": "sha512-9ulw77qtUfxmgFTIC3UwzCyw0mn9xWV16VZ3j8MzDeLOapvGUz4UnvOV8aLXIWmI7VbeEVRRcQ5eFMvL6dbhRQ==",
       "peer": true,
       "requires": {
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-textarea": {
-      "version": "9.3.72",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-textarea/-/react-textarea-9.3.72.tgz",
-      "integrity": "sha512-lLYtumX6CxHPbsTP2W+PX6ehWGlZXAKpcgqrhCU4YGxNAdD7FbBO30SIQMAgQ6ygWMAZRztGGRQYkihFz8SeiQ==",
+      "version": "9.3.79",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-textarea/-/react-textarea-9.3.79.tgz",
+      "integrity": "sha512-7nAMBINpKWgvftXvKdynppiLhv0+O97bMwoLyhUdHnBu0fJi/2yYXlsCh1RFAaBg07qc+wqdQX1TdI4ad2nluQ==",
       "peer": true,
       "requires": {
-        "@fluentui/react-field": "^9.1.62",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-field": "^9.1.68",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
@@ -20106,93 +20585,93 @@
       }
     },
     "@fluentui/react-toast": {
-      "version": "9.3.38",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-toast/-/react-toast-9.3.38.tgz",
-      "integrity": "sha512-oGLdXgObrDCpWzGoM+AKEz1QmwvIix9xCyA2Tf5j9n4kuXAzN9QQZCrS0qVt+I43SboUdsvW8VT+06oSdNPNUA==",
+      "version": "9.3.47",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-toast/-/react-toast-9.3.47.tgz",
+      "integrity": "sha512-sFvdp8OOniYMasIIQB2kwZkezb8lx7mw14RtnPyUG/E8bo5j96uVEZWVH8nAbZGezxSi2X75WZbplla55vhJ6Q==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-motion": "^9.2.0",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
-        "@swc/helpers": "^0.5.1",
-        "react-transition-group": "^4.4.1"
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
+        "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-toolbar": {
-      "version": "9.1.79",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-toolbar/-/react-toolbar-9.1.79.tgz",
-      "integrity": "sha512-9PnMPBh9Yz519qJad18fxe8mQxeLipkB2X9E7xfqMk0zJM1Yni2PmyjuFfJZlgMipkdD26/G1P+gqt45O+b4oQ==",
-      "peer": true,
-      "requires": {
-        "@fluentui/react-button": "^9.3.76",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-divider": "^9.2.67",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-radio": "^9.2.16",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+      "version": "9.1.87",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-toolbar/-/react-toolbar-9.1.87.tgz",
+      "integrity": "sha512-jxi5cSw4tj++goEjz85prAJdsfRSqZhY0IV4UAhYvcQLaNaR1mqdJzjynXWHwf5SyKj7u4lsgfJ8XYibBL9/JA==",
+      "peer": true,
+      "requires": {
+        "@fluentui/react-button": "^9.3.84",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-divider": "^9.2.70",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-radio": "^9.2.24",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-tooltip": {
-      "version": "9.4.24",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-tooltip/-/react-tooltip-9.4.24.tgz",
-      "integrity": "sha512-TJNP3KBZID+yLc4BlJ0A4lrB7SlelI9RPgpFs7En5AR35eqKsRriGLiiIj3cAeKh7BvvH+dNCDjg6zo82rbytQ==",
+      "version": "9.4.31",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-tooltip/-/react-tooltip-9.4.31.tgz",
+      "integrity": "sha512-e6DZgYWDwzt1i0guZjUIrBxuX8sQ1KZg/snJ4puM6IWpbUC2dLahBvOdJbAZopyFRwhsvP37Cey4nTrwhhDVSA==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-portal": "^9.4.21",
-        "@fluentui/react-positioning": "^9.14.4",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-portal": "^9.4.28",
+        "@fluentui/react-positioning": "^9.15.3",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-tree": {
-      "version": "9.4.39",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-tree/-/react-tree-9.4.39.tgz",
-      "integrity": "sha512-3Zab9biXU+ds2Vx59NGuDksYtGNLuVrAxWQxTmXDbGQ0Y8ogPTA82t52Nf2vRbygzw8PV4dBfwbgau6uQgFNNQ==",
+      "version": "9.7.1",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-tree/-/react-tree-9.7.1.tgz",
+      "integrity": "sha512-zyUW0NwuafZE1618ssOmBZidHg6Luccgmz67XO3zhv5VlVYvMnr1ci55tgyp4L1SY2P/6hVB216EVK0c7oJA6w==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-aria": "^9.10.5",
-        "@fluentui/react-avatar": "^9.6.22",
-        "@fluentui/react-button": "^9.3.76",
-        "@fluentui/react-checkbox": "^9.2.21",
-        "@fluentui/react-context-selector": "^9.1.58",
-        "@fluentui/react-icons": "^2.0.235",
-        "@fluentui/react-jsx-runtime": "^9.0.36",
-        "@fluentui/react-radio": "^9.2.16",
-        "@fluentui/react-shared-contexts": "^9.17.0",
-        "@fluentui/react-tabster": "^9.20.1",
+        "@fluentui/react-aria": "^9.12.1",
+        "@fluentui/react-avatar": "^9.6.30",
+        "@fluentui/react-button": "^9.3.84",
+        "@fluentui/react-checkbox": "^9.2.29",
+        "@fluentui/react-context-selector": "^9.1.62",
+        "@fluentui/react-icons": "^2.0.239",
+        "@fluentui/react-jsx-runtime": "^9.0.39",
+        "@fluentui/react-radio": "^9.2.24",
+        "@fluentui/react-shared-contexts": "^9.19.0",
+        "@fluentui/react-tabster": "^9.22.0",
         "@fluentui/react-theme": "^9.1.19",
-        "@fluentui/react-utilities": "^9.18.7",
-        "@griffel/react": "^1.5.14",
+        "@fluentui/react-utilities": "^9.18.10",
+        "@griffel/react": "^1.5.22",
         "@swc/helpers": "^0.5.1"
       }
     },
     "@fluentui/react-utilities": {
-      "version": "9.18.7",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-utilities/-/react-utilities-9.18.7.tgz",
-      "integrity": "sha512-voVd4xrx+9VxCPYt51JlzLuJYsjCf3LYjoytAyruu7kEOkPF31Fnjkmp81yrXnAbM+J+tL8HajG5bUHjt8H59w==",
+      "version": "9.18.10",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-utilities/-/react-utilities-9.18.10.tgz",
+      "integrity": "sha512-1yUFZrJyBO1qizHa20S35JATQwr0QoTZ5vBmov0K49BWxDpJxpiAClMpFaMlw0hj9cI7HMLFF8Y87OhUYvaheQ==",
       "peer": true,
       "requires": {
         "@fluentui/keyboard-keys": "^9.0.7",
-        "@fluentui/react-shared-contexts": "^9.17.0",
+        "@fluentui/react-shared-contexts": "^9.19.0",
         "@swc/helpers": "^0.5.1"
       }
     },
@@ -20210,19 +20689,19 @@
       }
     },
     "@fluentui/react-window-provider": {
-      "version": "2.2.18",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.18.tgz",
-      "integrity": "sha512-nBKqxd0P8NmIR0qzFvka1urE2LVbUm6cse1I1T7TcOVNYa5jDf5BrO06+JRZfwbn00IJqOnIVoP0qONqceypWQ==",
+      "version": "2.2.27",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.27.tgz",
+      "integrity": "sha512-Dg0G9bizjryV0Q/r0CPtCVTPa2II/EsT9E6JT3jPSALjQADDLlW4/+ZXbcEC7geZ/40+KpZDmhplvk/AJSFBKg==",
       "peer": true,
       "requires": {
-        "@fluentui/set-version": "^8.2.14",
+        "@fluentui/set-version": "^8.2.23",
         "tslib": "^2.1.0"
       }
     },
     "@fluentui/set-version": {
-      "version": "8.2.14",
-      "resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.2.14.tgz",
-      "integrity": "sha512-f/QWJnSeyfAjGAqq57yjMb6a5ejPlwfzdExPmzFBuEOuupi8hHbV8Yno12XJcTW4I0KXEQGw+PUaM1aOf/j7jw==",
+      "version": "8.2.23",
+      "resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.2.23.tgz",
+      "integrity": "sha512-VPXaBsiaa3Xn/AY40nLU9bvDQ62lpMVnFzFTlQ8CbpdwrjxNlRxDUY5vRToNzp1+Zu5gD/+CgsXqIZGcry5L5w==",
       "peer": true,
       "requires": {
         "tslib": "^2.1.0"
@@ -20284,14 +20763,15 @@
       }
     },
     "@fluentui/utilities": {
-      "version": "8.13.24",
-      "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.13.24.tgz",
-      "integrity": "sha512-/jo6hWCzTGCx06l2baAMwsjjBZ/dyMouls53uNaQLUGUUhUwXh/DcDDXMqLRJB3MaH9zvgfvRw61iKmm2s9fIA==",
+      "version": "8.15.12",
+      "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.15.12.tgz",
+      "integrity": "sha512-rDykd3jdIgeIT8vxW66JVS2kipCD2P+NXmjG/uKiRe/OylPSdv0KcewkwcysFYN6XkdVZ/FEKHVRUjD1ejRnxQ==",
       "peer": true,
       "requires": {
-        "@fluentui/dom-utilities": "^2.2.14",
-        "@fluentui/merge-styles": "^8.5.15",
-        "@fluentui/set-version": "^8.2.14",
+        "@fluentui/dom-utilities": "^2.3.7",
+        "@fluentui/merge-styles": "^8.6.12",
+        "@fluentui/react-window-provider": "^2.2.27",
+        "@fluentui/set-version": "^8.2.23",
         "tslib": "^2.1.0"
       }
     },
@@ -20441,6 +20921,75 @@
         "@monaco-editor/loader": "^1.4.0"
       }
     },
+    "@next/env": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.4.tgz",
+      "integrity": "sha512-3EtkY5VDkuV2+lNmKlbkibIJxcO4oIHEhBWne6PaAp+76J9KoSsGvNikp6ivzAT8dhhBMYrm6op2pS1ApG0Hzg==",
+      "peer": true
+    },
+    "@next/swc-darwin-arm64": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.4.tgz",
+      "integrity": "sha512-AH3mO4JlFUqsYcwFUHb1wAKlebHU/Hv2u2kb1pAuRanDZ7pD/A/KPD98RHZmwsJpdHQwfEc/06mgpSzwrJYnNg==",
+      "optional": true,
+      "peer": true
+    },
+    "@next/swc-darwin-x64": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.4.tgz",
+      "integrity": "sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==",
+      "optional": true,
+      "peer": true
+    },
+    "@next/swc-linux-arm64-gnu": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.4.tgz",
+      "integrity": "sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==",
+      "optional": true,
+      "peer": true
+    },
+    "@next/swc-linux-arm64-musl": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.4.tgz",
+      "integrity": "sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==",
+      "optional": true,
+      "peer": true
+    },
+    "@next/swc-linux-x64-gnu": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.4.tgz",
+      "integrity": "sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==",
+      "optional": true,
+      "peer": true
+    },
+    "@next/swc-linux-x64-musl": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.4.tgz",
+      "integrity": "sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==",
+      "optional": true,
+      "peer": true
+    },
+    "@next/swc-win32-arm64-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.4.tgz",
+      "integrity": "sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==",
+      "optional": true,
+      "peer": true
+    },
+    "@next/swc-win32-ia32-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.4.tgz",
+      "integrity": "sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==",
+      "optional": true,
+      "peer": true
+    },
+    "@next/swc-win32-x64-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.4.tgz",
+      "integrity": "sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==",
+      "optional": true,
+      "peer": true
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -20673,9 +21222,9 @@
       }
     },
     "@rjsf/core": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.17.1.tgz",
-      "integrity": "sha512-COZSuumwHskWN8Pz3RxdxvuQUP6M/qBMXAkIi+TSWLFLaF6SUugpLiceMT1jGemDCr7fOSTiPxjkToSsgpvueQ==",
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.18.4.tgz",
+      "integrity": "sha512-OUPC+l44X1geYT9sSsmQC2pakvFWCQB+5Iy/ITfLMJq3MIjJn0gakCwYHXMMBGUAKM1SSMIyKWyCazt3kY9fhg==",
       "peer": true,
       "requires": {
         "lodash": "^4.17.21",
@@ -20686,9 +21235,9 @@
       }
     },
     "@rjsf/fluentui-rc": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/@rjsf/fluentui-rc/-/fluentui-rc-5.17.1.tgz",
-      "integrity": "sha512-HGCGIDTgYbU5Ch739RoHbd1YG2qWsWdyAMQMDwBnyCirgV26UqTKLOed88CTkPheVgEJq4rFleFw/L+Or1UWzA==",
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/@rjsf/fluentui-rc/-/fluentui-rc-5.18.4.tgz",
+      "integrity": "sha512-lkRaVrh2Hm6AtzSxMAUeP5lOBPKGhAEAzUpQoGSdY6Y2QXaGYku69Dfp0zm2zfAcO5kWdLCTSNcHQONuxJnVHQ==",
       "peer": true,
       "requires": {
         "@fluentui/react-components": "^9.46.3",
@@ -20697,9 +21246,9 @@
       }
     },
     "@rjsf/utils": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.17.1.tgz",
-      "integrity": "sha512-q1Igz/cuM2hi+jiXFkoaXqdRTUFB+a0jfVKNmZlHmvPmfYeeJfcfyOTzO8dQ41fHNHUFb15ryxa/TblDQimwkA==",
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.18.4.tgz",
+      "integrity": "sha512-svLMk5aW6q3JQRYVTJradFc9tLeQ1vX5/k6fPwxf+08eweqPbINq7aokLBSStUNr8FfYgThTl8IfehLoVP2dvw==",
       "peer": true,
       "requires": {
         "json-schema-merge-allof": "^0.8.1",
@@ -20710,9 +21259,9 @@
       }
     },
     "@rjsf/validator-ajv8": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.17.1.tgz",
-      "integrity": "sha512-KdvHsjDQ60b04fqnoqhfkiCv7E4n4NIHli8QU8dtpuUAVS/TOqDuOtDJVz6bv/rd/QNROGpxlO/OCccE0rmxLQ==",
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.18.4.tgz",
+      "integrity": "sha512-D0bUtruWbUmXG8z3VBbCky0Cx65rmcdG/QypB9ri5YTSNTQIxuq28StBpZUZn84CO/oMOtociGy4afW1aj5C0g==",
       "peer": true,
       "requires": {
         "ajv": "^8.12.0",
@@ -20931,6 +21480,12 @@
         "read-pkg-up": "^7.0.0"
       }
     },
+    "@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "peer": true
+    },
     "@swc/helpers": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.6.tgz",
@@ -21845,6 +22400,15 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true
     },
+    "busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "peer": true,
+      "requires": {
+        "streamsearch": "^1.1.0"
+      }
+    },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -23588,8 +24152,7 @@
     "graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
     "handle-thing": {
       "version": "2.0.1",
@@ -24375,9 +24938,9 @@
       }
     },
     "keyborg": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/keyborg/-/keyborg-2.5.0.tgz",
-      "integrity": "sha512-nb4Ji1suqWqj6VXb61Jrs4ab/UWgtGph4wDch2NIZDfLBUObmLcZE0aiDjZY49ghtu03fvwxDNvS9ZB0XMz6/g==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/keyborg/-/keyborg-2.6.0.tgz",
+      "integrity": "sha512-o5kvLbuTF+o326CMVYpjlaykxqYP9DphFQZ2ZpgrvBouyvOxyEB7oqe8nOLFpiV5VCtz0D3pt8gXQYWpLpBnmA==",
       "peer": true
     },
     "kind-of": {
@@ -24790,6 +25353,53 @@
       "integrity": "sha512-EZSPZB70jiVsivaBLYDCyntd5eH8NTSMOn3rB+HxwdmKThGELLdYv8qVIMWvZEFy9w8ZZpW9h9OB32l1rGtj7g==",
       "dev": true
     },
+    "next": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.4.tgz",
+      "integrity": "sha512-R8/V7vugY+822rsQGQCjoLhMuC9oFj9SOi4Cl4b2wjDrseD0LRZ10W7R6Czo4w9ZznVSshKjuIomsRjvm9EKJQ==",
+      "peer": true,
+      "requires": {
+        "@next/env": "14.2.4",
+        "@next/swc-darwin-arm64": "14.2.4",
+        "@next/swc-darwin-x64": "14.2.4",
+        "@next/swc-linux-arm64-gnu": "14.2.4",
+        "@next/swc-linux-arm64-musl": "14.2.4",
+        "@next/swc-linux-x64-gnu": "14.2.4",
+        "@next/swc-linux-x64-musl": "14.2.4",
+        "@next/swc-win32-arm64-msvc": "14.2.4",
+        "@next/swc-win32-ia32-msvc": "14.2.4",
+        "@next/swc-win32-x64-msvc": "14.2.4",
+        "@swc/helpers": "0.5.5",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "dependencies": {
+        "@swc/helpers": {
+          "version": "0.5.5",
+          "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+          "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+          "peer": true,
+          "requires": {
+            "@swc/counter": "^0.1.3",
+            "tslib": "^2.4.0"
+          }
+        },
+        "postcss": {
+          "version": "8.4.31",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+          "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+          "peer": true,
+          "requires": {
+            "nanoid": "^3.3.6",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        }
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -28737,8 +29347,7 @@
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
     "source-map-support": {
       "version": "0.5.21",
@@ -28885,6 +29494,12 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "peer": true
+    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -29032,6 +29647,15 @@
         }
       }
     },
+    "styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "peer": true,
+      "requires": {
+        "client-only": "0.0.1"
+      }
+    },
     "stylis": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
@@ -29085,12 +29709,12 @@
       }
     },
     "tabster": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/tabster/-/tabster-7.1.1.tgz",
-      "integrity": "sha512-3VsXUb0XxVcFq9NmzTieAJAlruMiaj/dvXIHm7RgjsUrMGkEcq9KbBdai05NAGp2D2d/CxHc6j1mbuUzGofWBA==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/tabster/-/tabster-8.0.0.tgz",
+      "integrity": "sha512-82pqhDwH3uq7hVcy1nOo7lyYgCJcVUPqb30hvoHtX8DQ5pxEtRz9+FqVcW5w7J6kTjNBBu7cwKvuMy9qoeQt1g==",
       "peer": true,
       "requires": {
-        "keyborg": "2.5.0",
+        "keyborg": "2.6.0",
         "tslib": "^2.3.1"
       }
     },
diff --git a/packages/designer/package.json b/packages/designer/package.json
index 77dbba7..9e68da4 100644
--- a/packages/designer/package.json
+++ b/packages/designer/package.json
@@ -9,19 +9,19 @@
     "@eavfw/designer": "^1.1.1",
     "@eavfw/designer-core": "^1.1.1",
     "@eavfw/designer-nodes": "^1.1.2",
-    
-    "@eavfw/apps": "^1.4.0-vnext.27",
-    "@eavfw/manifest": "^1.5.0-vnext.10",
+
+    "@eavfw/apps": "^1.4.0-vnext.33",
+    "@eavfw/manifest": "^1.5.0-vnext.15",
     "@eavfw/forms": "^1.2.0-vnext.8",
-    "@eavfw/utils": "^1.1.0-vnext.1",
+    "@eavfw/utils": "^1.1.0-vnext.2",
 
     "pako": "^2.0.4",
     "@fluentui/react-components": "=>9.46.0 <9.49.2",
     "@craftjs/core": "^0.2.4",
-    "@rjsf/core": "5.17.1",
-    "@rjsf/fluentui-rc": "5.17.1",
-    "@rjsf/validator-ajv8": "5.17.1",
-    "@rjsf/utils": "5.17.1"
+    "@rjsf/core": "5.18.4",
+    "@rjsf/fluentui-rc": "5.18.4",
+    "@rjsf/validator-ajv8": "5.18.4",
+    "@rjsf/utils": "5.18.4"
   },
   "devDependencies": {
     "@types/pako": "2.0.3"
diff --git a/packages/designer/src/Components/Drawers/QuestionTreeItem.tsx b/packages/designer/src/Components/Drawers/QuestionTreeItem.tsx
index 04b8ef0..b93e62e 100644
--- a/packages/designer/src/Components/Drawers/QuestionTreeItem.tsx
+++ b/packages/designer/src/Components/Drawers/QuestionTreeItem.tsx
@@ -119,7 +119,7 @@ const QuestionTreeItem: React.FC<QuestionTreeItemProps> = ({ setView, setActiveQ
                                     icon={<TrashCanIcon />}
                                 />
                             </>
-                        }}>
+                        }}>                       
                         {question.logicalName ? key : question.text}
                     </TreeItemLayout>
                 </TreeItem>
diff --git a/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx b/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx
index 09c8aff..4064ec3 100644
--- a/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx
+++ b/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx
@@ -107,10 +107,10 @@ export const QuickFormSettingsViewHeader: React.FC = () => {
                         </DialogContent>
                         <DialogActions>
                             <DialogTrigger disableButtonEnhancement>
-                                <Button appearance="secondary">Close</Button>
+                                <Button appearance="secondary">Discard</Button>
                             </DialogTrigger>
                             <Button type="submit" appearance="primary" onClick={handleSubmit}>
-                                Submit
+                                Update
                             </Button>
                         </DialogActions>
                     </DialogBody>
diff --git a/packages/inputs/select/package.json b/packages/inputs/select/package.json
index 86b4bc3..37ff2ac 100644
--- a/packages/inputs/select/package.json
+++ b/packages/inputs/select/package.json
@@ -6,11 +6,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "@eavfw/quickform-core": "*",
-    "@rjsf/core": "5.17.1",
-    "@fluentui/react-components": "=>9.46.0 <9.49.2",
+    "@rjsf/core": "^5.18.4",
+    "@fluentui/react-components": "^9.54.0",
     "@fluentui/react-icons": "^2.0.230",
-    "@rjsf/fluentui-rc": "5.17.1",
-    "@rjsf/validator-ajv8": "5.17.1"
+    "@rjsf/fluentui-rc": "^5.18.4",
+    "@rjsf/validator-ajv8": "^5.18.4"
   },
   "devDependencies": {},
   "license": "MIT",
diff --git a/packages/querybuilder/src/VisibilityQueryField.tsx b/packages/querybuilder/src/VisibilityQueryField.tsx
index b960094..ed888ea 100644
--- a/packages/querybuilder/src/VisibilityQueryField.tsx
+++ b/packages/querybuilder/src/VisibilityQueryField.tsx
@@ -52,7 +52,7 @@ class ErrorBoundary extends React.Component<{ children: React.ReactNode, resetRu
 
     componentDidCatch(error: any, errorInfo: any) {
         // You can also log the error to an error reporting service
-        console.log("ERROR", error, errorInfo);
+        console.error("ERROR", error, errorInfo);
     }
 
     render() {
@@ -126,7 +126,7 @@ export const VisibilityQueryField = () => {
 
 
     const setOpen = (open: boolean) => setState(old => { old.isOpen = open; return { ...old }; });
-
+    console.log("VisibilityQueryField", [isOpen, value, query, fields]);
     return (<>
         <ErrorBoundary resetRule={() => setState(old => { old.query = { combinator: 'and', rules: [] }; return { ...old } })}>
             <Dialog open={isOpen} onOpenChange={(event, data) => setOpen(data.open)}>
@@ -137,7 +137,7 @@ export const VisibilityQueryField = () => {
                         <DialogContent>
                             <QueryBuilderFluentFix>
                                 <QueryBuilder
-                                    addRuleToNewGroups
+                                   // addRuleToNewGroups
                                     listsAsArrays
                                     parseNumbers
                                     showNotToggle
@@ -145,18 +145,19 @@ export const VisibilityQueryField = () => {
                                     operators={[...defaultOperators, { name: "is-visible", value: "is-visible", label: "is visible", arity: "unary" }]}
                                     controlClassnames={{ queryBuilder: 'queryBuilder-branches' }}
                                     fields={fields}
-                                    query={query} onQueryChange={(q) => {
+                                    query={query}
+                                    onQueryChange={(q) => {
                                         setState(old => { old.query = q; old.value = formatQuery(q, { format: 'cel', parseNumbers: true }); return { ...old }; });
-                                        const json = formatQuery(q, { format: 'json', parseNumbers: true });
+                                        //const json = formatQuery(q, { format: 'json', parseNumbers: true });
 
-                                        updateQuickFormPayload((old) => {
-                                            old.questions[activeQuestion!].visible = {
-                                                engine: "react-querybuilder",
-                                                rule: JSON.parse(json)
-                                            };
+                                        //updateQuickFormPayload((old) => {
+                                        //    old.questions[activeQuestion!].visible = {
+                                        //        engine: "react-querybuilder",
+                                        //        rule: JSON.parse(json)
+                                        //    };
 
-                                            return { ...old };
-                                        });
+                                        //    return { ...old };
+                                        //});
                                     }
                                     } />
 
@@ -165,9 +166,22 @@ export const VisibilityQueryField = () => {
                         </DialogContent>
                         <DialogActions>
                             <DialogTrigger disableButtonEnhancement>
-                                <Button appearance="secondary">Close</Button>
+                                <Button appearance="secondary" onClick={() => { setOpen(false); } }>Discard</Button>
                             </DialogTrigger>
-                            <Button appearance="primary">Do Something</Button>
+                            <Button appearance="primary" onClick={() => {
+
+                                const json = formatQuery(query, { format: 'json', parseNumbers: true });
+
+                                updateQuickFormPayload((old) => {
+                                    old.questions[activeQuestion!].visible = {
+                                        engine: "react-querybuilder",
+                                        rule: JSON.parse(json)
+                                    };
+
+                                    return { ...old };
+                                });
+                                setOpen(false);
+                            }}>Update</Button>
                         </DialogActions>
                     </DialogBody>
                 </DialogSurface>
diff --git a/packages/querybuilder/src/reactQueryBuilderVisibilityEngine.ts b/packages/querybuilder/src/reactQueryBuilderVisibilityEngine.ts
index 3618f94..d0a3710 100644
--- a/packages/querybuilder/src/reactQueryBuilderVisibilityEngine.ts
+++ b/packages/querybuilder/src/reactQueryBuilderVisibilityEngine.ts
@@ -21,6 +21,10 @@ function evalRule(rule: RuleType, context: QuickformState & { questions: { [logi
     const isMultiArray = type === "multiselect";
     const sourceValue = question.output;
 
+    /**
+     * 
+     * OBS == comparison is used to compare values, this is not the same as === in javascript. "1" == 1 is true, "1" === 1 is false
+     */
     switch (rule.operator as operators) {
         case "!=":
             return !(question.answered && isArrayType<string>(sourceValue, isMultiArray) && isArrayType(value, isArray) ? isMultiArray ? sourceValue.every(sv => value.indexOf(sv) !== -1) : sourceValue  === value : value === sourceValue);
@@ -30,8 +34,8 @@ function evalRule(rule: RuleType, context: QuickformState & { questions: { [logi
             console.log("EvalRule", [question, metadata, type, sourceValue, isMultiArray, value, isArray]);
             return question.answered && isArrayType<string>(sourceValue, isMultiArray) && isArrayType(value, isArray) ?
         
-            isMultiArray ? sourceValue.every(sv => value.indexOf(sv) !== -1) : sourceValue === value
-            : value === sourceValue;
+            isMultiArray ? sourceValue.every(sv => value.indexOf(sv) !== -1) : sourceValue == value
+            : value == sourceValue;
         //   case ">": return false;
         //    case ">=": return false;
         //    case "beginsWith": return false;
@@ -61,6 +65,9 @@ function evalRuleGroup(rule: RuleGroupType, context: any): boolean {
 }
 
 registerVisibilityEngine("react-querybuilder", (rule: RuleGroupType, context: any) => {
+    console.log("[visibility handler]", [rule, context]);
+    const result = evalRuleGroup(rule, context);
 
-    return evalRuleGroup(rule, context);
+    console.log("[visibility handler]", [result]);
+    return result;
 });
\ No newline at end of file

From a043e2956782767b111d029bea66c35c3630b0b6 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Wed, 26 Jun 2024 08:59:53 +0200
Subject: [PATCH 039/118] fix: Added webpack bundle analyzer for future fun

---
 package-lock.json                | 268 ++++++++++++++++++++++++++++++-
 packages/playground/analyze.js   |  18 +++
 packages/playground/package.json |   4 +-
 3 files changed, 285 insertions(+), 5 deletions(-)
 create mode 100644 packages/playground/analyze.js

diff --git a/package-lock.json b/package-lock.json
index 499c33b..2521d56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4714,6 +4714,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.25",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
+      "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
+      "dev": true
+    },
     "node_modules/@popperjs/core": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.4.tgz",
@@ -5706,6 +5712,18 @@
         "acorn": "^8"
       }
     },
+    "node_modules/acorn-walk": {
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.3.tgz",
+      "integrity": "sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
@@ -7013,8 +7031,7 @@
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
-      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
-      "peer": true
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -7387,6 +7404,12 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "peer": true
     },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
+    },
     "node_modules/duplexer2": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
@@ -8455,6 +8478,21 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dev": true,
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -8645,6 +8683,12 @@
         }
       ]
     },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true
+    },
     "node_modules/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -10027,6 +10071,15 @@
       "integrity": "sha512-ADwtLIIww+9FKybWscd7OCfm9odsFYHImBRI1v9AviGce55QY8raT+9ihH8jX/E/e6QVSGM+pKj4jSUSRmALNQ==",
       "peer": true
     },
+    "node_modules/mrmime": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+      "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -13080,6 +13133,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true,
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
     "node_modules/p-each-series": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz",
@@ -15401,6 +15463,20 @@
         "node": ">=4"
       }
     },
+    "node_modules/sirv": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "dev": true,
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -16078,6 +16154,15 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -16591,6 +16676,74 @@
         }
       }
     },
+    "node_modules/webpack-bundle-analyzer": {
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.2.tgz",
+      "integrity": "sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==",
+      "dev": true,
+      "dependencies": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "commander": "^7.2.0",
+        "debounce": "^1.2.1",
+        "escape-string-regexp": "^4.0.0",
+        "gzip-size": "^6.0.0",
+        "html-escaper": "^2.0.2",
+        "opener": "^1.5.2",
+        "picocolors": "^1.0.0",
+        "sirv": "^2.0.3",
+        "ws": "^7.3.1"
+      },
+      "bin": {
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/webpack-cli": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
@@ -17063,6 +17216,7 @@
         "ts-loader": "^9.5.1",
         "typescript": "5.4.2",
         "webpack": "^5.89.0",
+        "webpack-bundle-analyzer": "^4.10.2",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.15.1"
       }
@@ -20599,6 +20753,12 @@
         "config-chain": "^1.1.11"
       }
     },
+    "@polka/url": {
+      "version": "1.0.0-next.25",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
+      "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
+      "dev": true
+    },
     "@popperjs/core": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.4.tgz",
@@ -21452,6 +21612,15 @@
       "dev": true,
       "requires": {}
     },
+    "acorn-walk": {
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.3.tgz",
+      "integrity": "sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.11.0"
+      }
+    },
     "agent-base": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
@@ -22441,8 +22610,7 @@
     "debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
-      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
-      "peer": true
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
     },
     "debug": {
       "version": "4.3.4",
@@ -22721,6 +22889,12 @@
         }
       }
     },
+    "duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
+    },
     "duplexer2": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
@@ -23556,6 +23730,15 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
+    "gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dev": true,
+      "requires": {
+        "duplexer": "^0.1.2"
+      }
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -23688,6 +23871,12 @@
       "integrity": "sha512-igBTJcNNNhvZFRtm8uA6xMY6xYleeDwn3PeBCkDz7tHttv4F2hsDI2aPgNERWzvRcNYHNT3ymRaQzllmXj4YsQ==",
       "dev": true
     },
+    "html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true
+    },
     "html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -24691,6 +24880,12 @@
       "integrity": "sha512-ADwtLIIww+9FKybWscd7OCfm9odsFYHImBRI1v9AviGce55QY8raT+9ihH8jX/E/e6QVSGM+pKj4jSUSRmALNQ==",
       "peer": true
     },
+    "mrmime": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+      "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+      "dev": true
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -26838,6 +27033,12 @@
         "is-wsl": "^2.2.0"
       }
     },
+    "opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true
+    },
     "p-each-series": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz",
@@ -27167,6 +27368,7 @@
         "ts-loader": "^9.5.1",
         "typescript": "5.4.2",
         "webpack": "^5.89.0",
+        "webpack-bundle-analyzer": "*",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.15.1"
       }
@@ -28663,6 +28865,17 @@
         }
       }
     },
+    "sirv": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "dev": true,
+      "requires": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      }
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -29178,6 +29391,12 @@
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
       "dev": true
     },
+    "totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true
+    },
     "tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -29550,6 +29769,47 @@
         "webpack-sources": "^3.2.3"
       }
     },
+    "webpack-bundle-analyzer": {
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.2.tgz",
+      "integrity": "sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==",
+      "dev": true,
+      "requires": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "commander": "^7.2.0",
+        "debounce": "^1.2.1",
+        "escape-string-regexp": "^4.0.0",
+        "gzip-size": "^6.0.0",
+        "html-escaper": "^2.0.2",
+        "opener": "^1.5.2",
+        "picocolors": "^1.0.0",
+        "sirv": "^2.0.3",
+        "ws": "^7.3.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        },
+        "ws": {
+          "version": "7.5.10",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+          "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+          "dev": true,
+          "requires": {}
+        }
+      }
+    },
     "webpack-cli": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
diff --git a/packages/playground/analyze.js b/packages/playground/analyze.js
new file mode 100644
index 0000000..d182f75
--- /dev/null
+++ b/packages/playground/analyze.js
@@ -0,0 +1,18 @@
+
+// More info here : https://blog.jakoblind.no/webpack-bundle-analyzer/#should-you-analyze-the-production-or-dev-bundle
+
+const webpack = require("webpack")
+const BundleAnalyzerPlugin =
+  require("webpack-bundle-analyzer").BundleAnalyzerPlugin
+  const webpackConfigProd = require("./webpack.config");
+// const webpackConfigProd = require("webpack.config")(
+//   "production"
+// )
+
+webpackConfigProd.plugins.push(new BundleAnalyzerPlugin())
+
+webpack(webpackConfigProd, (err, stats) => {
+  if (err || stats.hasErrors()) {
+    console.error(err)
+  }
+})
\ No newline at end of file
diff --git a/packages/playground/package.json b/packages/playground/package.json
index a196d2e..3f4f6e3 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -20,13 +20,15 @@
     "ts-loader": "^9.5.1",
     "typescript": "5.4.2",
     "webpack": "^5.89.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
   "scripts": {
     "start": "webpack-dev-server --mode development --open --hot",
     "dev": "npm run start",
-    "build": "webpack --mode production"
+    "build": "webpack --mode production",
+    "analyze-bundle": "node analyze.js"
   },
   "files": [
     "src"

From c4d67319e9d90df0719175a1eeb3f19b05f57a22 Mon Sep 17 00:00:00 2001
From: Kasper Baun <43874899+KasperBaun@users.noreply.github.com>
Date: Wed, 26 Jun 2024 09:17:39 +0200
Subject: [PATCH 040/118] Update package.json
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Poul Kjeldager Sørensen <pks@delegate.dk>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bc8e4cb..6d92f2f 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "release-designer": "npm run release --workspace packages/designer",
     "release-inputs": "npm run release --workspace packages/inputs",
     "release-querybuilder": "npm run release --workspace packages/querybuilder",
-    "eavfw-link": "npm link @eavfw/apps @eavfw/next @eavfw/expressions @eavfw/manifest @eavfw/hooks @eavfw/forms @eavfw/utils",
+   "eavfw-link": "npm link @eavfw/apps @eavfw/next @eavfw/expressions @eavfw/manifest @eavfw/hooks @eavfw/forms @eavfw/utils @eavfw/designer @eavfw/designer-core @eavfw/designer-nodes",
     "playground": "npm --workspace packages/playground run dev"
   },
   "config": {

From 1ed19eda19159e55c0c6258c9b81f1c03ff52fb8 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Wed, 26 Jun 2024 09:23:09 +0200
Subject: [PATCH 041/118] fix: updated defaultQuickformTokens

---
 packages/core/src/style/defaultQuickFormTokens.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/style/defaultQuickFormTokens.ts b/packages/core/src/style/defaultQuickFormTokens.ts
index d030553..97d8afc 100644
--- a/packages/core/src/style/defaultQuickFormTokens.ts
+++ b/packages/core/src/style/defaultQuickFormTokens.ts
@@ -42,7 +42,7 @@ export const defaultQuickFormTokens: QuickFormTokens = {
     onPrimary: '#ffffff',
     onSecondary: '#000000',
 
-    fontFamily: 'Outfit, Monaco, Consolas',
+    fontFamily: 'Monaco, Consolas',
     headlineFontSize: '2rem',
     subtitleFontSize: '1.5rem',
     paragraphFontSize: '1.3rem',

From 75945c3180ed9545d6fbe279b45c513112355ce9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 27 Jun 2024 06:57:01 +0200
Subject: [PATCH 042/118] feat: made the visibility hanldler support
 has-product-option

---
 .../core/src/model/json-definitions/Layout.ts |  2 +
 packages/core/src/state/QuickformReducer.ts   |  8 +++-
 .../action-handlers/VisibilityHandler.ts      | 18 ++++++--
 packages/core/src/utils/quickformUtils.ts     |  2 +-
 .../Header/QuickFormSettingsViewHeader.tsx    |  6 +--
 .../querybuilder/src/VisibilityQueryField.tsx | 31 ++++++++++---
 .../src/reactQueryBuilderVisibilityEngine.ts  | 46 +++++++++++--------
 7 files changed, 77 insertions(+), 36 deletions(-)

diff --git a/packages/core/src/model/json-definitions/Layout.ts b/packages/core/src/model/json-definitions/Layout.ts
index 5b54026..f47e006 100644
--- a/packages/core/src/model/json-definitions/Layout.ts
+++ b/packages/core/src/model/json-definitions/Layout.ts
@@ -52,6 +52,7 @@ export type RowColumnsLayout = {
      * If type is unspecified we know its a set of columns.
      */
     type?: "row";
+    order?: number;
     columns: ColumnsLayoutDefinition;
 }
 
@@ -71,5 +72,6 @@ export type ColumnLayout = {
 export type QuestionRef = {
     style?: React.CSSProperties;
     type: "question";
+    order?: number;
     ref: string;
 }
\ No newline at end of file
diff --git a/packages/core/src/state/QuickformReducer.ts b/packages/core/src/state/QuickformReducer.ts
index 38839e5..06c959f 100644
--- a/packages/core/src/state/QuickformReducer.ts
+++ b/packages/core/src/state/QuickformReducer.ts
@@ -74,9 +74,12 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
                     }
                 }
             }
-          
+
+            if (!action.intermediate)
+                state= VisibilityHandler.updateVisibleState(state);;
 
             return state;
+            
         }
 
         case 'SET_VALIDATION_RESULT': {
@@ -114,7 +117,8 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
                     });
                 }
             }
-
+            return state;
+            //DISCUSS WITH KBA - should we not run this in answer insteaad?
             return VisibilityHandler.updateVisibleState(state);;
         }
 
diff --git a/packages/core/src/state/action-handlers/VisibilityHandler.ts b/packages/core/src/state/action-handlers/VisibilityHandler.ts
index 4ff6634..2c416a9 100644
--- a/packages/core/src/state/action-handlers/VisibilityHandler.ts
+++ b/packages/core/src/state/action-handlers/VisibilityHandler.ts
@@ -1,8 +1,14 @@
+import { QuestionModel } from "../../model/QuestionModel";
 import { resolveQuickFormService } from "../../services";
 import { allQuestionsMap, getAllQuestionsWithVisibilityRule } from "../../utils/quickformUtils";
 import { QuickformState } from "../QuickformState";
 
-const engines = {} as any;
+export type VisibilityRuleEngineContext = {
+    questions: { [key: string]: QuestionModel };
+} & QuickformState;
+
+export type VisibilityRuleEngineHandler = (rule: any, context: VisibilityRuleEngineContext, question: QuestionModel) => boolean;
+const engines: { [key: string]: VisibilityRuleEngineHandler } = {} ;
 
 export const registerVisibilityEngine = (type: string, engine: any) => {
     engines[type] = engine;
@@ -36,9 +42,9 @@ export class VisibilityHandler {
                 try {
 
                     if (question.visible.engine in engines) {
-                        result = engines[question.visible.engine](question.visible.rule, context)
+                        result = engines[question.visible.engine](question.visible.rule, context,question)
                     } else {
-                        result = functionInScope(question.visible?.rule, context);
+                        result = functionInScope(question.visible?.rule, context, question);
                     }
                     logger.log("[visibility handler] Result for {question} is {result}", question.logicalName, result);
 
@@ -47,6 +53,10 @@ export class VisibilityHandler {
                 }
                 hasChanges = hasChanges || question.visible.isVisible !== result;
                 question.visible.isVisible = result;
+                if (question.visible.isVisible === false) {
+                    question.answered = false;
+                    question.output = '';
+                }
             }
         }
         return state;
@@ -79,7 +89,7 @@ interface Context {
  * @param context
  * @returns
  */
-function functionInScope(js: string, context: Context): boolean {
+function functionInScope(js: string, context: any, question: QuestionModel): boolean {
     const keys = Object.keys(context);
     const values = keys.map(key => context[key]);
     const func: Function = new Function(...keys, `return ${js};`);
diff --git a/packages/core/src/utils/quickformUtils.ts b/packages/core/src/utils/quickformUtils.ts
index 9d7b3a6..72c6ce5 100644
--- a/packages/core/src/utils/quickformUtils.ts
+++ b/packages/core/src/utils/quickformUtils.ts
@@ -32,7 +32,7 @@ export const allQuestionsMap = (slides: SlideModel[]): { [key: string]: Question
     .map(s => s.questions)
     .flat()
     .reduce((acc, question) => {
-        acc[question.logicalName] = question;
+        acc[question.questionKey] = question;
         return acc;
     }, {} as { [key: string]: QuestionModel });
 
diff --git a/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx b/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx
index 4064ec3..cdb1faf 100644
--- a/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx
+++ b/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx
@@ -101,9 +101,9 @@ export const QuickFormSettingsViewHeader: React.FC = () => {
                                 </Field>
                             }
                             <VisibilityQueryField />
-                            <Field label="Visible Rule">
-                                <Input value={questions[activeQuestion!]?.visible?.rule ?? ''} required type="text" id={"question-schema-name"} onChange={(e, d) => updateQuickFormPayload(old => { old.questions[activeQuestion!].visible = { engine: "JsEval", rule: d.value }; return { ...old }; })} />
-                            </Field>
+                            {/*<Field label="Visible Rule">*/}
+                            {/*    <Input value={JSON.stringify( questions[activeQuestion!]?.visible?.rule ?? '')} required type="text" id={"question-schema-name"} onChange={(e, d) => updateQuickFormPayload(old => { old.questions[activeQuestion!].visible = { engine: "JsEval", rule: d.value }; return { ...old }; })} />*/}
+                            {/*</Field>*/}
                         </DialogContent>
                         <DialogActions>
                             <DialogTrigger disableButtonEnhancement>
diff --git a/packages/querybuilder/src/VisibilityQueryField.tsx b/packages/querybuilder/src/VisibilityQueryField.tsx
index ed888ea..90673ba 100644
--- a/packages/querybuilder/src/VisibilityQueryField.tsx
+++ b/packages/querybuilder/src/VisibilityQueryField.tsx
@@ -4,7 +4,7 @@ import { PropsWithChildren, useCallback, useState } from 'react';
 
 import { useQuickFormDefinition } from "@eavfw/quickform-designer";
 import { QueryBuilderFluent } from '@react-querybuilder/fluent';
-import { QueryBuilder, defaultValidator, defaultOperators, formatQuery, RuleGroupType, RuleType } from 'react-querybuilder';
+import { QueryBuilder, defaultValidator, defaultOperators, formatQuery, RuleGroupType, RuleType, Field as QueryField } from 'react-querybuilder';
 
 import { EditRegular } from "@fluentui/react-icons";
 import { FieldTypes, InputComponentFieldMetadata, InputComponentMetadata, InputComponentSelectFieldMetadata, QuickformState, resolveInputComponent } from '@eavfw/quickform-core';
@@ -65,6 +65,11 @@ class ErrorBoundary extends React.Component<{ children: React.ReactNode, resetRu
     }
 }
 
+const operators = [...defaultOperators,
+{ name: "is-visible", value: "is-visible", label: "is visible", arity: "unary" },
+    { name: "has-product-option", value: "has-product-option", label: "has product option", arity: "unary" },
+];
+
 
 export const VisibilityQueryField = () => {
 
@@ -83,9 +88,10 @@ export const VisibilityQueryField = () => {
             .filter(hasFieldMetadata)
             .map(([qkey, q, metadata]) => {
                 const type = "type" in metadata.field ? metadata.field.type : metadata.field.typeProvider(q);
-                return ({
-                    name: q.logicalName!,
-                    label: q.schemaName!,
+                const result = {
+                    qkey:qkey,
+                    name: qkey,
+                    label: q.schemaName ? qkey: q.text,
                     valueEditorType: type,
                     ...(isSelectField(metadata, type) ? { values: metadata.field.listValuesProvider(q) } : {})
                     // label2: `Question ${q.schemaName}`,
@@ -94,7 +100,9 @@ export const VisibilityQueryField = () => {
                     //     ... (metadata.field.type === "select" ? { listValues: metadata.field.listValuesProvider(q) } : {})
                     // },
                     // ...metadata.field,
-                })
+                };
+                console.log("VisibilityQueryField FieldGenerator", [qkey,type, q,result]);
+                return result;
             })
 
         //  tree: QbUtils.checkTree(QbUtils.loadTree(queryValue), initial_config),
@@ -124,6 +132,16 @@ export const VisibilityQueryField = () => {
 
     }));
 
+    const getOperators = (fieldName: string, { fieldData }: { fieldData: QueryField }) => {
+        console.log("getOperators", [fieldName, fieldData]);
+        if (typeof fieldData.qkey === "string") {
+            const schema = resolveInputComponent(questions?.[fieldData.qkey]?.inputType??'')?.inputSchema;
+            if (schema?.label === "Product Collection") {
+                return operators.filter(x => x.name === "has-product-option")
+            }
+        }
+        return operators;
+    };
 
     const setOpen = (open: boolean) => setState(old => { old.isOpen = open; return { ...old }; });
     console.log("VisibilityQueryField", [isOpen, value, query, fields]);
@@ -141,8 +159,9 @@ export const VisibilityQueryField = () => {
                                     listsAsArrays
                                     parseNumbers
                                     showNotToggle
+                                    getOperators={getOperators}
                                     validator={defaultValidator}
-                                    operators={[...defaultOperators, { name: "is-visible", value: "is-visible", label: "is visible", arity: "unary" }]}
+                                    operators={operators}
                                     controlClassnames={{ queryBuilder: 'queryBuilder-branches' }}
                                     fields={fields}
                                     query={query}
diff --git a/packages/querybuilder/src/reactQueryBuilderVisibilityEngine.ts b/packages/querybuilder/src/reactQueryBuilderVisibilityEngine.ts
index d0a3710..b1e6b87 100644
--- a/packages/querybuilder/src/reactQueryBuilderVisibilityEngine.ts
+++ b/packages/querybuilder/src/reactQueryBuilderVisibilityEngine.ts
@@ -1,41 +1,43 @@
 "use client";
 import { resolveInputComponent, type QuickformState } from "@eavfw/quickform-core";
 import type { QuestionModel } from "@eavfw/quickform-core/src/model";
-import { registerVisibilityEngine } from "@eavfw/quickform-core/src/state/action-handlers/VisibilityHandler";
+import { VisibilityRuleEngineContext, registerVisibilityEngine } from "@eavfw/quickform-core/src/state/action-handlers/VisibilityHandler";
 import type { RuleGroupType, RuleType, defaultOperators } from "react-querybuilder";
 
 type ArrayElement<ArrayType extends readonly unknown[]> =
     ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 
-type operators = ArrayElement<(typeof defaultOperators)>["name"] | "is-visible";
+type operators = ArrayElement<(typeof defaultOperators)>["name"] | "is-visible" | "has-product-option";
 
 function isArrayType<T>(obj: T | T[], isArray: boolean): obj is Array<T> {
     return isArray;
 }
-function evalRule(rule: RuleType, context: QuickformState & { questions: { [logicalName: string]: QuestionModel } }): boolean {
+function evalRule(rule: RuleType, context: VisibilityRuleEngineContext, currentQuestion: QuestionModel): boolean {
+    
     const value = rule.value;
-    const question = context.questions[rule.field];
-    const metadata = resolveInputComponent(question.inputType).inputSchema!;
-    const type = "type" in metadata.field! ? metadata.field.type : metadata.field!.typeProvider(question.inputProperties!);
+    const targetQuestion = context.questions[rule.field];
+    const metadata = resolveInputComponent(targetQuestion.inputType).inputSchema!;
+    const type = "type" in metadata.field! ? metadata.field.type : metadata.field!.typeProvider(targetQuestion.inputProperties!);
     const isArray = type === "select" || type === "multiselect";
     const isMultiArray = type === "multiselect";
-    const sourceValue = question.output;
-
+    const sourceValue = targetQuestion.output;
+    console.log("Evaluating Rule " + rule.operator + " " + rule.field, [rule, context, targetQuestion,currentQuestion]);
     /**
      * 
      * OBS == comparison is used to compare values, this is not the same as === in javascript. "1" == 1 is true, "1" === 1 is false
+     * OBSOBS - == not working as "" == 0 is true.
      */
     switch (rule.operator as operators) {
         case "!=":
-            return !(question.answered && isArrayType<string>(sourceValue, isMultiArray) && isArrayType(value, isArray) ? isMultiArray ? sourceValue.every(sv => value.indexOf(sv) !== -1) : sourceValue  === value : value === sourceValue);
+            return !(targetQuestion.answered && isArrayType<string>(sourceValue, isMultiArray) && isArrayType(value, isArray) ? isMultiArray ? sourceValue.every(sv => value.indexOf(sv) !== -1) : sourceValue  === value : value === sourceValue);
         //  case "<": return false;
         //   case "<=": return false;
         case "=":
-            console.log("EvalRule", [question, metadata, type, sourceValue, isMultiArray, value, isArray]);
-            return question.answered && isArrayType<string>(sourceValue, isMultiArray) && isArrayType(value, isArray) ?
+            console.log("EvalRule", [targetQuestion, metadata, type, sourceValue, isMultiArray, value, isArray]);
+            return targetQuestion.answered && isArrayType<string>(sourceValue, isMultiArray) && isArrayType(value, isArray) ?
         
-            isMultiArray ? sourceValue.every(sv => value.indexOf(sv) !== -1) : sourceValue == value
-            : value == sourceValue;
+                isMultiArray ? sourceValue.every(sv => value.indexOf(sv) !== -1) : value?.toString() === sourceValue?.toString()
+            : value?.toString() === sourceValue?.toString();
         //   case ">": return false;
         //    case ">=": return false;
         //    case "beginsWith": return false;
@@ -45,8 +47,12 @@ function evalRule(rule: RuleType, context: QuickformState & { questions: { [logi
         //   case "doesNotBeginWith": return false;
         //   case "doesNotEndWith": return false;
         //   case "endsWith": return false;
-        case "in": return question.answered && isArrayType<string>(sourceValue, isMultiArray) && isArrayType(value, isArray) ? isMultiArray ? sourceValue.some(sv => value.indexOf(sv) !== -1) : sourceValue.some(sv => sv === value[0]) : value === sourceValue;
-        case "is-visible": return question.visible?.isVisible ?? false;
+        case "in": return targetQuestion.answered && isArrayType<string>(sourceValue, isMultiArray) && isArrayType(value, isArray) ? isMultiArray ? sourceValue.some(sv => value.indexOf(sv) !== -1) : sourceValue.some(sv => sv === value[0]) : value === sourceValue;
+        case "is-visible": return targetQuestion.visible?.isVisible ?? false;
+        case "has-product-option":
+            console.log("[visibility handler]", ["has-product-option", rule, context, currentQuestion.inputProperties, JSON.stringify(targetQuestion), sourceValue]);
+            const inputProperties = currentQuestion.inputProperties as { products: Array<string> };
+            return inputProperties?.products?.some(p => p === sourceValue) ?? false;
         //   case "notBetween": return false;
         //   case "notIn": return false;
         //   case "notNull": return false;
@@ -58,15 +64,15 @@ function evalRule(rule: RuleType, context: QuickformState & { questions: { [logi
     return false;
 }
 
-function evalRuleGroup(rule: RuleGroupType, context: any): boolean {
-    const rules = rule.rules.map(r => "field" in r ? evalRule(r, context) : evalRuleGroup(r, context));
-
+function evalRuleGroup(rule: RuleGroupType, context: VisibilityRuleEngineContext, question: QuestionModel): boolean {
+    const rules = rule.rules.map(r => "field" in r ? evalRule(r, context,question) : evalRuleGroup(r, context, question));
+    console.log("[visibility handler]", [rule, rules]);
     return rule.combinator === "and" ? rules.every(x => x) : rules.some(x => x);
 }
 
-registerVisibilityEngine("react-querybuilder", (rule: RuleGroupType, context: any) => {
+registerVisibilityEngine("react-querybuilder", (rule: RuleGroupType, context: VisibilityRuleEngineContext, question: QuestionModel) => {
     console.log("[visibility handler]", [rule, context]);
-    const result = evalRuleGroup(rule, context);
+    const result = evalRuleGroup(rule, context, question);
 
     console.log("[visibility handler]", [result]);
     return result;

From 512821d887c936a30746738ec8d4c611fa71a1b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 27 Jun 2024 06:57:43 +0200
Subject: [PATCH 043/118] fix: ordering persistet and delete nodes working now
 in designer

---
 .../Components/Views/QuickFormLayoutView.tsx  | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/designer/src/Components/Views/QuickFormLayoutView.tsx b/packages/designer/src/Components/Views/QuickFormLayoutView.tsx
index b5244d1..12bd496 100644
--- a/packages/designer/src/Components/Views/QuickFormLayoutView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormLayoutView.tsx
@@ -6,6 +6,7 @@ import { useEffect, useMemo } from "react";
 import { removeNonAlphanumeric } from "@eavfw/utils";
 import { SerializedNodes } from "@craftjs/core"
 import { QuickFormDesignerDefinition } from "../../Types/QuickFormDefinition";
+import { RowColumnsLayout } from "@eavfw/quickform-core/src/model/json-definitions/Layout";
 
 
 
@@ -78,7 +79,7 @@ export const QuickFormLayoutView = ({ dispatch, slideId, layout }: {
                 Object.fromEntries(
                     Object.entries(
                         layout.slides[slideId]?.rows ?? {
-                        }).map(([rowid, row]) => {
+                        }).sort(([a, aa], [b, bb]) => (aa.order??-1) - (bb.order??-1)).map(([rowid, row]) => {
 
                             if (row.type !== "row")
                                 throw new Error("Only Row is supported currently");
@@ -215,24 +216,27 @@ export const QuickFormLayoutView = ({ dispatch, slideId, layout }: {
                 if (!slide)
                     return quickform;
 
-                for (let rowid of nodes?.ROOT.nodes) {
+                slide.rows = Object.fromEntries(nodes?.ROOT.nodes.map((rowid) => {
+
                     let row = nodes[rowid];
                     if (!row.props.questionid)
-                        continue;
+                        return [];
 
                     const type = typeof row.type === "string" ? row.type : row.type.resolvedName;
                     if (type !== "Question")
-                        continue;
+                        return [];
+
 
-                    if (!slide.rows)
-                        slide.rows = {};
 
-                    slide.rows[rowid] = {
+                    return [[rowid, {
                         ...slide.rows?.[rowid] ?? {},
                         type: "row",
+                        order: nodes?.ROOT.nodes.indexOf(rowid),
                         columns: { "column1": { type: "question", ref: row.props.questionid } }
-                    };
-                }
+                    } as RowColumnsLayout]];
+
+                }).flat());
+                
 
                 return { ...quickform };
             });

From 95c90ac0cbf5a0553d64df20d8f3268a7a0a7f31 Mon Sep 17 00:00:00 2001
From: "Simon S. Pedersen" <ssp@delegate.dk>
Date: Thu, 27 Jun 2024 10:04:52 +0200
Subject: [PATCH 044/118] wip: align with master

---
 .../src/Components/Views/DesignerViews.tsx    |  2 +-
 .../Components/Views/QuickFormSourceView.tsx  | 25 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 packages/designer/src/Components/Views/QuickFormSourceView.tsx

diff --git a/packages/designer/src/Components/Views/DesignerViews.tsx b/packages/designer/src/Components/Views/DesignerViews.tsx
index 31ba116..f80c055 100644
--- a/packages/designer/src/Components/Views/DesignerViews.tsx
+++ b/packages/designer/src/Components/Views/DesignerViews.tsx
@@ -19,6 +19,6 @@ export const DesignerViews = () => {
         {view === "ending" && <QuickFormEndingSettingsView />}
         {view === "layout" && <QuickFormLayoutView slideId={activeSlide} layout={quickformpayload.layout} dispatch={updateQuickFormPayload} />}
         {view === "questions" && <QuickFormQuestionsView dispatch={updateQuickFormPayload} questions={quickformpayload.questions} currentQuestion={activeQuestion} />}
-
+        {view === "sourceView" && <QuickFormQuestionsView dispatch={updateQuickFormPayload} questions={quickformpayload.questions} currentQuestion={activeQuestion} />}
     </>
 }
\ No newline at end of file
diff --git a/packages/designer/src/Components/Views/QuickFormSourceView.tsx b/packages/designer/src/Components/Views/QuickFormSourceView.tsx
new file mode 100644
index 0000000..0c3c5f4
--- /dev/null
+++ b/packages/designer/src/Components/Views/QuickFormSourceView.tsx
@@ -0,0 +1,25 @@
+ 
+
+
+import Form from "@rjsf/fluentui-rc";
+import validator from '@rjsf/validator-ajv8';
+import { FieldTemplate } from "./rjsf/FieldTemplate";
+import { BaseInputTemplate } from "./rjsf/BaseInputTemplate";
+import { useQuickFormDefinition } from "../../Contexts/QuickFormDefContext";
+import { useViewStyles } from "../Styles/useViewStyles.styles";
+import { mergeClasses } from "@fluentui/react-components";
+import { JSONSchema7, JSONSchema7Definition } from "json-schema";
+import { JsonField, JsonWidget } from "./rjsf/Widgets/JsonWidget";
+import { RegistryFieldsType } from "@rjsf/utils";
+import { QuickformDesignerFields } from "./QuickFormQuestionsView";
+
+export const QuickFormSourceView = () => {
+
+    const { quickformpayload: { submit }, updateQuickFormPayload: dispatch } = useQuickFormDefinition();
+    return (
+        <pre>
+            {JSON.stringify(updateQuickFormPayload, null, 4)}
+        </pre>
+    )
+
+}
\ No newline at end of file

From 4190fb553d7217eb65bf1b7b478ea90f19a534bc Mon Sep 17 00:00:00 2001
From: "Simon S. Pedersen" <ssp@delegate.dk>
Date: Thu, 27 Jun 2024 11:10:40 +0200
Subject: [PATCH 045/118] fix: codeview poc

---
 .../src/Components/Drawers/NavDrawer.tsx      |  2 ++
 .../src/Components/Icons/CodeIcon.tsx         |  2 ++
 .../src/Components/Views/DesignerViews.tsx    |  3 ++-
 .../Components/Views/QuickFormSourceView.tsx  | 23 +++++--------------
 packages/designer/src/QuickFormDesigner.tsx   |  1 -
 packages/designer/src/Types/ViewNames.ts      |  2 +-
 6 files changed, 13 insertions(+), 20 deletions(-)
 create mode 100644 packages/designer/src/Components/Icons/CodeIcon.tsx

diff --git a/packages/designer/src/Components/Drawers/NavDrawer.tsx b/packages/designer/src/Components/Drawers/NavDrawer.tsx
index 6ae1e91..ef3c7aa 100644
--- a/packages/designer/src/Components/Drawers/NavDrawer.tsx
+++ b/packages/designer/src/Components/Drawers/NavDrawer.tsx
@@ -15,6 +15,7 @@ import { SerializedNodes } from "@craftjs/core";
 import { useQuickFormDefinition } from "../../Contexts/QuickFormDefContext";
 import SlideTreeItem from "./SlideTreeItem";
 import QuestionTreeItem from "./QuestionTreeItem";
+import { CodeIcon } from "../Icons/CodeIcon";
 
 type NavDrawerProps = {
     isOpen: boolean;
@@ -75,6 +76,7 @@ export const NavDrawer = ({ setIsOpen, isOpen, newSlideNodes }: NavDrawerProps)
                     <ViewTreeItem title="Submit" icon={<SubmitViewIcon />} setView={setView} selectedView={view} viewName="submit" />
                     <ViewTreeItem title="Ending" icon={<EndingViewIcon />} setView={setView} selectedView={view} viewName="ending" />
                     <ViewTreeItem title="Settings" icon={<SettingsViewIcon />} setView={setView} selectedView={view} viewName="settings" />
+                    <ViewTreeItem title="Source view" icon={<CodeIcon />} setView={setView} selectedView={view} viewName="sourceView" />
                 </Tree>
             </DrawerBody>
         </Drawer>
diff --git a/packages/designer/src/Components/Icons/CodeIcon.tsx b/packages/designer/src/Components/Icons/CodeIcon.tsx
new file mode 100644
index 0000000..2712a7f
--- /dev/null
+++ b/packages/designer/src/Components/Icons/CodeIcon.tsx
@@ -0,0 +1,2 @@
+
+export { Code24Filled as CodeIcon } from "@fluentui/react-icons";
diff --git a/packages/designer/src/Components/Views/DesignerViews.tsx b/packages/designer/src/Components/Views/DesignerViews.tsx
index f80c055..ce8ca2d 100644
--- a/packages/designer/src/Components/Views/DesignerViews.tsx
+++ b/packages/designer/src/Components/Views/DesignerViews.tsx
@@ -5,6 +5,7 @@ import { QuickFormIntroSettingsView } from "./QuickFormIntroSettingsView"
 import { QuickFormLayoutView } from "./QuickFormLayoutView"
 import { QuickFormQuestionsView } from "./QuickFormQuestionsView"
 import { QuickFormSettingsView } from "./QuickFormSettingsView"
+import { QuickFormSourceView } from "./QuickFormSourceView"
 import { QuickFormSubmitSettingsView } from "./QuickFormSubmitSettingsView"
 
 
@@ -19,6 +20,6 @@ export const DesignerViews = () => {
         {view === "ending" && <QuickFormEndingSettingsView />}
         {view === "layout" && <QuickFormLayoutView slideId={activeSlide} layout={quickformpayload.layout} dispatch={updateQuickFormPayload} />}
         {view === "questions" && <QuickFormQuestionsView dispatch={updateQuickFormPayload} questions={quickformpayload.questions} currentQuestion={activeQuestion} />}
-        {view === "sourceView" && <QuickFormQuestionsView dispatch={updateQuickFormPayload} questions={quickformpayload.questions} currentQuestion={activeQuestion} />}
+        {view === "sourceView" && <QuickFormSourceView/>}
     </>
 }
\ No newline at end of file
diff --git a/packages/designer/src/Components/Views/QuickFormSourceView.tsx b/packages/designer/src/Components/Views/QuickFormSourceView.tsx
index 0c3c5f4..e91c77d 100644
--- a/packages/designer/src/Components/Views/QuickFormSourceView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSourceView.tsx
@@ -1,25 +1,14 @@
- 
-
-
-import Form from "@rjsf/fluentui-rc";
-import validator from '@rjsf/validator-ajv8';
-import { FieldTemplate } from "./rjsf/FieldTemplate";
-import { BaseInputTemplate } from "./rjsf/BaseInputTemplate";
 import { useQuickFormDefinition } from "../../Contexts/QuickFormDefContext";
-import { useViewStyles } from "../Styles/useViewStyles.styles";
-import { mergeClasses } from "@fluentui/react-components";
-import { JSONSchema7, JSONSchema7Definition } from "json-schema";
-import { JsonField, JsonWidget } from "./rjsf/Widgets/JsonWidget";
-import { RegistryFieldsType } from "@rjsf/utils";
-import { QuickformDesignerFields } from "./QuickFormQuestionsView";
 
 export const QuickFormSourceView = () => {
 
-    const { quickformpayload: { submit }, updateQuickFormPayload: dispatch } = useQuickFormDefinition();
+    const { quickformpayload: updateQuickFormPayload } = useQuickFormDefinition();
     return (
-        <pre>
-            {JSON.stringify(updateQuickFormPayload, null, 4)}
-        </pre>
+        <div style={{ margin: "15px", backgroundColor: "white", padding: "15px", borderRadius: "5px" }}>
+                <pre>
+                    {JSON.stringify(updateQuickFormPayload, null, 4)}
+                </pre>
+        </div>
     )
 
 }
\ No newline at end of file
diff --git a/packages/designer/src/QuickFormDesigner.tsx b/packages/designer/src/QuickFormDesigner.tsx
index 0f15834..da0e77a 100644
--- a/packages/designer/src/QuickFormDesigner.tsx
+++ b/packages/designer/src/QuickFormDesigner.tsx
@@ -34,7 +34,6 @@ const QuickFormDesigner = ({ entityName, attributeName, designerLocale, ...props
                     <div className={styles.contentView}>
 
                         <QuickFormSettingsViewHeader />
-
                         <DesignerViews />
 
                     </div>
diff --git a/packages/designer/src/Types/ViewNames.ts b/packages/designer/src/Types/ViewNames.ts
index 3bfe0db..221b129 100644
--- a/packages/designer/src/Types/ViewNames.ts
+++ b/packages/designer/src/Types/ViewNames.ts
@@ -1 +1 @@
-export type ViewNames = "settings" | "intro" | "submit" | "ending" | "layout" | "questions";
\ No newline at end of file
+export type ViewNames = "settings" | "intro" | "submit" | "ending" | "layout" | "questions" | "sourceView";
\ No newline at end of file

From 19ce1b05459fd3c4380b8a59b7881ae9a02e8a13 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Thu, 27 Jun 2024 14:10:26 +0200
Subject: [PATCH 046/118] fix: added a new icon option in default slide button
 icon

---
 .../src/components/icons/ChevronRight.tsx     | 27 +++++++++++++++++++
 .../src/components/icons/IconResolver.tsx     | 14 +++++++++-
 .../slide-renderer/SlideRenderer.tsx          |  2 +-
 .../Views/QuickFormSettingsView.tsx           |  4 ++-
 packages/playground/package.json              |  2 +-
 .../src/data/allInputControlsTest.json        |  1 +
 6 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 packages/core/src/components/icons/ChevronRight.tsx

diff --git a/packages/core/src/components/icons/ChevronRight.tsx b/packages/core/src/components/icons/ChevronRight.tsx
new file mode 100644
index 0000000..b06b569
--- /dev/null
+++ b/packages/core/src/components/icons/ChevronRight.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { IconProps } from "./iconProps";
+
+export const ChevronRight: React.FC<IconProps> = ({ color = "green", size = 100, style }) => {
+    return (
+        <div style={{ textAlign: 'center', height: size, ...style }}>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={size}
+                height={size}
+                version="1.1"
+                id="Capa_1"
+                viewBox="0 0 185.343 185.343"
+                xmlSpace="preserve"
+            >
+                <g>
+                    <g>
+                        <path
+                            fill={color}
+                            d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175    l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934    c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"
+                        />
+                    </g>
+                </g>
+            </svg>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/packages/core/src/components/icons/IconResolver.tsx b/packages/core/src/components/icons/IconResolver.tsx
index d1203e3..2f19077 100644
--- a/packages/core/src/components/icons/IconResolver.tsx
+++ b/packages/core/src/components/icons/IconResolver.tsx
@@ -3,8 +3,19 @@ import { TelephoneIcon } from "./TelephoneIcon";
 import { UserIcon } from "./UserIcon";
 import { IconProps } from "./iconProps";
 import { Checkmark } from '../icons/Checkmark';
+import { ChevronRight } from "./ChevronRight";
+
+export enum IconEnum {
+    None = "None",
+    Email = "Email",
+    Phone = "Phone",
+    User = "User",
+    Checkmark = "Checkmark",
+    ChevronRight = "ChevronRight"
+}
+
+export type IconType = keyof typeof IconEnum;
 
-export type IconType = "Email" | "Phone" | "User" | "Checkmark" | "None";
 export type IconResolverProps = {
     type?: IconType,
 } & IconProps
@@ -15,6 +26,7 @@ export const IconResolver: React.FC<IconResolverProps> = ({ type, color, classNa
         case "Phone": return <TelephoneIcon className={className} color={color} size={size} style={style} />;
         case "User": return <UserIcon className={className} color={color} size={size} style={style} />;
         case "Checkmark": return <Checkmark className={className} color={color} size={size} style={style} />;
+        case "ChevronRight": return <ChevronRight className={className} color={color} size={size} style={style} />
         case "None": return <></>;
         default: return <></>;
     }
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index 7704928..337ea2e 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -53,7 +53,7 @@ export const SlideRenderer: React.FC = () => {
                 showPressEnter={showPressEnter}
                 children={
                     <>
-                        {buttonText}<IconResolver type={currentSlide?.icon ?? state.defaultSlideButtonIcon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={24} />
+                        {buttonText}<IconResolver type={currentSlide?.icon ?? state.defaultSlideButtonIcon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={20} />
                     </>
                 }
             />
diff --git a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
index 7425ed2..634e5a4 100644
--- a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
@@ -9,6 +9,7 @@ import { makeStyles, mergeClasses } from "@fluentui/react-components";
 import { JSONSchema7 } from "json-schema";
 import { defaultQuickFormTokens } from "@eavfw/quickform-core";
 import { Controls } from "@eavfw/apps";
+import { IconEnum } from "@eavfw/quickform-core/src/components/icons/IconResolver";
 
 const inputSlideSchema = {
     label: "QuickForm Feature Flags",
@@ -38,7 +39,7 @@ const inputSlideSchema = {
                 title: "Default Slide Button Icon",
                 description: "The icon used for the slide button",
                 type: "string",
-                enum: ["None", "Email", "Phone", "User", "Checkmark"]
+                enum: Object.values(IconEnum),
             },
             tokens: {
                 title: "Tokens (Variables)",
@@ -103,6 +104,7 @@ export const QuickFormSettingsView = () => {
     const quickformSettingsStyles = useQuickformSettingsStyles();
     const PreviewComponent = Controls["QuickFormSettingsViewPreviewComponent"];
     console.log("quickformpayloadV1", JSON.stringify(quickformpayload.layout));
+    console.log("ENUM", Object.values(IconEnum));
     return (
         <div className={mergeClasses(styles.section, quickformSettingsStyles.container)}>
             <div className={mergeClasses(styles.sectionSlim, styles.section)}>
diff --git a/packages/playground/package.json b/packages/playground/package.json
index 3f4f6e3..1deece7 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -25,7 +25,7 @@
     "webpack-dev-server": "^4.15.1"
   },
   "scripts": {
-    "start": "webpack-dev-server --mode development --open --hot",
+    "start": "webpack-dev-server --mode development --open --hot --port 3005",
     "dev": "npm run start",
     "build": "webpack --mode production",
     "analyze-bundle": "node analyze.js"
diff --git a/packages/playground/src/data/allInputControlsTest.json b/packages/playground/src/data/allInputControlsTest.json
index 07b45db..9d1c38d 100644
--- a/packages/playground/src/data/allInputControlsTest.json
+++ b/packages/playground/src/data/allInputControlsTest.json
@@ -1,6 +1,7 @@
 {
     "layout": {
         "autoAdvanceSlides": false,
+        "defaultSlideButtonIcon": "ChevronRight",
         "slides": {
             "slide1": {
                 "title": "Beregn prisen for rengøring af fliser",

From a39ae618a46d74e52c91a01944de39d3bbaa005f Mon Sep 17 00:00:00 2001
From: "Simon S. Pedersen" <ssp@delegate.dk>
Date: Fri, 28 Jun 2024 10:23:00 +0200
Subject: [PATCH 047/118] feat: Added monaco editor and simple schema

---
 package-lock.json                             | 18 +++---
 packages/designer/package.json                | 15 +++--
 .../Components/Views/QuickFormSourceView.tsx  | 56 ++++++++++++++++---
 .../designer/src/Utils/SourceViewSchema.ts    | 49 ++++++++++++++++
 4 files changed, 112 insertions(+), 26 deletions(-)
 create mode 100644 packages/designer/src/Utils/SourceViewSchema.ts

diff --git a/package-lock.json b/package-lock.json
index c7beae3..ffebde0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10342,10 +10342,9 @@
       }
     },
     "node_modules/monaco-editor": {
-      "version": "0.46.0",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.46.0.tgz",
-      "integrity": "sha512-ADwtLIIww+9FKybWscd7OCfm9odsFYHImBRI1v9AviGce55QY8raT+9ihH8jX/E/e6QVSGM+pKj4jSUSRmALNQ==",
-      "peer": true
+      "version": "0.50.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.50.0.tgz",
+      "integrity": "sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA=="
     },
     "node_modules/mrmime": {
       "version": "2.0.0",
@@ -17554,6 +17553,7 @@
       "version": "1.0.0-vnext.13",
       "license": "MIT",
       "dependencies": {
+        "monaco-editor": "^0.50.0",
         "react": "18.2.0",
         "react-dom": "18.2.0"
       },
@@ -19107,6 +19107,7 @@
       "version": "file:packages/designer",
       "requires": {
         "@types/pako": "2.0.3",
+        "monaco-editor": "^0.50.0",
         "react": "18.2.0",
         "react-dom": "18.2.0"
       }
@@ -25438,10 +25439,9 @@
       "dev": true
     },
     "monaco-editor": {
-      "version": "0.46.0",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.46.0.tgz",
-      "integrity": "sha512-ADwtLIIww+9FKybWscd7OCfm9odsFYHImBRI1v9AviGce55QY8raT+9ihH8jX/E/e6QVSGM+pKj4jSUSRmALNQ==",
-      "peer": true
+      "version": "0.50.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.50.0.tgz",
+      "integrity": "sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA=="
     },
     "mrmime": {
       "version": "2.0.0",
@@ -27978,7 +27978,7 @@
         "ts-loader": "^9.5.1",
         "typescript": "5.4.2",
         "webpack": "^5.89.0",
-        "webpack-bundle-analyzer": "*",
+        "webpack-bundle-analyzer": "^4.10.2",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.15.1"
       }
diff --git a/packages/designer/package.json b/packages/designer/package.json
index 9e68da4..e837920 100644
--- a/packages/designer/package.json
+++ b/packages/designer/package.json
@@ -2,26 +2,25 @@
   "version": "1.0.0-vnext.13",
   "name": "@eavfw/quickform-designer",
   "dependencies": {
+    "monaco-editor": "^0.50.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "peerDependencies": {
+    "@craftjs/core": "^0.2.4",
+    "@eavfw/apps": "^1.4.0-vnext.33",
     "@eavfw/designer": "^1.1.1",
     "@eavfw/designer-core": "^1.1.1",
     "@eavfw/designer-nodes": "^1.1.2",
-
-    "@eavfw/apps": "^1.4.0-vnext.33",
-    "@eavfw/manifest": "^1.5.0-vnext.15",
     "@eavfw/forms": "^1.2.0-vnext.8",
+    "@eavfw/manifest": "^1.5.0-vnext.15",
     "@eavfw/utils": "^1.1.0-vnext.2",
-
-    "pako": "^2.0.4",
     "@fluentui/react-components": "=>9.46.0 <9.49.2",
-    "@craftjs/core": "^0.2.4",
     "@rjsf/core": "5.18.4",
     "@rjsf/fluentui-rc": "5.18.4",
+    "@rjsf/utils": "5.18.4",
     "@rjsf/validator-ajv8": "5.18.4",
-    "@rjsf/utils": "5.18.4"
+    "pako": "^2.0.4"
   },
   "devDependencies": {
     "@types/pako": "2.0.3"
@@ -40,4 +39,4 @@
   "scripts": {
     "release": "semantic-release -e semantic-release-monorepo"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/designer/src/Components/Views/QuickFormSourceView.tsx b/packages/designer/src/Components/Views/QuickFormSourceView.tsx
index e91c77d..5d18cbf 100644
--- a/packages/designer/src/Components/Views/QuickFormSourceView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSourceView.tsx
@@ -1,14 +1,52 @@
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useQuickFormDefinition } from "../../Contexts/QuickFormDefContext";
+import Editor, { OnMount, useMonaco } from "@monaco-editor/react";
+import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+import { sourceViewSchema } from "../../Utils/SourceViewSchema";
 
 export const QuickFormSourceView = () => {
+    try {
+        const { quickformpayload: updateQuickFormPayload } = useQuickFormDefinition();
+        const [height, setHeight] = useState<number>(0);
 
-    const { quickformpayload: updateQuickFormPayload } = useQuickFormDefinition();
-    return (
-        <div style={{ margin: "15px", backgroundColor: "white", padding: "15px", borderRadius: "5px" }}>
-                <pre>
-                    {JSON.stringify(updateQuickFormPayload, null, 4)}
-                </pre>
-        </div>
-    )
+        const data = JSON.stringify(updateQuickFormPayload, null, 4);
+        const editorRef = useRef<editor.IStandaloneCodeEditor>();
+        const div = useCallback((node: HTMLDivElement) => { }, []);
+        const handleEditorDidMount: OnMount = (editor, monaco) => {
+            editorRef.current = editor;
+            editor.onDidContentSizeChange(() => {
+                setHeight(Math.max(100, editor.getContentHeight()));
+                editor.layout();
+            });
+        };
+        const monaco = useMonaco();
+        useEffect(() => {
+            if (monaco) {
+                monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+                    validate: true, allowComments: true,
+                    //schemas: sourceViewSchema,
+                    schemaValidation: "error",
+                });
+            }
+        }, [monaco]);
 
-}
\ No newline at end of file
+        return (
+            <div style={{ height: height, width: "100%" }} ref={div}>
+                {data &&
+                    <Editor
+                        options={{
+                            automaticLayout: true,
+                            scrollBeyondLastLine: false
+                        }}
+                        onMount={handleEditorDidMount}
+                        defaultLanguage="json"
+                        value={data}
+                    />
+                }
+            </div>
+        );
+    } finally {
+        console.groupEnd();
+    }
+};
+export default QuickFormSourceView;
diff --git a/packages/designer/src/Utils/SourceViewSchema.ts b/packages/designer/src/Utils/SourceViewSchema.ts
new file mode 100644
index 0000000..bcf79f4
--- /dev/null
+++ b/packages/designer/src/Utils/SourceViewSchema.ts
@@ -0,0 +1,49 @@
+import { languages } from "monaco-editor";
+
+export const sourceViewSchema =
+  [
+    {
+      uri: "http://myserver/submitfields.json", // id of the first schema
+      fileMatch: ["*"], // associate with our model
+      schema: {
+        type: "object",
+        properties: {
+          uiSchema: {
+            $ref: "http://myserver/uiSchema.json" // reference the second schema
+          }
+        }
+      }
+    },
+
+    {
+      uri: "http://myserver/uiSchema.json", // id of the first schema
+      schema: {
+        type: "object",
+        properties: {
+          "ui:label": {
+            type: "string"
+          },
+        },
+        "patternProperties": {
+          "^\\w+$": {
+            "type": "object",
+            "properties": {
+              "ui:label": { "type": "string" },
+              "ui:placeholder": { "type": "string" },
+              "ui:inputProps": { $ref: "http://myserver/inputProps.json" }
+            }
+          }
+        }
+      }
+    },
+    {
+      uri: "http://myserver/inputProps.json", // id of the first schema
+      schema: {
+        type: "object",
+        properties: {
+          "beforeIcon": { enum: ["Email", "User"] },
+          "afterIcon": { enum: ["Email", "User"] },
+        }
+      }
+    }
+  ]
\ No newline at end of file

From b5b5046ba87bf20d552c53d01d7c7cc0624adef9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 15 Aug 2024 06:28:44 +0200
Subject: [PATCH 048/118] fix: monaco editor type / null checks on uischema,
 generated prop on designer definition

---
 package-lock.json                             |  9 +++----
 .../model/json-definitions/JsonDataModels.ts  |  1 +
 .../defaults/DefaultModelTransformer.ts       |  4 ++--
 packages/designer/package.json                |  2 +-
 .../Views/QuickFormQuestionsView.tsx          | 24 +++++++++++++++----
 .../Components/Views/QuickFormSourceView.tsx  |  4 ++--
 .../designer/src/Types/QuickFormDefinition.ts |  8 +++++++
 7 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ffebde0..981047d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10344,7 +10344,8 @@
     "node_modules/monaco-editor": {
       "version": "0.50.0",
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.50.0.tgz",
-      "integrity": "sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA=="
+      "integrity": "sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA==",
+      "peer": true
     },
     "node_modules/mrmime": {
       "version": "2.0.0",
@@ -17553,7 +17554,6 @@
       "version": "1.0.0-vnext.13",
       "license": "MIT",
       "dependencies": {
-        "monaco-editor": "^0.50.0",
         "react": "18.2.0",
         "react-dom": "18.2.0"
       },
@@ -17574,6 +17574,7 @@
         "@rjsf/fluentui-rc": "5.18.4",
         "@rjsf/utils": "5.18.4",
         "@rjsf/validator-ajv8": "5.18.4",
+        "monaco-editor": "^0.50.0",
         "pako": "^2.0.4"
       }
     },
@@ -19107,7 +19108,6 @@
       "version": "file:packages/designer",
       "requires": {
         "@types/pako": "2.0.3",
-        "monaco-editor": "^0.50.0",
         "react": "18.2.0",
         "react-dom": "18.2.0"
       }
@@ -25441,7 +25441,8 @@
     "monaco-editor": {
       "version": "0.50.0",
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.50.0.tgz",
-      "integrity": "sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA=="
+      "integrity": "sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA==",
+      "peer": true
     },
     "mrmime": {
       "version": "2.0.0",
diff --git a/packages/core/src/model/json-definitions/JsonDataModels.ts b/packages/core/src/model/json-definitions/JsonDataModels.ts
index e986309..954e97b 100644
--- a/packages/core/src/model/json-definitions/JsonDataModels.ts
+++ b/packages/core/src/model/json-definitions/JsonDataModels.ts
@@ -68,6 +68,7 @@ type QuickFormQuestionDefinition = {
      * The ordering of the question
      */
     order?: number
+
 }
 
 /**
diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
index de1a050..e12ed31 100644
--- a/packages/core/src/services/defaults/DefaultModelTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -173,8 +173,8 @@ function handleSubmit(submit: QuickFormSubmitDefinition, payload: any): SubmitMo
     });
 
     return {
-        text: uiSchema["ui:label"] === false ? '' : schema?.title ?? submit?.text ?? "Submit QuickForm",
-        paragraph: uiSchema["ui:label"] === false ? '' : schema?.description,
+        text: uiSchema?.["ui:label"] === false ? '' : schema?.title ?? submit?.text ?? "Submit QuickForm",
+        paragraph: uiSchema?.["ui:label"] === false ? '' : schema?.description,
         buttonText: submit?.buttonText ?? "Submit",
         submitFields: submitFieldsArray,
         submitUrl: submit.submitUrl,
diff --git a/packages/designer/package.json b/packages/designer/package.json
index e837920..247e5f8 100644
--- a/packages/designer/package.json
+++ b/packages/designer/package.json
@@ -2,7 +2,6 @@
   "version": "1.0.0-vnext.13",
   "name": "@eavfw/quickform-designer",
   "dependencies": {
-    "monaco-editor": "^0.50.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -20,6 +19,7 @@
     "@rjsf/fluentui-rc": "5.18.4",
     "@rjsf/utils": "5.18.4",
     "@rjsf/validator-ajv8": "5.18.4",
+    "monaco-editor": "^0.50.0",
     "pako": "^2.0.4"
   },
   "devDependencies": {
diff --git a/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx b/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
index 1a73686..096e856 100644
--- a/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
@@ -2,7 +2,7 @@
 import { removeNonAlphanumeric } from "@eavfw/utils";
 import Form from "@rjsf/fluentui-rc";
 import validator from '@rjsf/validator-ajv8';
-import { Dropdown, DropdownProps, Option, mergeClasses, Field, Input } from '@fluentui/react-components';
+import { Dropdown, DropdownProps, Option, mergeClasses, Field, Input, MessageBar, MessageBarBody, MessageBarTitle, makeStyles, tokens, shorthands } from '@fluentui/react-components';
 import { useViewStyles } from "../Styles/useViewStyles.styles";
 import { QuickFormDesignerDefinition } from "../../Types/QuickFormDefinition";
 import { FieldProps, ariaDescribedByIds } from "@rjsf/utils";
@@ -17,6 +17,12 @@ export const QuickformDesignerFields = {} as { [key: string]: React.FC<FieldProp
 export function registerInputControlDesignerField<T = any>(field: string, component: React.FC<FieldProps<T>>) {
     QuickformDesignerFields[field] = component as React.FC<FieldProps>;
 }
+
+const useQuickFormQuestionsViewStyles = makeStyles({
+    messageBar: {
+        ...shorthands.margin("0.285714rem"),
+    }
+});
 export const QuickFormQuestionsView: React.FC<{
     dispatch: React.Dispatch<React.SetStateAction<QuickFormDesignerDefinition>>,
     currentQuestion?: string,
@@ -24,6 +30,7 @@ export const QuickFormQuestionsView: React.FC<{
 }> = ({ currentQuestion, questions, dispatch }) => {
 
     const styles = useViewStyles();
+    const styles2 = useQuickFormQuestionsViewStyles();
     const schemas = resolveInputComponentSchemas();
 
     console.log("QuickFormQuestionsView", [currentQuestion, questions, currentQuestion && questions[currentQuestion]]);
@@ -47,9 +54,16 @@ export const QuickFormQuestionsView: React.FC<{
             uiSchema["text"] = { "ui:widget": "hidden" };
         }
 
-        return (
-            <div className={mergeClasses(styles.section, styles.sectionSlim)}>
+        return (<>
+            {questions[currentQuestion].generated && <MessageBar className={styles2.messageBar} intent={"warning"}>
+                <MessageBarBody>
+                    <MessageBarTitle>This question is generated</MessageBarTitle>
 
+
+                </MessageBarBody>
+            </MessageBar>}
+            <div className={mergeClasses(styles.section, styles.sectionSlim)}>
+               
                 <Field
                     label="Question?" hint="The question text"
                     orientation="horizontal"
@@ -112,12 +126,13 @@ export const QuickFormQuestionsView: React.FC<{
                 </Field>
 
                 {question.inputType &&
-                    <Form tagName="div" key={currentQuestion + question.inputType}
+                    <Form tagName="div" key={currentQuestion + question.inputType} 
                         templates={{ FieldTemplate: FieldTemplate, BaseInputTemplate: BaseInputTemplate }}
                         fields={QuickformDesignerFields}
                         validator={validator}
                         {...schemas[question.inputType]}
                         formData={questions[currentQuestion]}
+                        formContext={{ generated: questions[currentQuestion].generated }}
                         onChange={(a, b) => {
                             console.log("change", [a, b]);
 
@@ -132,6 +147,7 @@ export const QuickFormQuestionsView: React.FC<{
                     </Form>
                 }
             </div>
+        </>
         )
 
 
diff --git a/packages/designer/src/Components/Views/QuickFormSourceView.tsx b/packages/designer/src/Components/Views/QuickFormSourceView.tsx
index 5d18cbf..5221d08 100644
--- a/packages/designer/src/Components/Views/QuickFormSourceView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSourceView.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useQuickFormDefinition } from "../../Contexts/QuickFormDefContext";
-import Editor, { OnMount, useMonaco } from "@monaco-editor/react";
-import type { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+import Editor, { OnMount, useMonaco, } from "@monaco-editor/react";
+import type { editor } from 'monaco-editor';
 import { sourceViewSchema } from "../../Utils/SourceViewSchema";
 
 export const QuickFormSourceView = () => {
diff --git a/packages/designer/src/Types/QuickFormDefinition.ts b/packages/designer/src/Types/QuickFormDefinition.ts
index 94c0e14..e10ea6d 100644
--- a/packages/designer/src/Types/QuickFormDefinition.ts
+++ b/packages/designer/src/Types/QuickFormDefinition.ts
@@ -9,4 +9,12 @@ export type QuickFormDesignerDefinition = {
         activeQuestion?: string;
     },
     designerLocale?: Locale,
+    questions: {
+        [key: string]: {
+            /**
+             * If this question has been generated by some tool/framework and be used in designer if ediable.
+             */
+            generated?: boolean
+        }
+    }
 } & QuickFormDefinition;
\ No newline at end of file

From 38bbffc6fc8b41badf3b497446c5faa11398b88e Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Fri, 16 Aug 2024 17:29:19 +0200
Subject: [PATCH 049/118] fix: removed inputType parameter on
 useHandleEnterKeyPress hook as it was no longer being used.

---
 packages/core/src/components/intro/Intro.tsx                    | 2 +-
 .../question/input-types/baseinput/BaseInputComponent.tsx       | 2 +-
 .../src/components/renderers/slide-renderer/SlideRenderer.tsx   | 2 +-
 packages/core/src/components/submit/Submit.tsx                  | 2 +-
 packages/core/src/hooks/useHandleEnterKeypress.ts               | 2 +-
 .../playground/src/components/baseinput/BaseInputComponent.tsx  | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/components/intro/Intro.tsx b/packages/core/src/components/intro/Intro.tsx
index 403f447..2c4c3f7 100644
--- a/packages/core/src/components/intro/Intro.tsx
+++ b/packages/core/src/components/intro/Intro.tsx
@@ -13,7 +13,7 @@ export const Intro: React.FC<IntroProps> = ({ model, onBtnClick }) => {
     const { text, paragraph, buttonText } = model;
 
     /* Listens to enter key pressed */
-    useHandleEnterKeypress("intro", false, onBtnClick);
+    useHandleEnterKeypress(false, onBtnClick);
 
     return (
         <div style={introStyling}>
diff --git a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
index d87165b..8cce702 100644
--- a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
+++ b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
@@ -130,7 +130,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
     /**
      * While a base input component is active we should answer the question upon enter.
      */
-    useHandleEnterKeypress("baseinput", !questionModel.isActive, () => {
+    useHandleEnterKeypress(!questionModel.isActive, () => {
         answerQuestion(questionModel.logicalName, text, false);
     });
 
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index 337ea2e..3821a06 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -25,7 +25,7 @@ export const SlideRenderer: React.FC = () => {
     // console.log("showPressEnterCurrentSlide", currentSlide);
 
     /* Listens to enter key pressed */
-    useHandleEnterKeypress("slide", showPressEnter === false, goToNextSlide);
+    useHandleEnterKeypress(false, goToNextSlide);
 
     let nextAllowedEffectTime = useRef(new Date().getTime());
     useEffect(() => {
diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index 6a3394e..35bcc75 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -30,7 +30,7 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
     }
 
     /* Listens to enter key pressed */
-    useHandleEnterKeypress("submit", false, handleSubmit);
+    useHandleEnterKeypress(false, handleSubmit);
 
     return (
         <div style={submitStyling}>
diff --git a/packages/core/src/hooks/useHandleEnterKeypress.ts b/packages/core/src/hooks/useHandleEnterKeypress.ts
index 7bc728a..01628b8 100644
--- a/packages/core/src/hooks/useHandleEnterKeypress.ts
+++ b/packages/core/src/hooks/useHandleEnterKeypress.ts
@@ -1,7 +1,7 @@
 "use client";
 import { useEffect } from "react";
 
-export function useHandleEnterKeypress(inputType: "multilinetext" | string, disabled?: boolean, customFunc?: () => void) {
+export function useHandleEnterKeypress(disabled?: boolean, customFunc?: () => void) {
     useEffect(() => {
         function handleKeypress(event: KeyboardEvent) {
             if (event.key === "Enter") {
diff --git a/packages/playground/src/components/baseinput/BaseInputComponent.tsx b/packages/playground/src/components/baseinput/BaseInputComponent.tsx
index 658b751..907fae4 100644
--- a/packages/playground/src/components/baseinput/BaseInputComponent.tsx
+++ b/packages/playground/src/components/baseinput/BaseInputComponent.tsx
@@ -129,7 +129,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
     /**
      * While a base input component is active we should answer the question upon enter.
      */
-    useHandleEnterKeypress("baseinput", !questionModel.isActive, () => {
+    useHandleEnterKeypress(!questionModel.isActive, () => {
         answerQuestion(questionModel.logicalName, text, false);
     });
 

From 078ca899ab2373c50c0fa4561ecba1b3614e0b0b Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Fri, 16 Aug 2024 18:02:38 +0200
Subject: [PATCH 050/118] fix: moved defaultNextButtonText out of component as
 it was being defined two places. It is only defined in defaultState function
 now

---
 .../renderers/slide-renderer/SlideRenderer.tsx   | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index 3821a06..7783d48 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -14,15 +14,13 @@ export const SlideRenderer: React.FC = () => {
     const [className, setClassName] = useState(state.classes.slide);
 
     const currentSlide: SlideModel = state.slides[state.currIdx];
-    const buttonText: string = currentSlide?.buttonText ?? "OK";
-    // If not disabled by state.showPressEnter being set to false, and if the slide has questions, and all questions are not multilinetext, show the press enter message
-    const showPressEnter: boolean = (state.showPressEnter === false) ? false : (currentSlide?.questions !== undefined && currentSlide.questions.every(q => q.inputType !== "multilinetext" || !q.isActive));
 
-    /* KBA - Leaving this for now - have to get back to it since we never actually set .isActive property on question.. so we cant use it to condition with at the moment.. */
-    // const showPressEnter: boolean = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive) === false;
-    // console.log("showPressEnter", showPressEnter);
-    // console.log("showPressEnterCondition", currentSlide?.questions?.some(q => q.inputType === "multilinetext" && q.isActive));
-    // console.log("showPressEnterCurrentSlide", currentSlide);
+    // Determine whether to show the "Press Enter" message:
+    // 1. Only show if `state.showPressEnter` is not explicitly set to `false`.
+    // 2. The current slide must have questions, and all questions must either:
+    //    a) Not be of type "multilinetext", or
+    //    b) Be inactive.
+    const showPressEnter: boolean = (state.showPressEnter === false) ? false : (currentSlide?.questions !== undefined && currentSlide.questions.every(q => q.inputType !== "multilinetext" || !q.isActive));
 
     /* Listens to enter key pressed */
     useHandleEnterKeypress(false, goToNextSlide);
@@ -53,7 +51,7 @@ export const SlideRenderer: React.FC = () => {
                 showPressEnter={showPressEnter}
                 children={
                     <>
-                        {buttonText}<IconResolver type={currentSlide?.icon ?? state.defaultSlideButtonIcon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={20} />
+                        {currentSlide?.buttonText}<IconResolver type={currentSlide?.icon ?? state.defaultSlideButtonIcon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={20} />
                     </>
                 }
             />

From 221b700441cab8cb1130bee48da1c8a5f620a150 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Mon, 19 Aug 2024 13:31:37 +0200
Subject: [PATCH 051/118] fix: sets showEnter state on intro and submit slides
 from context

---
 packages/core/src/components/intro/Intro.tsx   | 4 +++-
 packages/core/src/components/submit/Submit.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/intro/Intro.tsx b/packages/core/src/components/intro/Intro.tsx
index 2c4c3f7..8cfb2fb 100644
--- a/packages/core/src/components/intro/Intro.tsx
+++ b/packages/core/src/components/intro/Intro.tsx
@@ -3,6 +3,7 @@ import { Button, Heading } from "../index";
 import { Paragraph } from "../../components/paragraph/Paragraph";
 import { IntroModel } from "../../model";
 import { useHandleEnterKeypress } from "../../hooks";
+import { useQuickForm } from "../../state";
 
 type IntroProps = {
     model: IntroModel;
@@ -11,6 +12,7 @@ type IntroProps = {
 
 export const Intro: React.FC<IntroProps> = ({ model, onBtnClick }) => {
     const { text, paragraph, buttonText } = model;
+    const { state } = useQuickForm();
 
     /* Listens to enter key pressed */
     useHandleEnterKeypress(false, onBtnClick);
@@ -25,7 +27,7 @@ export const Intro: React.FC<IntroProps> = ({ model, onBtnClick }) => {
             </Paragraph>
             <Button
                 onClick={() => onBtnClick()}
-                showPressEnter={true}
+                showPressEnter={typeof state.showPressEnter !== "undefined" && state.showPressEnter !== false}
                 style={{
                     fontSize: '1.8rem',
                     fontWeight: '500',
diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index 35bcc75..2fbeffd 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -62,7 +62,7 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
             </div>
 
             <Button
-                showPressEnter={true}
+                showPressEnter={typeof state.showPressEnter !== "undefined" && state.showPressEnter !== false}
                 onClick={handleSubmit}
             >
                 {buttonText}

From 180d2b9b88957b9c0ebc674dfd679fbb2b130b33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Mon, 19 Aug 2024 23:14:34 +0200
Subject: [PATCH 052/118] fix: small ui enhancements around nav, default button
 text and enter press

---
 packages/core/package.json                    |  2 +-
 .../src/components/icons/ArrowDownIcon.tsx    |  2 +-
 .../src/components/icons/ArrowLeftIcon.tsx    | 25 +++++++++++++++++
 .../src/components/icons/ArrowRightIcon.tsx   | 26 +++++++++++++++++
 .../navigation-button/NavigationButton.tsx    | 28 ++++++++++++++-----
 .../baseinput/BaseInputComponent.tsx          | 21 ++++++++++----
 packages/core/src/model/SlideModel.ts         | 14 +++++++++-
 .../defaults/DefaultModelTransformer.ts       | 22 +++++++++------
 packages/core/src/state/QuickformProvider.tsx |  2 +-
 packages/core/src/state/QuickformState.ts     |  2 +-
 .../NavigationActionHandler.ts                |  9 +++++-
 .../src/style/quickFormTokensDefinition.ts    | 15 +++++++---
 .../DropdownSelectOption.tsx                  |  4 +--
 13 files changed, 139 insertions(+), 33 deletions(-)
 create mode 100644 packages/core/src/components/icons/ArrowLeftIcon.tsx
 create mode 100644 packages/core/src/components/icons/ArrowRightIcon.tsx

diff --git a/packages/core/package.json b/packages/core/package.json
index 935912e..fda6217 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -7,7 +7,7 @@
   },
   "peerDependencies": {
     "@griffel/react": "1.5.23",
-    "@opentelemetry/api": "^1.8.0"
+    "@opentelemetry/api": "^1.8.0"  
   },
   "devDependencies": {
   },
diff --git a/packages/core/src/components/icons/ArrowDownIcon.tsx b/packages/core/src/components/icons/ArrowDownIcon.tsx
index 79fb076..4640be5 100644
--- a/packages/core/src/components/icons/ArrowDownIcon.tsx
+++ b/packages/core/src/components/icons/ArrowDownIcon.tsx
@@ -4,7 +4,7 @@ import type { IconProps } from "./iconProps";
 export const ArrowDownIcon: React.FC<IconProps> = ({ className, color }) => {
     return (
         <div className={className}>
-            <svg
+            <svg 
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
diff --git a/packages/core/src/components/icons/ArrowLeftIcon.tsx b/packages/core/src/components/icons/ArrowLeftIcon.tsx
new file mode 100644
index 0000000..d4ff465
--- /dev/null
+++ b/packages/core/src/components/icons/ArrowLeftIcon.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import type { IconProps } from "./iconProps";
+
+export const ArrowLeftIcon: React.FC<IconProps> = ({ className, color }) => {
+    return (
+         <div className={className}>
+            <svg transform="matrix(6.123233995736766e-17,1,-1,6.123233995736766e-17,0,0)"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                style={{ backgroundColor: 'transparent' }}
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M6 9L12 15L18 9"
+                    stroke={color}
+                    strokeWidth="1"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+            </svg>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/packages/core/src/components/icons/ArrowRightIcon.tsx b/packages/core/src/components/icons/ArrowRightIcon.tsx
new file mode 100644
index 0000000..98fb655
--- /dev/null
+++ b/packages/core/src/components/icons/ArrowRightIcon.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import type { IconProps } from "./iconProps";
+
+export const ArrowRightIcon: React.FC<IconProps> = ({ className, color }) => {
+    return (
+
+        <div className={className}>
+            <svg transform="matrix(1.8369701987210297e-16,1,1,-1.8369701987210297e-16,0,0)"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                style={{ backgroundColor: 'transparent' }}
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M6 9L12 15L18 9"
+                    stroke={color}
+                    strokeWidth="1"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+            </svg>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/packages/core/src/components/navigation-button/NavigationButton.tsx b/packages/core/src/components/navigation-button/NavigationButton.tsx
index ad8baa3..b898896 100644
--- a/packages/core/src/components/navigation-button/NavigationButton.tsx
+++ b/packages/core/src/components/navigation-button/NavigationButton.tsx
@@ -4,10 +4,13 @@ import { useQuickForm } from '../../state/QuickFormContext';
 import { ArrowUpIcon, ArrowDownIcon } from '../icons';
 import { quickformtokens } from '../../style/quickFormTokensDefinition';
 import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
+import { ArrowLeftIcon } from '../icons/ArrowLeftIcon';
+import { ArrowRightIcon } from '../icons/ArrowRightIcon';
 
 type NavigationButtonProps = {
     className?: string;
     style?: React.CSSProperties;
+    horizontal?: boolean;
 }
 
 const useNavigationStyles = makeStyles({
@@ -17,9 +20,11 @@ const useNavigationStyles = makeStyles({
         cursor: 'pointer',
         ...shorthands.borderWidth('1px'),
         ...shorthands.borderColor(quickformtokens.primary),
+        stroke: quickformtokens.onPrimary,
+        backgroundColor: quickformtokens.primary,
         ':hover': {
-            stroke: quickformtokens.onPrimary,
-            backgroundColor: quickformtokens.primary
+            stroke: quickformtokens.primary,
+            backgroundColor: quickformtokens.onPrimary
         },
     },
     icon: {
@@ -30,9 +35,10 @@ const useNavigationStyles = makeStyles({
         },
     },
     disabled: {
+        backgroundColor: quickformtokens.primaryDarker400,
         ':hover': {
-            stroke: quickformtokens.primary,
-            backgroundColor: 'transparent'
+            stroke: quickformtokens.onPrimary,
+            backgroundColor: quickformtokens.primary,
         },
     },
     left: {
@@ -47,7 +53,7 @@ const useNavigationStyles = makeStyles({
     },
 });
 
-export const NavigationButton: React.FC<NavigationButtonProps> = ({ className, style }) => {
+export const NavigationButton: React.FC<NavigationButtonProps> = ({ className, style, horizontal }) => {
     const styles = useNavigationStyles();
 
     const { goToNextSlide, goToPrevSlide, state } = useQuickForm();
@@ -70,7 +76,11 @@ export const NavigationButton: React.FC<NavigationButtonProps> = ({ className, s
                     disabled={disablePrevBtn}
                     onClick={goToPrevSlide}
                 >
-                    <ArrowDownIcon className={mergeClasses(styles.icon, disablePrevBtn && styles.disabled)} />
+                    {horizontal ?
+                        <ArrowLeftIcon  />
+                        :
+                        <ArrowDownIcon  />
+                    }
                 </button>
             </label>
 
@@ -81,7 +91,11 @@ export const NavigationButton: React.FC<NavigationButtonProps> = ({ className, s
                     disabled={disableNextBtn}
                     onClick={goToNextSlide}
                 >
-                    <ArrowUpIcon className={mergeClasses(styles.icon, disableNextBtn && styles.disabled)} />
+                    {horizontal ?
+                        <ArrowRightIcon  />
+                        :
+                        <ArrowUpIcon   />
+                    }
                 </button>
             </label>
         </div >
diff --git a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
index 8cce702..cbe3659 100644
--- a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
+++ b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
@@ -127,12 +127,22 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
             ref.current?.focus();
     }, [questionModel.isActive]);
 
-    /**
-     * While a base input component is active we should answer the question upon enter.
-     */
-    useHandleEnterKeypress(!questionModel.isActive, () => {
+    ///**
+    // * While a base input component is active we should answer the question upon enter.
+    // */
+    //useHandleEnterKeypress(!questionModel.isActive, () => {
+    //    answerQuestion(questionModel.logicalName, text, false);
+    //});
+
+    const handleBlur = () => {
+       
+        if (span) {
+            span.addEvent("BaseInputComponent:handleBlur");
+        }
         answerQuestion(questionModel.logicalName, text, false);
-    });
+        // Add any additional logic you want to execute on blur
+    };
+    
 
     return (
         <div className={mergeClasses(styles.inputContainer, className)} style={style}>
@@ -152,6 +162,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
                 placeholder={questionModel.placeholder}
                 value={text}
                 onChange={handleChange}
+                onBlur={handleBlur}
             />
             {afterIcon &&
                 <IconResolver
diff --git a/packages/core/src/model/SlideModel.ts b/packages/core/src/model/SlideModel.ts
index d0da370..7a0476a 100644
--- a/packages/core/src/model/SlideModel.ts
+++ b/packages/core/src/model/SlideModel.ts
@@ -2,7 +2,7 @@ import { IconType } from "../components/icons/IconResolver";
 import { resolveQuickFormService } from "../services/QuickFormServices";
 import { QuestionModel } from "./QuestionModel";
 import { QuestionJsonModel } from "./json-definitions/JsonDataModels";
-import { QuestionRef } from "./json-definitions/Layout";
+import { LayoutDefinition, QuestionRef, SlideLayout } from "./json-definitions/Layout";
 
 export class SlideModel {
     displayName?: string;
@@ -15,6 +15,18 @@ export class SlideModel {
         this.rows = rows;
     }
 
+    static factory(layout?: LayoutDefinition,slide?: SlideLayout ) {
+        const slideModel= new SlideModel();
+
+        slideModel.displayName = slide?.title;
+        slideModel.buttonText = slide?.buttonText ?? layout?.defaultNextButtonText;
+        slideModel.icon = slide?.icon ?? layout?.defaultSlideButtonIcon;
+
+        return slideModel;
+
+    }
+
+
     addQuestion(layout: QuestionRef, question: QuestionJsonModel, payload: any) {
         const mapJsonQuestionToModelQuestion = resolveQuickFormService("questionTransformer");
         const questionModel = mapJsonQuestionToModelQuestion(layout.ref, question, payload[question?.logicalName ?? layout.ref])
diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
index e12ed31..f30616a 100644
--- a/packages/core/src/services/defaults/DefaultModelTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -89,11 +89,10 @@ function handleLayout(layout: LayoutDefinition, questions: QuickFormQuestionsDef
 
     if (layout.slides) {
         Object.values(layout.slides).forEach(slide => {
-            const slideModel = new SlideModel();
-            slideModel.displayName = slide.title;
-            slideModel.buttonText = slide.buttonText ?? layout.defaultNextButtonText;
-            slideModel.icon = slide.icon ?? layout.defaultSlideButtonIcon;
 
+
+            const slideModel = SlideModel.factory(layout, slide);
+          
             if (slide.rows) {
                 slideModel.rows = processRows(slide.rows, slideModel, questions, payload);
             }
@@ -106,7 +105,7 @@ function handleLayout(layout: LayoutDefinition, questions: QuickFormQuestionsDef
     return slides;
 }
 
-function defaultLayout(questions: QuickFormQuestionsDefinition, payload: any): SlideModel[] {
+function defaultLayout(questions: QuickFormQuestionsDefinition, payload: any, layout?: LayoutDefinition): SlideModel[] {
 
     const logger = resolveQuickFormService("logger");
 
@@ -115,7 +114,8 @@ function defaultLayout(questions: QuickFormQuestionsDefinition, payload: any): S
     Object.keys(questions).map((key, index) => [key, index] as [string, number])
         .sort(([q1, i1], [q2, i2]) => (questions[q1].order ?? i1) - (questions[q2].order ?? i2))
         .map(([questionKey]) => {
-            let slide: SlideModel = createSlide({ [questionKey]: questions[questionKey] }, payload);
+            let slide: SlideModel = createSlide({ [questionKey]: questions[questionKey] }, payload,layout);
+
             slides.push(slide);
         });
 
@@ -124,11 +124,13 @@ function defaultLayout(questions: QuickFormQuestionsDefinition, payload: any): S
     return slides;
 }
 
-function createSlide(questions: QuickFormQuestionsDefinition, payload: any): SlideModel {
+function createSlide(questions: QuickFormQuestionsDefinition, payload: any, layout?: LayoutDefinition): SlideModel {
     const logger = resolveQuickFormService("logger");
 
     logger.log("Creating Slides for {@questions}", questions);
-    const slide = new SlideModel();
+  //  const slide = new SlideModel();
+    const slide = SlideModel.factory(layout);
+
     // Create rows from questions, assuming each question corresponds to a separate row
     const rows: Row[] = Object.entries(questions).map(([questionKey, question]) => {
         const questionRef = {
@@ -195,12 +197,14 @@ const transformJSONInput: QuickFormModelTransformer = (definition, payload): Qui
 
     // Transform questions into slides with rows and columns
     if (isDefined(definition.questions)) {
+
+
         if (definition.layout && definition.layout.slides && Object.keys(definition.layout.slides).length > 0) {
             // If layout is defined, assign slides as per layout
             slides = handleLayout(definition.layout!, definition.questions, payload);
         } else {
             // If layout is not defined, assign one question to each slide with only 1 column pr. slide
-            slides = defaultLayout(definition.questions, payload);
+            slides = defaultLayout(definition.questions, payload, definition.layout);
         }
     }
     else {
diff --git a/packages/core/src/state/QuickformProvider.tsx b/packages/core/src/state/QuickformProvider.tsx
index 0d750b2..189b7a1 100644
--- a/packages/core/src/state/QuickformProvider.tsx
+++ b/packages/core/src/state/QuickformProvider.tsx
@@ -39,7 +39,7 @@ export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
 
     const goToSlide = (index: number) => { dispatch({ type: 'SET_INDEX', index: index }); };
     const goToNextSlide = () => {
-        dispatch({ type: 'PROCESS_INTERMEDIATE_QUESTIONS', dispatch });
+        dispatch({ type: 'PROCESS_INTERMEDIATE_QUESTIONS', dispatch }); //Issue, this starts validation, nextslide should wait on validation if processing.
         dispatch({ type: 'NEXT_SLIDE' });
     };
     const goToPrevSlide = () => { dispatch({ type: 'PREV_SLIDE' }); };
diff --git a/packages/core/src/state/QuickformState.ts b/packages/core/src/state/QuickformState.ts
index a0db524..619f2d1 100644
--- a/packages/core/src/state/QuickformState.ts
+++ b/packages/core/src/state/QuickformState.ts
@@ -32,7 +32,7 @@ export const defaultState = (data: QuickFormModel = defaultData, layout?: Layout
     const defState = {
         autoAdvanceSlides: layout?.autoAdvanceSlides ?? false,
         enableQuestionNumbers: layout?.enableQuestionNumbers ?? false,
-        showPressEnter: layout?.showPressEnter ?? undefined,
+        showPressEnter: layout?.showPressEnter ?? undefined, 
         defaultNextButtonText: layout?.defaultNextButtonText ?? "Næste",
         defaultSlideButtonIcon: layout?.defaultSlideButtonIcon ?? undefined,
         classes: layout?.classes ?? {},
diff --git a/packages/core/src/state/action-handlers/NavigationActionHandler.ts b/packages/core/src/state/action-handlers/NavigationActionHandler.ts
index 1167666..0006f2f 100644
--- a/packages/core/src/state/action-handlers/NavigationActionHandler.ts
+++ b/packages/core/src/state/action-handlers/NavigationActionHandler.ts
@@ -54,6 +54,7 @@ export class NavigationActionHandler {
 
         // Check all visible questions for answered and validity
         const validationResult = this.validateQuestions(visibleQuestions);
+        console.log("reducer validationResult", validationResult)
         if (validationResult.isValid) {
             return this.computeProgress(NavigationActionHandler.handleSlideChange({ ...state, errorMsg: "" }, 'next'));
         } else {
@@ -62,13 +63,19 @@ export class NavigationActionHandler {
     };
 
     static validateQuestions = (questions: QuestionModel[]) => {
+        const logger = resolveQuickFormService("logger");
         if (questions.some((q: { answered: boolean; }) => q.answered === false)) {
             return { isValid: false, errorMsg: "Not all questions have been answered." };
         }
         if (questions.some((q: { output: any; }) => q.output === '' || typeof q.output === "undefined")) {
             return { isValid: false, errorMsg: "Some questions are missing outputs." };
         }
-        if (questions.some(q => !q.validationResult || q.validationResult?.isValid === false)) {
+        if (questions.some(q => !q.validationResult || (!q.validationResult?.isValidating && q.validationResult?.isValid === false))) {
+            //TODO, if its validating, should that block us from moving to next?
+            //For now i decided to allow it to move to next - before submitting we can always go back and error hints can be shown in ui.
+            //I dont think its critical that it allow to move on.  Right now this function is only called when validating if it can go to next slide
+            //it has nothing to do with actually validation of the form.
+            logger.log("Some questions have failed validation. {questions}", [questions, JSON.stringify(questions)]);
             return { isValid: false, errorMsg: "Some questions have failed validation." };
         }
 
diff --git a/packages/core/src/style/quickFormTokensDefinition.ts b/packages/core/src/style/quickFormTokensDefinition.ts
index f638d80..1907ad4 100644
--- a/packages/core/src/style/quickFormTokensDefinition.ts
+++ b/packages/core/src/style/quickFormTokensDefinition.ts
@@ -1,5 +1,7 @@
 /* Color-scheme is inspired by Material Design (https://m2.material.io/design/color/the-color-system.html#color-theme-creation) */
 
+import { log } from "console";
+import { resolveQuickFormService } from "../services/QuickFormServices";
 import { camelToKebabCase, defineVariables } from "../utils/quickformUtils";
 import { defaultQuickFormTokens } from "./defaultQuickFormTokens";
 
@@ -81,11 +83,16 @@ export type QuickFormTokens = QuickFormTokensBase & {
  * @returns A flat object with CSS camel-case variable names as keys and their corresponding values.
  */
 export const defineQuickFormTokens = (...tokens: Array<Partial<QuickFormTokens>>) => {
+    const logger = resolveQuickFormService("logger");
+    logger.log("Merging Quick Form tokens.", tokens);
     // Merges and overrides default tokens with provided ones in reverse order for precedence.
-    const mergedTokens = tokens.reduce((newTokens, currentToken) => ({
-        ...newTokens,
-        ...currentToken,
-    }), defaultQuickFormTokens);
+    const mergedTokens = tokens.reduceRight((prevTokens, currentTokens) => {
+        logger.log("Merging currentTokens into prevTokens", currentTokens, prevTokens);
+        return ({
+            ...prevTokens,
+            ...currentTokens,
+        })
+    }, defaultQuickFormTokens);
 
     // Ensures merged tokens are camelCase CSS variables that React.CSSProperties can use and return.
     return defineVariables(mergedTokens);
diff --git a/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx b/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
index 6fec517..904e0b0 100644
--- a/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
+++ b/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
@@ -30,7 +30,7 @@ const useDropDownSelectOptionStyles = makeStyles({
 
         cursor: 'pointer',
         ...shorthands.transition('background-color', '0.3s'),
-        overflowX: 'auto',
+       // overflowX: 'auto',
 
         color: quickformtokens.onSurface,
         backgroundColor: 'transparent',
@@ -62,7 +62,7 @@ export function DropdownSelectOption({
         >
             {children}
             {isSelected && (
-                <Checkmark color={quickformtokens.onSurface} size={24} />)}
+                <Checkmark style={{display:"flex"}} color={quickformtokens.onSurface} size={24} />)}
         </span>
     );
 }

From dc09dfc0072be2e1b1e87e0283675231403ef405 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 22 Aug 2024 07:12:34 +0200
Subject: [PATCH 053/118] fix: made source view able to update payload

---
 .../designer/src/Components/Views/QuickFormSourceView.tsx  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/designer/src/Components/Views/QuickFormSourceView.tsx b/packages/designer/src/Components/Views/QuickFormSourceView.tsx
index 5221d08..e6ce319 100644
--- a/packages/designer/src/Components/Views/QuickFormSourceView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSourceView.tsx
@@ -6,10 +6,10 @@ import { sourceViewSchema } from "../../Utils/SourceViewSchema";
 
 export const QuickFormSourceView = () => {
     try {
-        const { quickformpayload: updateQuickFormPayload } = useQuickFormDefinition();
+        const { quickformpayload, updateQuickFormPayload } = useQuickFormDefinition();
         const [height, setHeight] = useState<number>(0);
 
-        const data = JSON.stringify(updateQuickFormPayload, null, 4);
+        const data = JSON.stringify(quickformpayload, null, 4);
         const editorRef = useRef<editor.IStandaloneCodeEditor>();
         const div = useCallback((node: HTMLDivElement) => { }, []);
         const handleEditorDidMount: OnMount = (editor, monaco) => {
@@ -37,7 +37,8 @@ export const QuickFormSourceView = () => {
                         options={{
                             automaticLayout: true,
                             scrollBeyondLastLine: false
-                        }}
+                    }}
+                    onChange={(value) => { updateQuickFormPayload(old => { try { if (!value) return;  return JSON.parse(value); } catch (error) { } }); }}
                         onMount={handleEditorDidMount}
                         defaultLanguage="json"
                         value={data}

From f9b6844f6c8ecea42a388c63f3049f09b6f4c910 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 22 Aug 2024 18:42:30 +0200
Subject: [PATCH 054/118] fix: small style changes, todo griffel it

---
 packages/inputs/select/src/DropDownInput.module.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/inputs/select/src/DropDownInput.module.css b/packages/inputs/select/src/DropDownInput.module.css
index cf8974b..dd15aa3 100644
--- a/packages/inputs/select/src/DropDownInput.module.css
+++ b/packages/inputs/select/src/DropDownInput.module.css
@@ -7,9 +7,10 @@
 }
 
 .dropdown-container {
-    display: inline-flex;
-    flex-direction:column;
+    display: grid;
+    flex-direction: column;
     margin-top: calc(30px + 1.6rem);
+    grid-auto-rows: 1fr;
 }
 
     .dropdown-container > div {
@@ -34,7 +35,7 @@
     display: flex;
     font-size: 1.8rem;
     font-weight: 700;
-    height: calc(100% - 8px);
+    height:4rem; /* calc(100% - 8px);*/
     justify-content: center;
     margin-right: 10px;
     transition: background-color 0.5s, color 0.5s;
@@ -88,7 +89,7 @@
 
     .dropdown-text {
         display: block;
-        /*line-height: 1.25em;*/
+        line-height: 2rem;
         padding: 6px 0;
         width: 27rem;
     }

From 7bcb788f8576948cfef6860d4d507042d8ca9518 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Mon, 26 Aug 2024 05:31:08 +0200
Subject: [PATCH 055/118] fix: Added such ending slide is updated upon submit.
 Submit handler can return updated information

---
 packages/core/src/state/QuickFormContext.tsx       |  9 ++++++---
 packages/core/src/state/QuickformAction.ts         |  4 +++-
 packages/core/src/state/QuickformReducer.ts        | 14 ++++++++++++++
 .../state/action-handlers/SubmitActionHandler.ts   |  7 ++++++-
 .../src/Components/Views/QuickFormSourceView.tsx   |  4 ++--
 5 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/state/QuickFormContext.tsx b/packages/core/src/state/QuickFormContext.tsx
index 3b9ca02..9976a4e 100644
--- a/packages/core/src/state/QuickFormContext.tsx
+++ b/packages/core/src/state/QuickFormContext.tsx
@@ -2,7 +2,8 @@
 import React, { useContext } from "react";
 import { QuickformState, defaultState } from "./QuickformState";
 import { QuickformAction } from "./index";
-import { SlideModel } from "../model";
+import { QuickFormDefinition, SlideModel } from "../model";
+import { ServerActionSubmitHandler } from "./action-handlers/SubmitActionHandler";
 
 interface IQuickFormContext {
     state: QuickformState;
@@ -15,7 +16,7 @@ interface IQuickFormContext {
     setErrorMsg: (msg: string) => void;
     isFirstQuestionInCurrentSlide: (questionLogicalName: string) => boolean;
     getCurrentSlide: () => SlideModel;
-    onSubmitAsync?: (formdata: any) => Promise<string>;
+    onSubmitAsync?: ServerActionSubmitHandler,
     addPayloadAugmenter: (augmenter: (payload: any) => any) => void;
     removePayloadAugmenter: (augmenter: (payload: any) => any) => void;
     cssVariables: { [key: string]: string };
@@ -35,7 +36,9 @@ export const QuickFormContext = React.createContext<IQuickFormContext>(
         getCurrentSlide: () => (
             { questions: [], rows: [], isAnswered: false, addQuestion: () => ({ type: "question", ref: "" }) }
         ),
-        onSubmitAsync: async (formdata) => { return "" },
+        onSubmitAsync: async (formdata) => {
+            return {} as Partial<QuickFormDefinition>
+        },
         addPayloadAugmenter: () => { },
         removePayloadAugmenter: () => { },
         cssVariables: {}
diff --git a/packages/core/src/state/QuickformAction.ts b/packages/core/src/state/QuickformAction.ts
index 9856817..b70bf2c 100644
--- a/packages/core/src/state/QuickformAction.ts
+++ b/packages/core/src/state/QuickformAction.ts
@@ -1,5 +1,6 @@
 import { ValidationResult } from "../model/ValidationResult";
 import { SubmitStatus } from "../model/SubmitStatus";
+import { QuickFormDefinition } from "../model/json-definitions/QuickFormDefinition";
 
 export type QuickformAnswerQuestionAction = { type: 'ANSWER_QUESTION'; logicalName: string; output: string; dispatch: React.Dispatch<QuickformAction>, intermediate?: boolean, validationResult?: ValidationResult };
 
@@ -16,6 +17,7 @@ export type QuickformAction =
     | { type: 'SUBMIT', dispatch: React.Dispatch<QuickformAction>, id: string }
     | { type: 'SET_INTRO_VISITED' }
     | { type: 'GO_TO_ENDING' }
-    | { type: 'ADD_PAYLOAD_AUGMENTER', augmenter: (payload:any)=>any }
+    | { type: 'ADD_PAYLOAD_AUGMENTER', augmenter: (payload: any) => any }
     | { type: 'REMOVE_PAYLOAD_AUGMENTER', augmenter: (payload: any) => any }
+    | { type: 'UPDATE_QUICKFORM_DEFINITION', definition: QuickFormDefinition }
     ;
diff --git a/packages/core/src/state/QuickformReducer.ts b/packages/core/src/state/QuickformReducer.ts
index 06c959f..0a60667 100644
--- a/packages/core/src/state/QuickformReducer.ts
+++ b/packages/core/src/state/QuickformReducer.ts
@@ -19,7 +19,21 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
     }
 
     switch (action.type) {
+        case 'UPDATE_QUICKFORM_DEFINITION': {
+
+            console.log("Reducer", [state, action.definition]);
+            state = {
+                ...state, data: {
+                    ...state.data,
+                    ending: {
+                        ...state.data.ending,
+                        ...(action.definition.ending ?? {})
+                    },
+                }
+}
 
+            return state;
+        }
         case 'ADD_PAYLOAD_AUGMENTER': {
             state.payloadAugments = [...state.payloadAugments, action.augmenter];
             return state;
diff --git a/packages/core/src/state/action-handlers/SubmitActionHandler.ts b/packages/core/src/state/action-handlers/SubmitActionHandler.ts
index 212e18b..adbeeab 100644
--- a/packages/core/src/state/action-handlers/SubmitActionHandler.ts
+++ b/packages/core/src/state/action-handlers/SubmitActionHandler.ts
@@ -1,14 +1,19 @@
+import { QuickFormDefinition } from "../../model/json-definitions/QuickFormDefinition";
 import { resolveQuickFormService } from "../../services/QuickFormServices";
 import { QuickformAction, QuickformState } from "../index";
 
+export type ServerActionSubmitHandler = (data: any) => Promise<Partial<QuickFormDefinition>>;
 export class SubmitActionHandler {
-    static submit = async (state: QuickformState, dispatch: React.Dispatch<QuickformAction>, onSubmitAsync?: (data:any)=>Promise<string>) => {
+    static submit = async (state: QuickformState, dispatch: React.Dispatch<QuickformAction>, onSubmitAsync?: ServerActionSubmitHandler) => {
 
         try {
             const body = this.generatePayload(state);
 
             if (onSubmitAsync) {
                 const rsp = await onSubmitAsync(body);
+
+                dispatch({ type: "UPDATE_QUICKFORM_DEFINITION", definition: rsp });
+
             } else {
 
                 let rsp = await fetch(state.data.submit.submitUrl, {
diff --git a/packages/designer/src/Components/Views/QuickFormSourceView.tsx b/packages/designer/src/Components/Views/QuickFormSourceView.tsx
index e6ce319..7d5fc2b 100644
--- a/packages/designer/src/Components/Views/QuickFormSourceView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSourceView.tsx
@@ -31,14 +31,14 @@ export const QuickFormSourceView = () => {
         }, [monaco]);
 
         return (
-            <div style={{ height: height, width: "100%" }} ref={div}>
+            <div style={{ height: "100%", width: "100%" }} ref={div}>
                 {data &&
                     <Editor
                         options={{
                             automaticLayout: true,
                             scrollBeyondLastLine: false
                     }}
-                    onChange={(value) => { updateQuickFormPayload(old => { try { if (!value) return;  return JSON.parse(value); } catch (error) { } }); }}
+                    onChange={(value) => { updateQuickFormPayload(old => { try { if (!value) return;  return JSON.parse(value); } catch (error) {  } return old }); }}
                         onMount={handleEditorDidMount}
                         defaultLanguage="json"
                         value={data}

From af3872ee25338785cbf3ba725975d28497b946fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Mon, 26 Aug 2024 06:24:24 +0200
Subject: [PATCH 056/118] fix: regression on last release, type was set wrong

---
 packages/core/src/state/QuickformProvider.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/state/QuickformProvider.tsx b/packages/core/src/state/QuickformProvider.tsx
index 189b7a1..81603ba 100644
--- a/packages/core/src/state/QuickformProvider.tsx
+++ b/packages/core/src/state/QuickformProvider.tsx
@@ -7,6 +7,7 @@ import { QuickFormTokens, defineQuickFormTokens } from "../style/quickFormTokens
 import { QuickFormDefinition } from "../model";
 import { resolveQuickFormService } from "../services/QuickFormServices";
 import { isFirstQInCurrentSlide } from "../utils/isFirstQuestionInSlide";
+import { ServerActionSubmitHandler } from "./action-handlers/SubmitActionHandler";
 
 type QuickFormProviderProps = {
     children: React.ReactNode;
@@ -14,7 +15,7 @@ type QuickFormProviderProps = {
     tokens?: Partial<QuickFormTokens>;
     payload: any;
     asContainer?: boolean;
-    onSubmitAsync?: (formdata: any) => Promise<string>;
+    onSubmitAsync?: ServerActionSubmitHandler;
 }
 
 export const QuickFormProvider: React.FC<QuickFormProviderProps> = (

From 9ea3903c26d88a4e8f29ca7bb1dcfe145f1506be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Mon, 26 Aug 2024 06:51:43 +0200
Subject: [PATCH 057/118] fix: paragraph was not enabled on submit model

---
 .../src/model/json-definitions/QuickFormSubmitDefinition.ts     | 1 +
 packages/core/src/services/defaults/DefaultModelTransformer.ts  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/model/json-definitions/QuickFormSubmitDefinition.ts b/packages/core/src/model/json-definitions/QuickFormSubmitDefinition.ts
index 4eeaab1..57f7725 100644
--- a/packages/core/src/model/json-definitions/QuickFormSubmitDefinition.ts
+++ b/packages/core/src/model/json-definitions/QuickFormSubmitDefinition.ts
@@ -1,6 +1,7 @@
 
 export type QuickFormSubmitDefinition = {
     text: string;
+    paragraph: string;
     // paragraphs: string[];
     buttonText: string;
     submitFields: {
diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
index f30616a..bc70347 100644
--- a/packages/core/src/services/defaults/DefaultModelTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -176,7 +176,7 @@ function handleSubmit(submit: QuickFormSubmitDefinition, payload: any): SubmitMo
 
     return {
         text: uiSchema?.["ui:label"] === false ? '' : schema?.title ?? submit?.text ?? "Submit QuickForm",
-        paragraph: uiSchema?.["ui:label"] === false ? '' : schema?.description,
+        paragraph: uiSchema?.["ui:label"] === false ? '' : schema?.description ?? submit?.paragraph,
         buttonText: submit?.buttonText ?? "Submit",
         submitFields: submitFieldsArray,
         submitUrl: submit.submitUrl,

From 858d262a94f6b814996959cec3947d5e8f383515 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Mon, 26 Aug 2024 06:54:14 +0200
Subject: [PATCH 058/118] fix: forgot partial in actions

---
 packages/core/src/state/QuickformAction.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/state/QuickformAction.ts b/packages/core/src/state/QuickformAction.ts
index b70bf2c..184bb7c 100644
--- a/packages/core/src/state/QuickformAction.ts
+++ b/packages/core/src/state/QuickformAction.ts
@@ -19,5 +19,5 @@ export type QuickformAction =
     | { type: 'GO_TO_ENDING' }
     | { type: 'ADD_PAYLOAD_AUGMENTER', augmenter: (payload: any) => any }
     | { type: 'REMOVE_PAYLOAD_AUGMENTER', augmenter: (payload: any) => any }
-    | { type: 'UPDATE_QUICKFORM_DEFINITION', definition: QuickFormDefinition }
+    | { type: 'UPDATE_QUICKFORM_DEFINITION', definition: Partial<QuickFormDefinition> }
     ;

From 612a100723275c1ffb7822b7962fc4f2fe0b8bf8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 28 Aug 2024 18:28:35 +0200
Subject: [PATCH 059/118] fix: exposed classname on container/provider

---
 .../core/src/components/container/QuickFormContainer.tsx    | 6 +++---
 packages/core/src/state/QuickformProvider.tsx               | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/components/container/QuickFormContainer.tsx b/packages/core/src/components/container/QuickFormContainer.tsx
index fb3cd31..efe8132 100644
--- a/packages/core/src/components/container/QuickFormContainer.tsx
+++ b/packages/core/src/components/container/QuickFormContainer.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { makeStyles, shorthands } from "@griffel/react"
+import { makeStyles, mergeClasses, shorthands } from "@griffel/react"
 import { CSSProperties, PropsWithChildren } from "react";
 import { quickformtokens } from "../../style/quickFormTokensDefinition";
 
@@ -12,12 +12,12 @@ const useQuickFormContainerStyles = makeStyles({
     }
 });
 
-export const QuickFormContainer: React.FC<PropsWithChildren<{ style?: CSSProperties }>> = ({ children, style }) => {
+export const QuickFormContainer: React.FC<PropsWithChildren<{ style?: CSSProperties, className?: string }>> = ({ children, style, className }) => {
 
     const styles = useQuickFormContainerStyles();
 
     return (
-        <div className={styles.root} style={style} >
+        <div className={mergeClasses(styles.root, className)} style={style} >
             {children}
         </div>
     )
diff --git a/packages/core/src/state/QuickformProvider.tsx b/packages/core/src/state/QuickformProvider.tsx
index 189b7a1..a608d4f 100644
--- a/packages/core/src/state/QuickformProvider.tsx
+++ b/packages/core/src/state/QuickformProvider.tsx
@@ -9,6 +9,7 @@ import { resolveQuickFormService } from "../services/QuickFormServices";
 import { isFirstQInCurrentSlide } from "../utils/isFirstQuestionInSlide";
 
 type QuickFormProviderProps = {
+    className?: string;
     children: React.ReactNode;
     definition: QuickFormDefinition;
     tokens?: Partial<QuickFormTokens>;
@@ -24,7 +25,8 @@ export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
         payload,
         tokens,
         asContainer,
-        onSubmitAsync
+        onSubmitAsync,
+        className
     }
 ) => {
 
@@ -78,7 +80,7 @@ export const QuickFormProvider: React.FC<QuickFormProviderProps> = (
         }}>
 
             {asContainer ? (
-                <QuickFormContainer style={cssVariables}>
+                <QuickFormContainer className={ className} style={cssVariables}>
                     <ErrorPopup message={state.errorMsg} />
                     {children}
                 </QuickFormContainer>

From 874636994cfb8d1fc8e8b9ac83f0ee1216449ca2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 28 Aug 2024 19:13:43 +0200
Subject: [PATCH 060/118] fix: added a better sizing on icons

---
 .../src/components/renderers/slide-renderer/SlideRenderer.tsx   | 2 +-
 packages/core/src/style/defaultQuickFormTokens.ts               | 2 ++
 packages/core/src/style/quickFormTokensDefinition.ts            | 2 ++
 .../dropdown-select-option/DropdownSelectOption.tsx             | 2 +-
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index 7783d48..be77dbd 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -51,7 +51,7 @@ export const SlideRenderer: React.FC = () => {
                 showPressEnter={showPressEnter}
                 children={
                     <>
-                        {currentSlide?.buttonText}<IconResolver type={currentSlide?.icon ?? state.defaultSlideButtonIcon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={20} />
+                        {currentSlide?.buttonText}<IconResolver type={currentSlide?.icon ?? state.defaultSlideButtonIcon} style={{ display:"flex", height: quickformtokens.slideButtonIconSize, width: quickformtokens.slideButtonIconSize, marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={"100%"} />
                     </>
                 }
             />
diff --git a/packages/core/src/style/defaultQuickFormTokens.ts b/packages/core/src/style/defaultQuickFormTokens.ts
index 97d8afc..b7e2ab1 100644
--- a/packages/core/src/style/defaultQuickFormTokens.ts
+++ b/packages/core/src/style/defaultQuickFormTokens.ts
@@ -72,4 +72,6 @@ export const defaultQuickFormTokens: QuickFormTokens = {
     lowEmphasisOpacity: 0.38,
     mediumEmphasisOpacity: 0.60,
     highEmphasisOpacity: 0.87,
+
+    slideButtonIconSize: '1.5rem',
 };
diff --git a/packages/core/src/style/quickFormTokensDefinition.ts b/packages/core/src/style/quickFormTokensDefinition.ts
index 1907ad4..37d24eb 100644
--- a/packages/core/src/style/quickFormTokensDefinition.ts
+++ b/packages/core/src/style/quickFormTokensDefinition.ts
@@ -67,6 +67,8 @@ type QuickFormTokensBase = {
     questionPadding: string;
     questionInputGap: Gap,
     questionPaddingBottom: string;
+
+    slideButtonIconSize: string;
 };
 
 export type QuickFormTokens = QuickFormTokensBase & {
diff --git a/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx b/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
index 904e0b0..23953af 100644
--- a/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
+++ b/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
@@ -62,7 +62,7 @@ export function DropdownSelectOption({
         >
             {children}
             {isSelected && (
-                <Checkmark style={{display:"flex"}} color={quickformtokens.onSurface} size={24} />)}
+                <Checkmark style={{display:"flex"}} color={quickformtokens.onSurface} size={"2rem"} />)}
         </span>
     );
 }

From 6bdc3b3f32074bdb5ec7856047be9d33006cef74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 28 Aug 2024 20:10:15 +0200
Subject: [PATCH 061/118] fix: added defaut value to other token sets

---
 packages/core/src/style/kbaQuickFormTokens.ts    | 1 +
 packages/core/src/style/modernQuickFormTokens.ts | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/core/src/style/kbaQuickFormTokens.ts b/packages/core/src/style/kbaQuickFormTokens.ts
index 204b5b3..e64256d 100644
--- a/packages/core/src/style/kbaQuickFormTokens.ts
+++ b/packages/core/src/style/kbaQuickFormTokens.ts
@@ -74,4 +74,5 @@ export const kbaQuickFormTokens: QuickFormTokens = {
     lowEmphasisOpacity: 0.38,
     mediumEmphasisOpacity: 0.60,
     highEmphasisOpacity: 0.87,
+    slideButtonIconSize: '1.5rem',
 };
diff --git a/packages/core/src/style/modernQuickFormTokens.ts b/packages/core/src/style/modernQuickFormTokens.ts
index e778503..59e3e6c 100644
--- a/packages/core/src/style/modernQuickFormTokens.ts
+++ b/packages/core/src/style/modernQuickFormTokens.ts
@@ -74,4 +74,6 @@ export const modernQuickFormTokens: QuickFormTokens = {
     lowEmphasisOpacity: 0.38,
     mediumEmphasisOpacity: 0.60,
     highEmphasisOpacity: 0.87,
+
+    slideButtonIconSize: '1.5rem',
 };

From 03436066a98f4c7cdf20a86792ef07d62c9ecb06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 29 Aug 2024 06:11:57 +0200
Subject: [PATCH 062/118] fix: after introduction to intermediate answers, we
 dont need a seperate state. added lineheight = fontsize

---
 .../question/input-types/baseinput/BaseInputComponent.tsx | 8 ++++----
 .../dropdown-select-option/DropdownSelectOption.tsx       | 3 ++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
index cbe3659..f4269be 100644
--- a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
+++ b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
@@ -70,7 +70,7 @@ type BaseInputComponentProps = {
 
 export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ questionModel, className, style, type, beforeIcon, afterIcon }) => {
 
-    const [text, setText] = useState<string>(questionModel!.output);
+   // const [text, setText] = useState<string>(questionModel!.output);
     const ref = useFocusableQuestion<HTMLInputElement>(questionModel.logicalName);
     const { answerQuestion } = useQuickForm();
     const styles = useInputTextStyles();
@@ -112,7 +112,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
             questionModel.errorMsg = "";
 
 
-        setText(() => event.target.value);
+       // setText(() => event.target.value);
         answerQuestion(questionModel.logicalName, event.target.value, true);
         resize();
     }
@@ -139,7 +139,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
         if (span) {
             span.addEvent("BaseInputComponent:handleBlur");
         }
-        answerQuestion(questionModel.logicalName, text, false);
+        answerQuestion(questionModel.logicalName, questionModel!.output, false);
         // Add any additional logic you want to execute on blur
     };
     
@@ -160,7 +160,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
                 type={type}
                 className={styles.inputText}
                 placeholder={questionModel.placeholder}
-                value={text}
+                value={questionModel!.output}
                 onChange={handleChange}
                 onBlur={handleBlur}
             />
diff --git a/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx b/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
index 23953af..3f59da9 100644
--- a/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
+++ b/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
@@ -26,6 +26,7 @@ const useDropDownSelectOptionStyles = makeStyles({
         marginLeft: '8px',
         marginBottom: '5px',
         fontSize: '2rem',
+        lineHeight: '2rem',
         minHeight: '40px',
 
         cursor: 'pointer',
@@ -54,7 +55,7 @@ export function DropdownSelectOption({
     const selectOptionStyles = useDropDownSelectOptionStyles();
     return (
         <span
-            className={classNames(styles["dropdown-select__option"], className, mergeClasses(selectOptionStyles.option, isSelected && selectOptionStyles.selected), {
+            className={classNames(styles["dropdown-select__option"], mergeClasses(className,selectOptionStyles.option, isSelected && selectOptionStyles.selected), {
                 [styles["animate"]]: isSelected,
                 [styles["selected"]]: isSelected,
             })}

From afce66dfef449465e00a4633697b0754a57d68a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Fri, 30 Aug 2024 10:13:00 +0200
Subject: [PATCH 063/118] fix: updated useDocument to reload when server has
 changed

---
 packages/core/src/components/QuickForm.tsx |  4 ++--
 packages/designer/src/Hooks/useDocument.ts | 18 +++++++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/QuickForm.tsx b/packages/core/src/components/QuickForm.tsx
index ac4f6b0..7a28d56 100644
--- a/packages/core/src/components/QuickForm.tsx
+++ b/packages/core/src/components/QuickForm.tsx
@@ -19,8 +19,8 @@ export const QuickForm: React.FC = () => {
     };
 
     return (
-        <div>
+         <>
             {renderComponent()}
-        </div>
+        </>
     );
 };
diff --git a/packages/designer/src/Hooks/useDocument.ts b/packages/designer/src/Hooks/useDocument.ts
index c883538..e9f132f 100644
--- a/packages/designer/src/Hooks/useDocument.ts
+++ b/packages/designer/src/Hooks/useDocument.ts
@@ -1,5 +1,5 @@
 import { useEAVForm } from "@eavfw/forms";
-import { AttributeDefinition, isLookup } from "@eavfw/manifest";
+import { AttributeDefinition, isLookup, queryEntitySWR, getRecordSWR } from "@eavfw/manifest";
 import { gzip, ungzip } from "pako";
 import { useMemo, useEffect, useState } from "react";
 import { QuickFormDesignerDefinition } from "../Types/QuickFormDefinition";
@@ -15,6 +15,22 @@ export const useDocument = (entityName: string, attributeName: string, designerL
 
     const [formData, { onChange: onFormDataChange }] = useEAVForm((state) => state.formValues);
 
+
+    const serverside = getRecordSWR(entity.collectionSchemaName, formData?.id, "?$select=rowversion", formData?.id, undefined, 30);
+    const isChanged = serverside?.record?.rowversion && formData.rowversion !== serverside?.record?.rowversion;
+    const { record, mutate } = getRecordSWR(app.getEntityFromKey("Document").collectionSchemaName, formData[column.logicalName], undefined, isChanged);
+    console.log("useDocument", [entityName, attributeName, column, formData, record, formData.rowversion, serverside?.record?.rowversion]);
+    useEffect(() => {
+        console.log("useDocument Refresh", record);
+    }, [record]);
+    useEffect(() => {
+        console.log("useDocument mutate", [formData.rowversion, serverside?.record?.rowversion]);
+        if (isChanged) {
+            window.location.reload();
+            //mutate();
+        }
+    }, [formData.rowversion,serverside?.record?.rowversion])
+
     const quickformLocale = designerLocale ?? {
         Title: "QuickForm",
     };

From 799d649e255c0e3510728d4b6014b9c41706fa96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Tue, 3 Sep 2024 07:59:52 +0200
Subject: [PATCH 064/118] fix: added styles/classes support for ending and
 submit also.

---
 .../core/src/components/ending/Ending.tsx     | 20 +++++++++-------
 .../slide-renderer/SlideRenderer.tsx          |  1 +
 .../core/src/components/submit/Submit.tsx     | 24 ++++++++++++-------
 packages/core/src/state/QuickformState.ts     |  2 +-
 4 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/packages/core/src/components/ending/Ending.tsx b/packages/core/src/components/ending/Ending.tsx
index 18be207..f0d1dac 100644
--- a/packages/core/src/components/ending/Ending.tsx
+++ b/packages/core/src/components/ending/Ending.tsx
@@ -5,24 +5,28 @@ import { ErrorIcon, Checkmark } from "../icons/index";
 import { useQuickForm } from "../../state/QuickFormContext";
 import { EndingModel } from "../../model";
 import { quickformtokens } from "../../style/quickFormTokensDefinition";
+import { makeStyles, mergeClasses } from "@griffel/react";
 
 type EndingProps = {
     model: EndingModel;
 }
-
-const endingStyles: React.CSSProperties = {
-    display: 'flex',
-    justifyContent: 'center',
-    flexDirection: 'column'
-}
+ 
+const useEndingStyles = makeStyles({
+    ending: {
+        display: 'flex',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        width:"100%",
+    }
+});
 
 export const Ending: React.FC<EndingProps> = ({ model }) => {
     const { state } = useQuickForm();
     const { text, paragraph } = model;
     const submitStatus = state.submitStatus;
-
+    const styles = useEndingStyles();
     return (
-        <div style={endingStyles}>
+        <div className={mergeClasses(styles.ending, state.classes.ending)}>
             {submitStatus.isSubmitError &&
                 <>
                     <ErrorIcon color={quickformtokens.onSurface} />
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index be77dbd..9a03fa2 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -8,6 +8,7 @@ import { mergeClasses } from '@griffel/react';
 import { IconResolver } from '../../icons/IconResolver';
 import { SlideModel } from '../../../model';
 
+
 export const SlideRenderer: React.FC = () => {
 
     const { state, goToNextSlide } = useQuickForm();
diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index 2fbeffd..ba86312 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -4,20 +4,33 @@ import { useQuickForm } from "../../state/QuickFormContext";
 import { Heading, Paragraph, Button, Spinner, Question } from "../index";
 import { SubmitActionHandler } from "../../state/action-handlers/SubmitActionHandler";
 import { useHandleEnterKeypress } from "../../hooks";
+import { makeStyles, mergeClasses } from "@griffel/react";
 
 type SubmitProps = {
     model: SubmitModel;
 }
 
+const useSubmitStyles = makeStyles({
+    submit: {
+        display: 'flex',
+        flexDirection: 'column',
+        maxWidth: '72rem',
+        transition: 'transform 0.3s ease-out',
+        width: '100%',
+    }
+});
+
 export const Submit: React.FC<SubmitProps> = ({ model }) => {
     const { state, dispatch, onSubmitAsync } = useQuickForm();
     const { text, paragraph, buttonText, submitFields = [] } = model;
 
+    const styles = useSubmitStyles();
+
     if (state.submitStatus.isSubmitting) {
         return <Spinner speed="medium" message="Submitting.. Please wait.." />
     }
 
-
+  
 
     const handleSubmit = async () => {
         dispatch({ type: "SET_SUBMIT_STATUS", status: { ...state.submitStatus, isSubmitting: true } });
@@ -33,7 +46,7 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
     useHandleEnterKeypress(false, handleSubmit);
 
     return (
-        <div style={submitStyling}>
+        <div className={mergeClasses(styles.submit, state.classes.submit)}>
             <Heading >
                 {text}
             </Heading>
@@ -72,9 +85,4 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
     )
 };
 
-const submitStyling: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-    maxWidth: '72rem',
-    transition: 'transform 0.3s ease-out',
-}
\ No newline at end of file
+ 
\ No newline at end of file
diff --git a/packages/core/src/state/QuickformState.ts b/packages/core/src/state/QuickformState.ts
index 619f2d1..31564aa 100644
--- a/packages/core/src/state/QuickformState.ts
+++ b/packages/core/src/state/QuickformState.ts
@@ -3,7 +3,7 @@ import { SlideModel } from "../model/SlideModel";
 import { LayoutDefinition, QuickFormModel } from "../model";
 import { IconType } from "../components/icons/IconResolver";
 
-export type QuickformClassNames = { slide: string, slideIsIn: string, slideIsOut: string };
+export type QuickformClassNames = { slide: string, slideIsIn: string, slideIsOut: string, submit:string, ending:string };
 export type QuickformState = {
     autoAdvanceSlides?: boolean;
     enableQuestionNumbers?: boolean;

From 2c950e0930af3b0063b88dd2524e3b5ca117da63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 4 Sep 2024 10:53:37 +0200
Subject: [PATCH 065/118] fix: added option to generate slide with all
 questions

---
 .../core/src/components/button/Button.tsx     |  1 +
 .../slide-renderer/SlideRenderer.tsx          |  4 ++--
 .../core/src/components/submit/Submit.tsx     |  2 ++
 .../core/src/model/json-definitions/Layout.ts |  6 +++++
 .../defaults/DefaultModelTransformer.ts       | 24 ++++++++++++-------
 5 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/components/button/Button.tsx b/packages/core/src/components/button/Button.tsx
index f886565..7aa31cd 100644
--- a/packages/core/src/components/button/Button.tsx
+++ b/packages/core/src/components/button/Button.tsx
@@ -17,6 +17,7 @@ const useButtonStyles = makeStyles({
     container: {
         display: 'flex',
         alignItems: 'center',
+        justifyContent:'center',
         ...shorthands.gap(quickformtokens.gap1),
         marginTop: '30px',
     },
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index 9a03fa2..388a961 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -8,7 +8,7 @@ import { mergeClasses } from '@griffel/react';
 import { IconResolver } from '../../icons/IconResolver';
 import { SlideModel } from '../../../model';
 
-
+ 
 export const SlideRenderer: React.FC = () => {
 
     const { state, goToNextSlide } = useQuickForm();
@@ -47,7 +47,7 @@ export const SlideRenderer: React.FC = () => {
         >
             <Slide model={currentSlide} />
             <Button
-                style={{ display: 'flex', alignItems: 'center', justifyContent: 'start' }}
+                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                 onClick={goToNextSlide}
                 showPressEnter={showPressEnter}
                 children={
diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index ba86312..6b08863 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { SubmitModel } from "../../model";
 import { useQuickForm } from "../../state/QuickFormContext";
diff --git a/packages/core/src/model/json-definitions/Layout.ts b/packages/core/src/model/json-definitions/Layout.ts
index f364b78..2e5b2be 100644
--- a/packages/core/src/model/json-definitions/Layout.ts
+++ b/packages/core/src/model/json-definitions/Layout.ts
@@ -27,6 +27,12 @@ export type LayoutDefinition = {
      */
     defaultSlideButtonIcon?: IconType;
     slides?: { [key: string]: SlideLayout };
+
+    /**
+     * If enabled, only one question is shown per slide when auto generating slides
+     * Defaults to true
+     */
+    defaultLayoutOneQuestionPerSlide?: boolean;
 }
 
 /**
diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
index bc70347..259a851 100644
--- a/packages/core/src/services/defaults/DefaultModelTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -110,15 +110,18 @@ function defaultLayout(questions: QuickFormQuestionsDefinition, payload: any, la
     const logger = resolveQuickFormService("logger");
 
     const slides: SlideModel[] = [];
-
-    Object.keys(questions).map((key, index) => [key, index] as [string, number])
-        .sort(([q1, i1], [q2, i2]) => (questions[q1].order ?? i1) - (questions[q2].order ?? i2))
-        .map(([questionKey]) => {
-            let slide: SlideModel = createSlide({ [questionKey]: questions[questionKey] }, payload,layout);
-
-            slides.push(slide);
-        });
-
+    if (layout?.defaultLayoutOneQuestionPerSlide ?? true) {
+        Object.keys(questions).map((key, index) => [key, index] as [string, number])
+            .sort(([q1, i1], [q2, i2]) => (questions[q1].order ?? i1) - (questions[q2].order ?? i2))
+            .map(([questionKey]) => {
+                let slide: SlideModel = createSlide({ [questionKey]: questions[questionKey] }, payload, layout);
+
+                slides.push(slide);
+            });
+        //   console.log(slides);
+    } else {
+        slides.push(createSlide(questions, payload, layout))
+    }
     logger.log("Generated {@slides} from layout", slides);
 
     return slides;
@@ -195,6 +198,9 @@ const transformJSONInput: QuickFormModelTransformer = (definition, payload): Qui
     const logger = resolveQuickFormService("logger");
     logger.log("Transforming Quickform Def to Model with\n\nlayout:\n{@layout}\nquestions:\n{@questions}\nsubmit:\n{@submit}\npayload:\n{@payload}", definition.layout, definition.questions, definition.submit, payload);
 
+
+    
+
     // Transform questions into slides with rows and columns
     if (isDefined(definition.questions)) {
 

From 8539edf69d24d64dc229e65e2930e0614c4e8071 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Wed, 4 Sep 2024 12:12:37 +0200
Subject: [PATCH 066/118] fix: react hooks issue

---
 packages/core/src/components/submit/Submit.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index 6b08863..aa9941e 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -28,10 +28,7 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
 
     const styles = useSubmitStyles();
 
-    if (state.submitStatus.isSubmitting) {
-        return <Spinner speed="medium" message="Submitting.. Please wait.." />
-    }
-
+   
   
 
     const handleSubmit = async () => {
@@ -47,6 +44,11 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
     /* Listens to enter key pressed */
     useHandleEnterKeypress(false, handleSubmit);
 
+    if (state.submitStatus.isSubmitting) {
+        return <Spinner speed="medium" message="Submitting.. Please wait.." />
+    }
+
+
     return (
         <div className={mergeClasses(styles.submit, state.classes.submit)}>
             <Heading >

From 345da8d7429803f9ad349f7e7d5dfdf7e07b6926 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 5 Sep 2024 13:00:49 +0200
Subject: [PATCH 067/118] fix: added displayname

---
 .../Components/Drawers/QuestionTreeItem.tsx   |  6 +++---
 .../Header/QuickFormSettingsViewHeader.tsx    | 21 ++++++++++++-------
 .../designer/src/Types/QuickFormDefinition.ts |  5 ++++-
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/designer/src/Components/Drawers/QuestionTreeItem.tsx b/packages/designer/src/Components/Drawers/QuestionTreeItem.tsx
index b93e62e..f5a596d 100644
--- a/packages/designer/src/Components/Drawers/QuestionTreeItem.tsx
+++ b/packages/designer/src/Components/Drawers/QuestionTreeItem.tsx
@@ -36,7 +36,7 @@ const QuestionTreeItem: React.FC<QuestionTreeItemProps> = ({ setView, setActiveQ
     const styles = useNavDrawerStyles();
     const sortedQuestions = useMemo(() => {
 
-        return Object.entries(quickformpayload.questions ?? {}).map(([key, question], index) => [key, question, index] as [string, QuestionJsonModel, number])
+        return Object.entries(quickformpayload.questions ?? {}).map(([key, question], index) => [key, question, index] as [string, typeof question, number])
             .sort(([_, qa, ai], [__, qb, bi]) => (qa.order ?? ai) - (qb.order ?? bi));
 
     }, [quickformpayload])
@@ -119,8 +119,8 @@ const QuestionTreeItem: React.FC<QuestionTreeItemProps> = ({ setView, setActiveQ
                                     icon={<TrashCanIcon />}
                                 />
                             </>
-                        }}>                       
-                        {question.logicalName ? key : question.text}
+                        }}>
+                        {question.displayName ?? question.text}
                     </TreeItemLayout>
                 </TreeItem>
             ))}
diff --git a/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx b/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx
index cdb1faf..bf1252d 100644
--- a/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx
+++ b/packages/designer/src/Components/Header/QuickFormSettingsViewHeader.tsx
@@ -43,21 +43,25 @@ export const QuickFormSettingsViewHeader: React.FC = () => {
     const { view, activeQuestion, activeSlide, quickformpayload: { layout, questions }, updateQuickFormPayload, designerLocale } = useQuickFormDefinition();
 
     const [questionKey, setQuestionKey] = useState(activeQuestion ?? '');
+    const [displayName, setDisplayName] = useState(questions[activeQuestion!]?.displayName ?? questions[activeQuestion!]?.text);
+   
+
+
     useEffect(() => { setQuestionKey(activeQuestion ?? ''); }, [activeQuestion])
 
-    const segments = [designerLocale.Title, view, activeQuestion, activeSlide && layout?.slides?.[activeSlide]?.schemaName].filter(x => !!x) as string[];
+    const segments = [designerLocale.Title, view, questions[activeQuestion!]?.displayName?? activeQuestion, activeSlide && layout?.slides?.[activeSlide]?.schemaName].filter(x => !!x) as string[];
     const handleSubmit: React.MouseEventHandler<HTMLButtonElement> = (ev) => {
 
         if (activeQuestion) {
             updateQuickFormPayload(old => {
 
-                let text = questionKey;
+                let text = displayName;
                 let schemaName = removeNonAlphanumeric(text);
                 let logicalName = schemaName.toLowerCase();
 
-                old.questions[text] = { ...old.questions[activeQuestion], schemaName, logicalName };
-                if (text !== activeQuestion)
-                    delete old.questions[activeQuestion];
+                old.questions[activeQuestion] = { ...old.questions[activeQuestion], schemaName, logicalName, displayName  };
+               // if (text !== activeQuestion)
+               //     delete old.questions[activeQuestion];
 
                 if (!old.__designer)
                     old.__designer = {};
@@ -83,8 +87,11 @@ export const QuickFormSettingsViewHeader: React.FC = () => {
                     <DialogBody>
                         <DialogTitle>Question Settings</DialogTitle>
                         <DialogContent className={dialogstyles.content}>
-                            <Field label="Question Key">
-                                <Input value={questionKey} required type="text" id={"question-schema-name"} onChange={(e, d) => setQuestionKey(d.value)} />
+                            <Field label="Question Key" aria-readonly>
+                                <Input readOnly value={questionKey} required type="text" id={"question-key"} onChange={(e, d) => setQuestionKey(d.value)} />
+                            </Field>
+                            <Field label="Display Name" aria-readonly>
+                                <Input readOnly value={displayName ?? questions[activeQuestion!]?.text} required type="text" id={"question-display-name"} onChange={(e, d) => setDisplayName(d.value)} />
                             </Field>
                             {activeQuestion &&
                                 <Field label="Question Order">
diff --git a/packages/designer/src/Types/QuickFormDefinition.ts b/packages/designer/src/Types/QuickFormDefinition.ts
index e10ea6d..e5ee107 100644
--- a/packages/designer/src/Types/QuickFormDefinition.ts
+++ b/packages/designer/src/Types/QuickFormDefinition.ts
@@ -14,7 +14,10 @@ export type QuickFormDesignerDefinition = {
             /**
              * If this question has been generated by some tool/framework and be used in designer if ediable.
              */
-            generated?: boolean
+            generated?: boolean;
+
+            schemaName?: string;
+            displayName?: string;
         }
     }
 } & QuickFormDefinition;
\ No newline at end of file

From 2d93d6fa8935d4789e3743d27832004c97ac552f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Fri, 6 Sep 2024 14:50:52 +0200
Subject: [PATCH 068/118] fix: validation results should only be shown when not
 valid.

---
 packages/core/src/components/question/Question.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/question/Question.tsx b/packages/core/src/components/question/Question.tsx
index 231c99a..e7f982f 100644
--- a/packages/core/src/components/question/Question.tsx
+++ b/packages/core/src/components/question/Question.tsx
@@ -66,7 +66,7 @@ export const Question: React.FC<QuestionProps> = ({ model, style }) => {
                 questionModel={model}
                 {...model.inputProperties ?? {}}
             />
-            {typeof (model.validationResult?.message) !== "undefined" && model.validationResult?.message !== "" && <ErrorMessage message={model.validationResult?.message} />}
+            {typeof (model.validationResult?.message) !== "undefined" && model.validationResult?.message !== "" && !model.validationResult.isValid && <ErrorMessage message={model.validationResult?.message} />}
         </div>
     );
 }
\ No newline at end of file

From 8a0417cdfdafdb37c85677948b63343b88dd27b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Fri, 6 Sep 2024 15:12:14 +0200
Subject: [PATCH 069/118] fix: added option to override the slide button
 container

---
 packages/core/src/components/button/Button.tsx         |  9 +++++----
 .../renderers/slide-renderer/SlideRenderer.tsx         |  9 +++++++--
 packages/core/src/state/QuickformState.ts              | 10 +++++++++-
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/components/button/Button.tsx b/packages/core/src/components/button/Button.tsx
index 7aa31cd..2ffe8fd 100644
--- a/packages/core/src/components/button/Button.tsx
+++ b/packages/core/src/components/button/Button.tsx
@@ -2,9 +2,10 @@
 import React, { PropsWithChildren } from "react";
 import { MouseEventHandler, useEffect, useState } from "react";
 import { quickformtokens } from "../../style/quickFormTokensDefinition";
-import { makeStyles, shorthands } from "@griffel/react";
+import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
 
 type BtnContainerProps = {
+    readonly buttonClassName?: string;
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly disabled?: boolean;
@@ -37,7 +38,7 @@ const useButtonStyles = makeStyles({
     }
 })
 
-export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ children, showPressEnter, onClick, disabled, visible, style }) => {
+export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ children, showPressEnter, onClick, disabled, visible, style, className, buttonClassName }) => {
 
     if (typeof visible !== "undefined" && visible === false) {
         return (<></>);
@@ -60,9 +61,9 @@ export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ childre
     }, []);
 
     return (
-        <div className={styles.container}>
+        <div className={mergeClasses(styles.container, className)}>
             <button
-                className={styles.button}
+                className={mergeClasses(styles.button, buttonClassName)}
                 style={style}
                 disabled={disabled}
                 type="button"
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index 388a961..37fdedd 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -4,15 +4,19 @@ import { useQuickForm } from '../../../state/QuickFormContext';
 import { Button, Slide } from '../../index';
 import { useHandleEnterKeypress } from '../../../hooks';
 import { quickformtokens } from "../../../style";
-import { mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { IconResolver } from '../../icons/IconResolver';
 import { SlideModel } from '../../../model';
 
+const useSlideRenderStyles = makeStyles({
+    button: { display: 'flex', alignItems: 'center', justifyContent: 'center' }
+});
  
 export const SlideRenderer: React.FC = () => {
 
     const { state, goToNextSlide } = useQuickForm();
     const [className, setClassName] = useState(state.classes.slide);
+    const styles = useSlideRenderStyles();
 
     const currentSlide: SlideModel = state.slides[state.currIdx];
 
@@ -47,7 +51,8 @@ export const SlideRenderer: React.FC = () => {
         >
             <Slide model={currentSlide} />
             <Button
-                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                className={state.classes.slideButtonContainer}
+                buttonClassName={mergeClasses(styles.button, state.classes.slideButton)}
                 onClick={goToNextSlide}
                 showPressEnter={showPressEnter}
                 children={
diff --git a/packages/core/src/state/QuickformState.ts b/packages/core/src/state/QuickformState.ts
index 31564aa..24008e3 100644
--- a/packages/core/src/state/QuickformState.ts
+++ b/packages/core/src/state/QuickformState.ts
@@ -3,7 +3,15 @@ import { SlideModel } from "../model/SlideModel";
 import { LayoutDefinition, QuickFormModel } from "../model";
 import { IconType } from "../components/icons/IconResolver";
 
-export type QuickformClassNames = { slide: string, slideIsIn: string, slideIsOut: string, submit:string, ending:string };
+export type QuickformClassNames = {
+    slide: string,
+    slideButton: string,
+    slideButtonContainer: string;
+    slideIsIn: string,
+    slideIsOut: string,
+    submit: string,
+    ending: string
+};
 export type QuickformState = {
     autoAdvanceSlides?: boolean;
     enableQuestionNumbers?: boolean;

From cab15d5df18cd85e5d6056c8d01c5ca5d3a09006 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Sat, 7 Sep 2024 09:04:39 +0200
Subject: [PATCH 070/118] fix: lineheight should be the same as fontsize

---
 packages/core/src/components/paragraph/Paragraph.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/paragraph/Paragraph.tsx b/packages/core/src/components/paragraph/Paragraph.tsx
index fd5dccf..bd8bc96 100644
--- a/packages/core/src/components/paragraph/Paragraph.tsx
+++ b/packages/core/src/components/paragraph/Paragraph.tsx
@@ -10,7 +10,7 @@ const useParagraphStyles = makeStyles({
         color: quickformtokens.onSurface,
         fontSize: quickformtokens.questionParagraphFontSize,
         fontWeight: 'unset',
-        lineHeight: '1.4em',
+        lineHeight: quickformtokens.questionParagraphFontSize, // '1.4em',
         ...shorthands.margin(0, 0, quickformtokens.gap1, 0),
         '@media screen and (max-width: 599px)': { fontSize: quickformtokens.paragraphMobileFontSize },
     },

From b66651befc02c7122a4e6063e9f4474d67a59631 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Sat, 7 Sep 2024 16:12:59 +0200
Subject: [PATCH 071/118] fix: Added the slide button styles to submit slide
 also

---
 packages/core/src/components/submit/Submit.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index aa9941e..9376cac 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -79,6 +79,8 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
             </div>
 
             <Button
+                className={state.classes.slideButtonContainer}
+                buttonClassName={ state.classes.slideButton}
                 showPressEnter={typeof state.showPressEnter !== "undefined" && state.showPressEnter !== false}
                 onClick={handleSubmit}
             >

From a8ff99b00f36c602c630424bec14e5eede133d6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Mon, 9 Sep 2024 06:14:12 +0200
Subject: [PATCH 072/118] fix: clearing validation result on each new answers

---
 .../baseinput/BaseInputComponent.tsx          |  5 -----
 packages/core/src/model/QuestionModel.ts      |  6 ------
 .../defaults/DefaultQuestionTransformer.ts    |  1 -
 packages/core/src/state/QuickformReducer.ts   |  2 +-
 packages/core/src/state/QuickformState.ts     |  2 --
 .../action-handlers/QuestionActionHandler.ts  | 19 +++++++++++++------
 6 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
index f4269be..1e5efd3 100644
--- a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
+++ b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
@@ -107,12 +107,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
         if (span) {
             span.addEvent("BaseInputComponent:handleChange", { 'value': event.target.value });
         }
-        //EXPLAIN: WHY IS THIS HERE? If no reason, lets remove.
-        if (event.target.value === "")
-            questionModel.errorMsg = "";
 
-
-       // setText(() => event.target.value);
         answerQuestion(questionModel.logicalName, event.target.value, true);
         resize();
     }
diff --git a/packages/core/src/model/QuestionModel.ts b/packages/core/src/model/QuestionModel.ts
index fa8916e..f4c1782 100644
--- a/packages/core/src/model/QuestionModel.ts
+++ b/packages/core/src/model/QuestionModel.ts
@@ -13,12 +13,6 @@ export type QuestionModel<TProps = InputPropertiesTypes> = {
      */
     dataType: "string" | "number" | "boolean";
 
-    /**
-     * Displays an error message adjacent to the question or input component, 
-     * informing the user of validation issues with their input.
-     */
-    errorMsg: string;
-
     /**
      * Optional properties related to the input, defined by the generic type TProps.
      */
diff --git a/packages/core/src/services/defaults/DefaultQuestionTransformer.ts b/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
index 649b420..7f61393 100644
--- a/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
@@ -21,7 +21,6 @@ function mapJsonQuestionToModelQuestion(questionKey: string, question: QuestionJ
     return {
         answered: hasDefaultValueOrPayload,
         dataType: question.dataType ?? "string",
-        errorMsg: "",
         inputProperties: parseInputProperties(question),
         inputType: question.inputType ?? "text",
         intermediate: false,
diff --git a/packages/core/src/state/QuickformReducer.ts b/packages/core/src/state/QuickformReducer.ts
index 0a60667..8a7e16e 100644
--- a/packages/core/src/state/QuickformReducer.ts
+++ b/packages/core/src/state/QuickformReducer.ts
@@ -57,7 +57,7 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
             }
 
             state = QuestionActionHandler.answerQuestion(state, action);
-
+  
             // Validate the question input
             if (!action.intermediate) {
                 const timestamp = new Date().getTime();
diff --git a/packages/core/src/state/QuickformState.ts b/packages/core/src/state/QuickformState.ts
index 24008e3..a9dac21 100644
--- a/packages/core/src/state/QuickformState.ts
+++ b/packages/core/src/state/QuickformState.ts
@@ -79,7 +79,6 @@ export const defaultData: QuickFormModel = {
         buttonText: "Submit",
         submitFields: [
             {
-                errorMsg: "",
                 intermediate: false,
                 visited: false,
                 questionKey: "question1",
@@ -93,7 +92,6 @@ export const defaultData: QuickFormModel = {
                 output: {}
             },
             {
-                errorMsg: "",
                 intermediate: false,
                 visited: false,
                 questionKey: "question1",
diff --git a/packages/core/src/state/action-handlers/QuestionActionHandler.ts b/packages/core/src/state/action-handlers/QuestionActionHandler.ts
index 9061189..6ebee67 100644
--- a/packages/core/src/state/action-handlers/QuestionActionHandler.ts
+++ b/packages/core/src/state/action-handlers/QuestionActionHandler.ts
@@ -53,17 +53,14 @@ export class QuestionActionHandler {
     };
 
     static answerQuestion = (state: QuickformState, { logicalName, output, intermediate, validationResult }: QuickformAnswerQuestionAction) => {
-        const propertiesToUpdate = {
+        const propertiesToUpdate: Partial<QuestionModel> = {
             answered: output !== undefined && output !== '' && !intermediate,
             intermediate: intermediate,
             visited: true,
             output: output,
-            errorMsg: validationResult?.message,
+            validationResult: undefined
         };
-
-        // DISCUSS, should answer clear error message ?
-        // This is currently undergoing changes since we have decided to move errorMsg to both questionModel and globally.
-        // state.errorMsg = '';
+ 
 
         return this.updateQuestionProperties(state, logicalName, propertiesToUpdate);
     };
@@ -76,6 +73,15 @@ export class QuestionActionHandler {
         });
     };
 
+    /**
+     * Update the validation result of a question
+     * The actually update is only done if the timestamp of the current validation result matches the timestamp of the action
+     * @param state - the current state
+     * @param logicalName - the logical name of the question
+     * @param validationResult - the new validation result
+     * @param timestamp - the timestamp of the action
+     * @returns the updated state
+     */
     static updateQuestionValidation = (state: QuickformState, logicalName: string, validationResult: ValidationResult, timestamp: number) => {
         const currentValidationResult = findQuestionByLogicalName(logicalName, getAllQuestions(state.slides))?.validationResult;
         if (currentValidationResult?.timestamp !== timestamp) {
@@ -98,4 +104,5 @@ export class QuestionActionHandler {
         }
         return await QuestionActionHandler.inputValidator(questionRef, state);
     }
+    
 }
\ No newline at end of file

From 658c591528702160a449b4055a2550f71f127315 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 12 Sep 2024 04:38:32 +0200
Subject: [PATCH 073/118] fix: added slideButtonIconSize to settings view

---
 .../designer/src/Components/Views/QuickFormSettingsView.tsx     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
index 634e5a4..e663e83 100644
--- a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
@@ -75,6 +75,8 @@ registerToken("headlineFontSize", "Headline Font Size", "The size of the headlin
 registerToken("subtitleFontSize", "Subtitle Font Size", "The size of the subtitle...", "text");
 registerToken("questionHeadlineFontSize", "Question Headline Font Size", "The size of the question headline...", "text");
 registerToken("questionParagraphFontSize", "Question Paragraph Font Size", "The size of question paragraph...", "text");
+registerToken("slideButtonIconSize", "Slide Button Icon Size", "The size of icon on slidebuttons...", "text");
+
 
 // Colors
 registerToken("primary", "Primary Color", "The primary color used. This is the color used for primary buttons and other important elements. Also considered the brand colour", "color");

From d6dd125da8165122b72ebbd12dedc51f5de5e5a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 12 Sep 2024 04:41:39 +0200
Subject: [PATCH 074/118] fix: added question input font size to settings view

---
 packages/designer/src/Components/Views/QuickFormSettingsView.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
index e663e83..0abcc25 100644
--- a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
@@ -75,6 +75,7 @@ registerToken("headlineFontSize", "Headline Font Size", "The size of the headlin
 registerToken("subtitleFontSize", "Subtitle Font Size", "The size of the subtitle...", "text");
 registerToken("questionHeadlineFontSize", "Question Headline Font Size", "The size of the question headline...", "text");
 registerToken("questionParagraphFontSize", "Question Paragraph Font Size", "The size of question paragraph...", "text");
+registerToken("questionInputFontSize", "Question Input Font Size", "The size of the question input fields...", "text");
 registerToken("slideButtonIconSize", "Slide Button Icon Size", "The size of icon on slidebuttons...", "text");
 
 

From 21061edcfc5b2055a86ed5c1aec337a526b42902 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 12 Sep 2024 04:54:45 +0200
Subject: [PATCH 075/118] fix: changed so layout tokens wins over code defined
 tokens

---
 packages/core/src/style/quickFormTokensDefinition.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/style/quickFormTokensDefinition.ts b/packages/core/src/style/quickFormTokensDefinition.ts
index 37d24eb..004daa5 100644
--- a/packages/core/src/style/quickFormTokensDefinition.ts
+++ b/packages/core/src/style/quickFormTokensDefinition.ts
@@ -88,8 +88,8 @@ export const defineQuickFormTokens = (...tokens: Array<Partial<QuickFormTokens>>
     const logger = resolveQuickFormService("logger");
     logger.log("Merging Quick Form tokens.", tokens);
     // Merges and overrides default tokens with provided ones in reverse order for precedence.
-    const mergedTokens = tokens.reduceRight((prevTokens, currentTokens) => {
-        logger.log("Merging currentTokens into prevTokens", currentTokens, prevTokens);
+    const mergedTokens = tokens.reduce((prevTokens, currentTokens) => {
+        logger.log("Merging currentTokens into prevTokens", prevTokens, currentTokens);
         return ({
             ...prevTokens,
             ...currentTokens,

From 3fca527742260ed3e69d703c7d597baf6ef87ff3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 12 Sep 2024 05:09:33 +0200
Subject: [PATCH 076/118] fix: added slide classes to all render containers

---
 packages/core/src/components/QuickForm.tsx    | 18 +++++++++-----
 .../core/src/components/ending/Ending.tsx     |  5 ++--
 packages/core/src/components/intro/Intro.tsx  |  5 ++--
 .../slide-renderer/SlideRenderer.tsx          | 24 ++++++++++++-------
 .../core/src/components/submit/Submit.tsx     |  5 ++--
 5 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/packages/core/src/components/QuickForm.tsx b/packages/core/src/components/QuickForm.tsx
index 7a28d56..58ed054 100644
--- a/packages/core/src/components/QuickForm.tsx
+++ b/packages/core/src/components/QuickForm.tsx
@@ -1,20 +1,25 @@
 "use client";
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useQuickForm } from "../state/QuickFormContext";
 import { Ending, Submit, Intro, SlideRenderer } from "./index";
+import { mergeClasses } from '@griffel/react';
 
-export const QuickForm: React.FC = () => {
+export type QuickFormProps = {
+    className?: string;
+}
+export const QuickForm: React.FC<QuickFormProps> = ({ className}) => {
     const { state, setIntroVisited } = useQuickForm();
+    const classes = useMemo(() => mergeClasses(className, state.classes.slide), [className, state.classes?.slide]);
 
     const renderComponent = () => {
         if (state.isIntroSlide && typeof state.data.intro !== "undefined") {
-            return <Intro model={state.data.intro} onBtnClick={setIntroVisited} />;
+            return <Intro className={classes} model={state.data.intro} onBtnClick={setIntroVisited} />;
         } else if (state.isSubmitSlide) {
-            return <Submit model={state.data.submit} />;
+            return <Submit className={classes} model={state.data.submit} />;
         } else if (state.isEndingSlide) {
-            return <Ending model={state.data.ending} />;
+            return <Ending className={classes} model={state.data.ending} />;
         } else {
-            return <SlideRenderer key={state.currIdx} />;
+            return <SlideRenderer className={className} key={state.currIdx} />;
         }
     };
 
@@ -24,3 +29,4 @@ export const QuickForm: React.FC = () => {
         </>
     );
 };
+
diff --git a/packages/core/src/components/ending/Ending.tsx b/packages/core/src/components/ending/Ending.tsx
index f0d1dac..d6b4684 100644
--- a/packages/core/src/components/ending/Ending.tsx
+++ b/packages/core/src/components/ending/Ending.tsx
@@ -9,6 +9,7 @@ import { makeStyles, mergeClasses } from "@griffel/react";
 
 type EndingProps = {
     model: EndingModel;
+    className?: string;
 }
  
 const useEndingStyles = makeStyles({
@@ -20,13 +21,13 @@ const useEndingStyles = makeStyles({
     }
 });
 
-export const Ending: React.FC<EndingProps> = ({ model }) => {
+export const Ending: React.FC<EndingProps> = ({ model, className }) => {
     const { state } = useQuickForm();
     const { text, paragraph } = model;
     const submitStatus = state.submitStatus;
     const styles = useEndingStyles();
     return (
-        <div className={mergeClasses(styles.ending, state.classes.ending)}>
+        <div className={mergeClasses(className, styles.ending, state.classes.ending)}>
             {submitStatus.isSubmitError &&
                 <>
                     <ErrorIcon color={quickformtokens.onSurface} />
diff --git a/packages/core/src/components/intro/Intro.tsx b/packages/core/src/components/intro/Intro.tsx
index 8cfb2fb..14d3b1d 100644
--- a/packages/core/src/components/intro/Intro.tsx
+++ b/packages/core/src/components/intro/Intro.tsx
@@ -6,11 +6,12 @@ import { useHandleEnterKeypress } from "../../hooks";
 import { useQuickForm } from "../../state";
 
 type IntroProps = {
+    className?: string;
     model: IntroModel;
     onBtnClick: React.Dispatch<void>;
 }
 
-export const Intro: React.FC<IntroProps> = ({ model, onBtnClick }) => {
+export const Intro: React.FC<IntroProps> = ({ model, onBtnClick, className }) => {
     const { text, paragraph, buttonText } = model;
     const { state } = useQuickForm();
 
@@ -18,7 +19,7 @@ export const Intro: React.FC<IntroProps> = ({ model, onBtnClick }) => {
     useHandleEnterKeypress(false, onBtnClick);
 
     return (
-        <div style={introStyling}>
+        <div className={className} style={introStyling}>
             <Heading >
                 {text}
             </Heading>
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index 37fdedd..625efad 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
 import { useQuickForm } from '../../../state/QuickFormContext';
 import { Button, Slide } from '../../index';
 import { useHandleEnterKeypress } from '../../../hooks';
@@ -11,12 +11,15 @@ import { SlideModel } from '../../../model';
 const useSlideRenderStyles = makeStyles({
     button: { display: 'flex', alignItems: 'center', justifyContent: 'center' }
 });
- 
-export const SlideRenderer: React.FC = () => {
+export type SlideRendererProps = {
+    className?: string;
+}
+export const SlideRenderer: React.FC<SlideRendererProps> = ({ className }) => {
 
     const { state, goToNextSlide } = useQuickForm();
-    const [className, setClassName] = useState(state.classes.slide);
+    const [slideEffectClassName, setSlideEffectClassName] = useState<string>();
     const styles = useSlideRenderStyles();
+    const classes = useMemo(() => mergeClasses(className, slideEffectClassName), [className, slideEffectClassName]);
 
     const currentSlide: SlideModel = state.slides[state.currIdx];
 
@@ -34,20 +37,23 @@ export const SlideRenderer: React.FC = () => {
     useEffect(() => {
         const timeout = setTimeout(() => {
 
-            setClassName(mergeClasses(state.classes.slide, state.classes.slideIsIn));
+            setSlideEffectClassName(mergeClasses(state.classes.slideIsIn));
 
         }, Math.max(150, nextAllowedEffectTime.current - new Date().getTime() + 150));
 
         return () => {
             clearTimeout(timeout);
-            setClassName(mergeClasses(state.classes.slide, state.classes.slideIsOut));
+            setSlideEffectClassName(mergeClasses(state.classes.slideIsOut));
             nextAllowedEffectTime.current = new Date().getTime() + 10;
         }
-    }, [state.currIdx])
+    }, [state.currIdx]);
+
+    
+
     return (
         <div
             id="SlideRenderer"
-            className={className}
+            className={classes}
         >
             <Slide model={currentSlide} />
             <Button
@@ -65,6 +71,8 @@ export const SlideRenderer: React.FC = () => {
     );
 };
 
+
+ 
 // enum ViewStatus {
 //     InView,
 //     TransitioningOut,
diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index 9376cac..6bb8eab 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -10,6 +10,7 @@ import { makeStyles, mergeClasses } from "@griffel/react";
 
 type SubmitProps = {
     model: SubmitModel;
+    className?: string;
 }
 
 const useSubmitStyles = makeStyles({
@@ -22,7 +23,7 @@ const useSubmitStyles = makeStyles({
     }
 });
 
-export const Submit: React.FC<SubmitProps> = ({ model }) => {
+export const Submit: React.FC<SubmitProps> = ({ model, className }) => {
     const { state, dispatch, onSubmitAsync } = useQuickForm();
     const { text, paragraph, buttonText, submitFields = [] } = model;
 
@@ -50,7 +51,7 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
 
 
     return (
-        <div className={mergeClasses(styles.submit, state.classes.submit)}>
+        <div className={mergeClasses(className, styles.submit, state.classes.submit)}>
             <Heading >
                 {text}
             </Heading>

From 5bbd4697d2d559549114e0c7c5fee0b5b8f19312 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 12 Sep 2024 05:26:02 +0200
Subject: [PATCH 077/118] fix: fixed the order of slide classes

---
 packages/core/src/components/ending/Ending.tsx | 2 +-
 packages/core/src/components/submit/Submit.tsx | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/ending/Ending.tsx b/packages/core/src/components/ending/Ending.tsx
index d6b4684..2861017 100644
--- a/packages/core/src/components/ending/Ending.tsx
+++ b/packages/core/src/components/ending/Ending.tsx
@@ -27,7 +27,7 @@ export const Ending: React.FC<EndingProps> = ({ model, className }) => {
     const submitStatus = state.submitStatus;
     const styles = useEndingStyles();
     return (
-        <div className={mergeClasses(className, styles.ending, state.classes.ending)}>
+        <div className={mergeClasses(styles.ending, className, state.classes.ending)}>
             {submitStatus.isSubmitError &&
                 <>
                     <ErrorIcon color={quickformtokens.onSurface} />
diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index 6bb8eab..733951f 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -17,7 +17,6 @@ const useSubmitStyles = makeStyles({
     submit: {
         display: 'flex',
         flexDirection: 'column',
-        maxWidth: '72rem',
         transition: 'transform 0.3s ease-out',
         width: '100%',
     }
@@ -51,7 +50,7 @@ export const Submit: React.FC<SubmitProps> = ({ model, className }) => {
 
 
     return (
-        <div className={mergeClasses(className, styles.submit, state.classes.submit)}>
+        <div className={mergeClasses(styles.submit,className,  state.classes.submit)}>
             <Heading >
                 {text}
             </Heading>

From 30e8de8b45316745b0053541918cb74454e35a83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 12 Sep 2024 06:59:28 +0200
Subject: [PATCH 078/118] feat: added rich text editor to ending,submit and
 intro

---
 package-lock.json                             | 14 +++++++++
 package.json                                  |  2 +-
 packages/designer/package.json                |  1 +
 .../Views/QuickFormEndingSettingsView.tsx     | 10 +++++--
 .../Views/QuickFormIntroSettingsView.tsx      |  7 +++--
 .../Views/QuickFormSubmitSettingsView.tsx     | 10 +++----
 .../Views/rjsf/Widgets/RichTextWidget.tsx     | 29 +++++++++++++++++++
 7 files changed, 62 insertions(+), 11 deletions(-)
 create mode 100644 packages/designer/src/Components/Views/rjsf/Widgets/RichTextWidget.tsx

diff --git a/package-lock.json b/package-lock.json
index 981047d..00a5413 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2159,6 +2159,13 @@
       "resolved": "packages/querybuilder",
       "link": true
     },
+    "node_modules/@eavfw/rich-text-editor": {
+      "version": "1.0.0-vnext.1",
+      "resolved": "https://registry.npmjs.org/@eavfw/rich-text-editor/-/rich-text-editor-1.0.0-vnext.1.tgz",
+      "integrity": "sha512-R5ljQn1n+cDqRHT1zGwSXx1K/lCCeeZvSKSpuEEariMPMAQa7/iJnFFH4+lVFsn2DXQKOGQZyrJR19kIKNuHFA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@eavfw/utils": {
       "version": "1.1.0-vnext.2",
       "resolved": "https://registry.npmjs.org/@eavfw/utils/-/utils-1.1.0-vnext.2.tgz",
@@ -17568,6 +17575,7 @@
         "@eavfw/designer-nodes": "^1.1.2",
         "@eavfw/forms": "^1.2.0-vnext.8",
         "@eavfw/manifest": "^1.5.0-vnext.15",
+        "@eavfw/rich-text-editor": "1.0.0-vnext.1",
         "@eavfw/utils": "^1.1.0-vnext.2",
         "@fluentui/react-components": "=>9.46.0 <9.49.2",
         "@rjsf/core": "5.18.4",
@@ -19123,6 +19131,12 @@
         "react-dom": "18.2.0"
       }
     },
+    "@eavfw/rich-text-editor": {
+      "version": "1.0.0-vnext.1",
+      "resolved": "https://registry.npmjs.org/@eavfw/rich-text-editor/-/rich-text-editor-1.0.0-vnext.1.tgz",
+      "integrity": "sha512-R5ljQn1n+cDqRHT1zGwSXx1K/lCCeeZvSKSpuEEariMPMAQa7/iJnFFH4+lVFsn2DXQKOGQZyrJR19kIKNuHFA==",
+      "peer": true
+    },
     "@eavfw/utils": {
       "version": "1.1.0-vnext.2",
       "resolved": "https://registry.npmjs.org/@eavfw/utils/-/utils-1.1.0-vnext.2.tgz",
diff --git a/package.json b/package.json
index 6d92f2f..6f1a3c1 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "release-designer": "npm run release --workspace packages/designer",
     "release-inputs": "npm run release --workspace packages/inputs",
     "release-querybuilder": "npm run release --workspace packages/querybuilder",
-   "eavfw-link": "npm link @eavfw/apps @eavfw/next @eavfw/expressions @eavfw/manifest @eavfw/hooks @eavfw/forms @eavfw/utils @eavfw/designer @eavfw/designer-core @eavfw/designer-nodes",
+   "eavfw-link": "npm link @eavfw/apps @eavfw/next @eavfw/expressions @eavfw/manifest @eavfw/hooks @eavfw/forms @eavfw/utils @eavfw/designer @eavfw/designer-core @eavfw/designer-nodes @eavfw/rich-text-editor",
     "playground": "npm --workspace packages/playground run dev"
   },
   "config": {
diff --git a/packages/designer/package.json b/packages/designer/package.json
index 247e5f8..79823d6 100644
--- a/packages/designer/package.json
+++ b/packages/designer/package.json
@@ -11,6 +11,7 @@
     "@eavfw/designer": "^1.1.1",
     "@eavfw/designer-core": "^1.1.1",
     "@eavfw/designer-nodes": "^1.1.2",
+    "@eavfw/rich-text-editor": "1.0.0-vnext.1",
     "@eavfw/forms": "^1.2.0-vnext.8",
     "@eavfw/manifest": "^1.5.0-vnext.15",
     "@eavfw/utils": "^1.1.0-vnext.2",
diff --git a/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx
index 3e7e57c..7a7c953 100644
--- a/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx
@@ -9,15 +9,18 @@ import { useQuickFormDefinition } from "../../Contexts/QuickFormDefContext";
 import { useViewStyles } from "../Styles/useViewStyles.styles";
 import { mergeClasses } from "@fluentui/react-components";
 import { JSONSchema7, JSONSchema7Definition } from "json-schema";
+import { JsonField } from "./rjsf/Widgets/JsonWidget";
+import { RichTextField } from "./rjsf/Widgets/RichTextWidget";
+import { QuickformDesignerFields } from "./QuickFormQuestionsView";
 
 const endingSlideSchema = {
     label: "Ending Settings",
     uiSchema: {
         text: {
-            "ui:widget": "textarea"
+            "ui:field": "RichTextField"
         },
         paragraph: {
-            "ui:widget": "textarea"
+            "ui:field": "RichTextField"
         }
     },
     schema: {
@@ -46,10 +49,11 @@ export const QuickFormEndingSettingsView = () => {
     const styles = useViewStyles();
 
     return (
-        <div className={mergeClasses(styles.section, styles.sectionSlim)}>
+        <div className={mergeClasses(styles.section)}>
             <Form templates={{ FieldTemplate: FieldTemplate, BaseInputTemplate: BaseInputTemplate }}
                 validator={validator}
                 {...endingSlideSchema}
+                fields={{ ...{ "RichTextField": RichTextField }, ...QuickformDesignerFields }}
                 formData={ending}
                 onChange={(a, b) => {
                     console.log("change", [a, b]);
diff --git a/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx
index e532bb1..af081c5 100644
--- a/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx
@@ -8,16 +8,18 @@ import { Button, mergeClasses } from "@fluentui/react-components";
 import { useEffect, useState } from "react";
 import { JSONSchema7TypeName, JSONSchema7 } from "json-schema";
 import React from "react";
+import { RichTextField } from "./rjsf/Widgets/RichTextWidget";
+import { QuickformDesignerFields } from "./QuickFormQuestionsView";
 
 const introSlideSchema = {
     label: "Intro Settings",
     uiSchema: {
         text: {
-            "ui:widget": "textarea",
+            "ui:field": "RichTextField",
             "ui:help": "The headline displayed to the end user when first loading the form"
         },
         paragraph: {
-            "ui:widget": "textarea",
+            "ui:field": "RichTextField",
             "ui:help": "The text displayed to the end user when first loading the form"
         },
         buttonText: {
@@ -83,6 +85,7 @@ export const QuickFormIntroSettingsView = () => {
                 <Form
                     templates={{ FieldTemplate, BaseInputTemplate }}
                     validator={validator}
+                    fields={{ ...{ "RichTextField": RichTextField }, ...QuickformDesignerFields }}
                     {...introSlideSchema}
                     formData={intro}
                     onChange={(a) => {
diff --git a/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx
index f16d6c4..b459200 100644
--- a/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx
@@ -12,15 +12,15 @@ import { JSONSchema7, JSONSchema7Definition } from "json-schema";
 import { JsonField, JsonWidget } from "./rjsf/Widgets/JsonWidget";
 import { RegistryFieldsType } from "@rjsf/utils";
 import { QuickformDesignerFields } from "./QuickFormQuestionsView";
-
+import { RichTextField } from "./rjsf/Widgets/RichTextWidget";
 const submitSlideSchema = {
     label: "Ending Settings",
     uiSchema: {
         text: {
-            "ui:widget": "textarea"
+            "ui:field": "RichTextField"
         },
         paragraph: {
-            "ui:widget": "textarea"
+            "ui:field": "RichTextField"
         },
         submitFields: {         
             "ui:field":"QFSubmitField"
@@ -61,9 +61,9 @@ export const QuickFormSubmitSettingsView = () => {
     const styles = useViewStyles();
 
     return (
-        <div className={mergeClasses(styles.section, styles.sectionSlim)}>
+        <div className={mergeClasses(styles.section)}>
             <Form templates={{ FieldTemplate: FieldTemplate, BaseInputTemplate: BaseInputTemplate }}
-                fields={{ ...{ "QFSubmitField": JsonField }, ...QuickformDesignerFields }}
+                fields={{ ...{ "QFSubmitField": JsonField, "RichTextField": RichTextField }, ...QuickformDesignerFields }}
                 widgets={{ jsonWidget: JsonWidget }}
                 validator={validator}
                 {...submitSlideSchema}
diff --git a/packages/designer/src/Components/Views/rjsf/Widgets/RichTextWidget.tsx b/packages/designer/src/Components/Views/rjsf/Widgets/RichTextWidget.tsx
new file mode 100644
index 0000000..4ef288a
--- /dev/null
+++ b/packages/designer/src/Components/Views/rjsf/Widgets/RichTextWidget.tsx
@@ -0,0 +1,29 @@
+
+import { Field, Textarea } from "@fluentui/react-components";
+import { FieldProps, ObjectFieldTemplatePropertyType, ObjectFieldTemplateProps, WidgetProps, getUiOptions } from "@rjsf/utils";
+import { RJSFSchema } from "@rjsf/utils/lib/types";
+
+import { RichTextEditor } from "@eavfw/rich-text-editor";
+
+
+export const RichTextField: React.FC<FieldProps> = ({ uiSchema = {}, schema: rawSchema, required, formData, registry, title, name, ...props }) => {
+
+    const { fields, formContext, schemaUtils, translateString, globalUiOptions } = registry;
+    const schema = schemaUtils.retrieveSchema(rawSchema, formData);
+
+   
+    const uiOptions = getUiOptions(uiSchema, globalUiOptions);
+
+    const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
+    const description = uiOptions.description ?? schema.description;
+    return (<>
+        <Field label={uiOptions.label === false ? '' : templateTitle} required={required} hint={description} >
+            <RichTextEditor value={formData} onChange={(data) => props.onChange(data)} />
+        </Field>
+
+    </>);
+};
+
+
+
+

From 78974dadedb544323d979957b31aa56013076de3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 12 Sep 2024 07:05:35 +0200
Subject: [PATCH 079/118] fix: added way to disable checkmark by setting ending
 icon to none

---
 packages/core/src/components/ending/Ending.tsx     | 6 ++++--
 packages/core/src/model/json-definitions/Layout.ts | 2 ++
 packages/core/src/state/QuickformState.ts          | 2 ++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/ending/Ending.tsx b/packages/core/src/components/ending/Ending.tsx
index 2861017..f215f0a 100644
--- a/packages/core/src/components/ending/Ending.tsx
+++ b/packages/core/src/components/ending/Ending.tsx
@@ -22,7 +22,9 @@ const useEndingStyles = makeStyles({
 });
 
 export const Ending: React.FC<EndingProps> = ({ model, className }) => {
-    const { state } = useQuickForm();
+    const { state } = useQuickForm(); 
+
+ 
     const { text, paragraph } = model;
     const submitStatus = state.submitStatus;
     const styles = useEndingStyles();
@@ -36,7 +38,7 @@ export const Ending: React.FC<EndingProps> = ({ model, className }) => {
             }
             {submitStatus.isSubmitSuccess &&
                 <>
-                    <Checkmark color={quickformtokens.onSurface} />
+                    {state.defaultEndingSlideIcon !== "none" && <Checkmark color={quickformtokens.onSurface} />}
                     {text &&
                         <Heading style={{ marginTop: '10px' }}>
                             {text}
diff --git a/packages/core/src/model/json-definitions/Layout.ts b/packages/core/src/model/json-definitions/Layout.ts
index 2e5b2be..30b3569 100644
--- a/packages/core/src/model/json-definitions/Layout.ts
+++ b/packages/core/src/model/json-definitions/Layout.ts
@@ -7,6 +7,8 @@ export type LayoutDefinition = {
      * The default text of next button on slides
      */
     defaultNextButtonText?: string;
+
+    defaultEndingSlideIcon?: string;
     classes?: Partial<QuickformClassNames>,
     style?: React.CSSProperties;
     tokens?: Partial<QuickFormTokens>;
diff --git a/packages/core/src/state/QuickformState.ts b/packages/core/src/state/QuickformState.ts
index a9dac21..ccc295c 100644
--- a/packages/core/src/state/QuickformState.ts
+++ b/packages/core/src/state/QuickformState.ts
@@ -13,6 +13,7 @@ export type QuickformClassNames = {
     ending: string
 };
 export type QuickformState = {
+    defaultEndingSlideIcon?: string;
     autoAdvanceSlides?: boolean;
     enableQuestionNumbers?: boolean;
     showPressEnter?: boolean;
@@ -38,6 +39,7 @@ export type QuickformState = {
 
 export const defaultState = (data: QuickFormModel = defaultData, layout?: LayoutDefinition): QuickformState => {
     const defState = {
+        defaultEndingSlideIcon: layout?.defaultEndingSlideIcon ?? "checkmark",
         autoAdvanceSlides: layout?.autoAdvanceSlides ?? false,
         enableQuestionNumbers: layout?.enableQuestionNumbers ?? false,
         showPressEnter: layout?.showPressEnter ?? undefined, 

From e3739c46e347033079fb86db351a811013a9b137 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 12 Sep 2024 07:33:06 +0200
Subject: [PATCH 080/118] fix: updated depens? wierd build issue atm

---
 package-lock.json              | 14 +++++++-------
 packages/designer/package.json |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 00a5413..5d3cbba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2160,9 +2160,9 @@
       "link": true
     },
     "node_modules/@eavfw/rich-text-editor": {
-      "version": "1.0.0-vnext.1",
-      "resolved": "https://registry.npmjs.org/@eavfw/rich-text-editor/-/rich-text-editor-1.0.0-vnext.1.tgz",
-      "integrity": "sha512-R5ljQn1n+cDqRHT1zGwSXx1K/lCCeeZvSKSpuEEariMPMAQa7/iJnFFH4+lVFsn2DXQKOGQZyrJR19kIKNuHFA==",
+      "version": "1.0.0-vnext.2",
+      "resolved": "https://registry.npmjs.org/@eavfw/rich-text-editor/-/rich-text-editor-1.0.0-vnext.2.tgz",
+      "integrity": "sha512-1ldvcjlYLzj9oQcd82zSvTXparYzUnN85p6ehrFLpGeQJJiwNic7BfJaeHooXLzDLFzy3R6QyYbd30HKrqs0jA==",
       "license": "MIT",
       "peer": true
     },
@@ -17575,7 +17575,7 @@
         "@eavfw/designer-nodes": "^1.1.2",
         "@eavfw/forms": "^1.2.0-vnext.8",
         "@eavfw/manifest": "^1.5.0-vnext.15",
-        "@eavfw/rich-text-editor": "1.0.0-vnext.1",
+        "@eavfw/rich-text-editor": "1.0.0-vnext.2",
         "@eavfw/utils": "^1.1.0-vnext.2",
         "@fluentui/react-components": "=>9.46.0 <9.49.2",
         "@rjsf/core": "5.18.4",
@@ -19132,9 +19132,9 @@
       }
     },
     "@eavfw/rich-text-editor": {
-      "version": "1.0.0-vnext.1",
-      "resolved": "https://registry.npmjs.org/@eavfw/rich-text-editor/-/rich-text-editor-1.0.0-vnext.1.tgz",
-      "integrity": "sha512-R5ljQn1n+cDqRHT1zGwSXx1K/lCCeeZvSKSpuEEariMPMAQa7/iJnFFH4+lVFsn2DXQKOGQZyrJR19kIKNuHFA==",
+      "version": "1.0.0-vnext.2",
+      "resolved": "https://registry.npmjs.org/@eavfw/rich-text-editor/-/rich-text-editor-1.0.0-vnext.2.tgz",
+      "integrity": "sha512-1ldvcjlYLzj9oQcd82zSvTXparYzUnN85p6ehrFLpGeQJJiwNic7BfJaeHooXLzDLFzy3R6QyYbd30HKrqs0jA==",
       "peer": true
     },
     "@eavfw/utils": {
diff --git a/packages/designer/package.json b/packages/designer/package.json
index 79823d6..4c1c044 100644
--- a/packages/designer/package.json
+++ b/packages/designer/package.json
@@ -11,7 +11,6 @@
     "@eavfw/designer": "^1.1.1",
     "@eavfw/designer-core": "^1.1.1",
     "@eavfw/designer-nodes": "^1.1.2",
-    "@eavfw/rich-text-editor": "1.0.0-vnext.1",
     "@eavfw/forms": "^1.2.0-vnext.8",
     "@eavfw/manifest": "^1.5.0-vnext.15",
     "@eavfw/utils": "^1.1.0-vnext.2",
@@ -21,7 +20,8 @@
     "@rjsf/utils": "5.18.4",
     "@rjsf/validator-ajv8": "5.18.4",
     "monaco-editor": "^0.50.0",
-    "pako": "^2.0.4"
+    "pako": "^2.0.4",
+    "@eavfw/rich-text-editor": "1.0.0-vnext.2"
   },
   "devDependencies": {
     "@types/pako": "2.0.3"

From 00f85d5459bb90171971b501bba49ba10cdab990 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 12 Sep 2024 08:08:40 +0200
Subject: [PATCH 081/118] fix: versions updated

---
 package-lock.json                             | 462 +++++++++++++++++-
 packages/designer/package.json                |   2 +-
 .../Views/rjsf/Widgets/RichTextWidget.tsx     |   2 +-
 3 files changed, 443 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5d3cbba..456b5ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2160,11 +2160,19 @@
       "link": true
     },
     "node_modules/@eavfw/rich-text-editor": {
-      "version": "1.0.0-vnext.2",
-      "resolved": "https://registry.npmjs.org/@eavfw/rich-text-editor/-/rich-text-editor-1.0.0-vnext.2.tgz",
-      "integrity": "sha512-1ldvcjlYLzj9oQcd82zSvTXparYzUnN85p6ehrFLpGeQJJiwNic7BfJaeHooXLzDLFzy3R6QyYbd30HKrqs0jA==",
+      "version": "1.0.0-vnext.3",
+      "resolved": "https://registry.npmjs.org/@eavfw/rich-text-editor/-/rich-text-editor-1.0.0-vnext.3.tgz",
+      "integrity": "sha512-PZl88N0yD9gW5XoWaQmuIBYWT46SIYbXXbUfLStz8XySxftyVuNSTMWc8YY9w998QHJ1yEX8K8lqLe/5KwQVnQ==",
       "license": "MIT",
-      "peer": true
+      "peer": true,
+      "dependencies": {
+        "@types/draftjs-to-html": "^0.8.1",
+        "@types/react-draft-wysiwyg": "^1.13.4",
+        "draft-js": "^0.11.7",
+        "draftjs-to-html": "^0.9.1",
+        "react-draft-wysiwyg": "^1.15.0",
+        "striptags": "^3.2.0"
+      }
     },
     "node_modules/@eavfw/utils": {
       "version": "1.1.0-vnext.2",
@@ -5463,6 +5471,37 @@
       "integrity": "sha512-SbehVj+zL0QFTufW3HP/Xvwr/kFWw1sFMLCvmyJdp5Xegbo81sqA2tByWlyeryvSwWBrY4drpLOtGPh0fkxjCQ==",
       "peer": true
     },
+    "node_modules/@types/draft-js": {
+      "version": "0.11.18",
+      "resolved": "https://registry.npmjs.org/@types/draft-js/-/draft-js-0.11.18.tgz",
+      "integrity": "sha512-lP6yJ+EKv5tcG1dflWgDKeezdwBa8wJ7KkiNrrHqXuXhl/VGes1SKjEfKHDZqOz19KQbrAhFvNhDPWwnQXYZGQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/react": "*",
+        "immutable": "~3.7.4"
+      }
+    },
+    "node_modules/@types/draft-js/node_modules/immutable": {
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
+      "integrity": "sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@types/draftjs-to-html": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@types/draftjs-to-html/-/draftjs-to-html-0.8.4.tgz",
+      "integrity": "sha512-5FZcjFoJL57N/IttLCTCNI0krX+181oCl5hf76u3TqPkqBAphHrJAO9ReYesx9138kcObaYmpnWC2Yrqxoqd2Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/draft-js": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.56.2",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.2.tgz",
@@ -5646,6 +5685,17 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-draft-wysiwyg": {
+      "version": "1.13.8",
+      "resolved": "https://registry.npmjs.org/@types/react-draft-wysiwyg/-/react-draft-wysiwyg-1.13.8.tgz",
+      "integrity": "sha512-qo0vIHjqAYq3Hz93Td3ecNodgVjKsvrWkBJ6mZXJSUmQzrQ5Fu7NS9oV5PXnVbnuqPoJLALbCSiz8UCksLribg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/draft-js": "*",
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-redux": {
       "version": "7.1.33",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.33.tgz",
@@ -6223,6 +6273,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.6.tgz",
@@ -7115,6 +7172,18 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "dev": true
     },
+    "node_modules/core-js": {
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
+      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.35.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.1.tgz",
@@ -7149,6 +7218,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/cross-fetch": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
+      "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "node-fetch": "^2.6.12"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -7688,6 +7767,50 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "peer": true
     },
+    "node_modules/draft-js": {
+      "version": "0.11.7",
+      "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz",
+      "integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fbjs": "^2.0.0",
+        "immutable": "~3.7.4",
+        "object-assign": "^4.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0",
+        "react-dom": ">=0.14.0"
+      }
+    },
+    "node_modules/draft-js/node_modules/immutable": {
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
+      "integrity": "sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/draftjs-to-html": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/draftjs-to-html/-/draftjs-to-html-0.9.1.tgz",
+      "integrity": "sha512-fFstE6+IayaVFBEvaFt/wN8vdj8FsTRzij7dy7LI9QIwf5LgfHFi9zSpvCg+feJ2tbYVqHxUkjcibwpsTpgFVQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/draftjs-utils": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz",
+      "integrity": "sha512-EstHqr3R3JVcilJrBaO/A+01GvwwKmC7e4TCjC7S94ZeMh4IVmf60OuQXtHHpwItK8C2JCi3iljgN5KHkJboUg==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "draft-js": "^0.11.x",
+        "immutable": "3.x.x || 4.x.x"
+      }
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -8215,6 +8338,30 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/fbjs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz",
+      "integrity": "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "core-js": "^3.6.4",
+        "cross-fetch": "^3.0.4",
+        "fbjs-css-vars": "^1.0.0",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      }
+    },
+    "node_modules/fbjs-css-vars": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
+      "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/fela": {
       "version": "10.8.2",
       "resolved": "https://registry.npmjs.org/fela/-/fela-10.8.2.tgz",
@@ -8993,6 +9140,17 @@
         "node": ">=12"
       }
     },
+    "node_modules/html-to-draftjs": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz",
+      "integrity": "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "draft-js": "^0.10.x || ^0.11.x",
+        "immutable": "3.x.x || 4.x.x"
+      }
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz",
@@ -9212,6 +9370,13 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -9941,6 +10106,16 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "node_modules/load-json-file": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@@ -10569,7 +10744,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "dev": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -14067,6 +14241,16 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
+    "node_modules/promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "asap": "~2.0.3"
+      }
+    },
     "node_modules/promise-events": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/promise-events/-/promise-events-0.2.4.tgz",
@@ -14334,6 +14518,26 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/react-draft-wysiwyg": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.15.0.tgz",
+      "integrity": "sha512-p1cYZcWc6/ALFBVksbFoCM3b29fGQDlZLIMrXng0TU/UElxIOF2/AWWo4L5auIYVhmqKTZ0NkNjnXOzGGuxyeA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "classnames": "^2.2.6",
+        "draftjs-utils": "^0.10.2",
+        "html-to-draftjs": "^1.5.0",
+        "linkify-it": "^2.2.0",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "draft-js": "^0.10.x || ^0.11.x",
+        "immutable": "3.x.x || 4.x.x",
+        "react": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x || ^18.x.x",
+        "react-dom": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x || ^18.x.x"
+      }
+    },
     "node_modules/react-fast-compare": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
@@ -16205,6 +16409,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/striptags": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/striptags/-/striptags-3.2.0.tgz",
+      "integrity": "sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/style-loader": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz",
@@ -16568,8 +16779,7 @@
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "node_modules/traverse": {
       "version": "0.6.8",
@@ -16738,6 +16948,40 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "0.7.39",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
+      "integrity": "sha512-IZ6acm6RhQHNibSt7+c09hhvsKy9WUr4DVbeq9U8o71qxyYtJpQeDxQnMrVqnIFMLcQjHO0I9wgfO2vIahht4w==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "ua-parser-js": "script/cli.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/uglify-js": {
       "version": "3.17.4",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
@@ -17028,8 +17272,7 @@
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "node_modules/webpack": {
       "version": "5.90.1",
@@ -17370,7 +17613,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -17575,7 +17817,7 @@
         "@eavfw/designer-nodes": "^1.1.2",
         "@eavfw/forms": "^1.2.0-vnext.8",
         "@eavfw/manifest": "^1.5.0-vnext.15",
-        "@eavfw/rich-text-editor": "1.0.0-vnext.2",
+        "@eavfw/rich-text-editor": "1.0.0-vnext.3",
         "@eavfw/utils": "^1.1.0-vnext.2",
         "@fluentui/react-components": "=>9.46.0 <9.49.2",
         "@rjsf/core": "5.18.4",
@@ -19132,10 +19374,18 @@
       }
     },
     "@eavfw/rich-text-editor": {
-      "version": "1.0.0-vnext.2",
-      "resolved": "https://registry.npmjs.org/@eavfw/rich-text-editor/-/rich-text-editor-1.0.0-vnext.2.tgz",
-      "integrity": "sha512-1ldvcjlYLzj9oQcd82zSvTXparYzUnN85p6ehrFLpGeQJJiwNic7BfJaeHooXLzDLFzy3R6QyYbd30HKrqs0jA==",
-      "peer": true
+      "version": "1.0.0-vnext.3",
+      "resolved": "https://registry.npmjs.org/@eavfw/rich-text-editor/-/rich-text-editor-1.0.0-vnext.3.tgz",
+      "integrity": "sha512-PZl88N0yD9gW5XoWaQmuIBYWT46SIYbXXbUfLStz8XySxftyVuNSTMWc8YY9w998QHJ1yEX8K8lqLe/5KwQVnQ==",
+      "peer": true,
+      "requires": {
+        "@types/draftjs-to-html": "^0.8.1",
+        "@types/react-draft-wysiwyg": "^1.13.4",
+        "draft-js": "^0.11.7",
+        "draftjs-to-html": "^0.9.1",
+        "react-draft-wysiwyg": "^1.15.0",
+        "striptags": "^3.2.0"
+      }
     },
     "@eavfw/utils": {
       "version": "1.1.0-vnext.2",
@@ -21693,6 +21943,33 @@
       "integrity": "sha512-SbehVj+zL0QFTufW3HP/Xvwr/kFWw1sFMLCvmyJdp5Xegbo81sqA2tByWlyeryvSwWBrY4drpLOtGPh0fkxjCQ==",
       "peer": true
     },
+    "@types/draft-js": {
+      "version": "0.11.18",
+      "resolved": "https://registry.npmjs.org/@types/draft-js/-/draft-js-0.11.18.tgz",
+      "integrity": "sha512-lP6yJ+EKv5tcG1dflWgDKeezdwBa8wJ7KkiNrrHqXuXhl/VGes1SKjEfKHDZqOz19KQbrAhFvNhDPWwnQXYZGQ==",
+      "peer": true,
+      "requires": {
+        "@types/react": "*",
+        "immutable": "~3.7.4"
+      },
+      "dependencies": {
+        "immutable": {
+          "version": "3.7.6",
+          "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
+          "integrity": "sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==",
+          "peer": true
+        }
+      }
+    },
+    "@types/draftjs-to-html": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@types/draftjs-to-html/-/draftjs-to-html-0.8.4.tgz",
+      "integrity": "sha512-5FZcjFoJL57N/IttLCTCNI0krX+181oCl5hf76u3TqPkqBAphHrJAO9ReYesx9138kcObaYmpnWC2Yrqxoqd2Q==",
+      "peer": true,
+      "requires": {
+        "@types/draft-js": "*"
+      }
+    },
     "@types/eslint": {
       "version": "8.56.2",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.2.tgz",
@@ -21876,6 +22153,16 @@
         "@types/react": "*"
       }
     },
+    "@types/react-draft-wysiwyg": {
+      "version": "1.13.8",
+      "resolved": "https://registry.npmjs.org/@types/react-draft-wysiwyg/-/react-draft-wysiwyg-1.13.8.tgz",
+      "integrity": "sha512-qo0vIHjqAYq3Hz93Td3ecNodgVjKsvrWkBJ6mZXJSUmQzrQ5Fu7NS9oV5PXnVbnuqPoJLALbCSiz8UCksLribg==",
+      "peer": true,
+      "requires": {
+        "@types/draft-js": "*",
+        "@types/react": "*"
+      }
+    },
     "@types/react-redux": {
       "version": "7.1.33",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.33.tgz",
@@ -22354,6 +22641,12 @@
       "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
       "dev": true
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+      "peer": true
+    },
     "available-typed-arrays": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.6.tgz",
@@ -23049,6 +23342,12 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "dev": true
     },
+    "core-js": {
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
+      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
+      "peer": true
+    },
     "core-js-compat": {
       "version": "3.35.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.1.tgz",
@@ -23076,6 +23375,15 @@
         "yaml": "^1.10.0"
       }
     },
+    "cross-fetch": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
+      "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==",
+      "peer": true,
+      "requires": {
+        "node-fetch": "^2.6.12"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -23468,6 +23776,38 @@
         }
       }
     },
+    "draft-js": {
+      "version": "0.11.7",
+      "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz",
+      "integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==",
+      "peer": true,
+      "requires": {
+        "fbjs": "^2.0.0",
+        "immutable": "~3.7.4",
+        "object-assign": "^4.1.1"
+      },
+      "dependencies": {
+        "immutable": {
+          "version": "3.7.6",
+          "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
+          "integrity": "sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==",
+          "peer": true
+        }
+      }
+    },
+    "draftjs-to-html": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/draftjs-to-html/-/draftjs-to-html-0.9.1.tgz",
+      "integrity": "sha512-fFstE6+IayaVFBEvaFt/wN8vdj8FsTRzij7dy7LI9QIwf5LgfHFi9zSpvCg+feJ2tbYVqHxUkjcibwpsTpgFVQ==",
+      "peer": true
+    },
+    "draftjs-utils": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz",
+      "integrity": "sha512-EstHqr3R3JVcilJrBaO/A+01GvwwKmC7e4TCjC7S94ZeMh4IVmf60OuQXtHHpwItK8C2JCi3iljgN5KHkJboUg==",
+      "peer": true,
+      "requires": {}
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -23886,6 +24226,28 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "fbjs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz",
+      "integrity": "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==",
+      "peer": true,
+      "requires": {
+        "core-js": "^3.6.4",
+        "cross-fetch": "^3.0.4",
+        "fbjs-css-vars": "^1.0.0",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      }
+    },
+    "fbjs-css-vars": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
+      "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==",
+      "peer": true
+    },
     "fela": {
       "version": "10.8.2",
       "resolved": "https://registry.npmjs.org/fela/-/fela-10.8.2.tgz",
@@ -24470,6 +24832,13 @@
         "terser": "^5.10.0"
       }
     },
+    "html-to-draftjs": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz",
+      "integrity": "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ==",
+      "peer": true,
+      "requires": {}
+    },
     "html-webpack-plugin": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz",
@@ -24618,6 +24987,12 @@
       "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
       "peer": true
     },
+    "immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "peer": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -25142,6 +25517,15 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "peer": true,
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "load-json-file": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@@ -25604,7 +25988,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "dev": true,
       "requires": {
         "whatwg-url": "^5.0.0"
       }
@@ -28075,6 +28458,15 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "peer": true,
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "promise-events": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/promise-events/-/promise-events-0.2.4.tgz",
@@ -28284,6 +28676,19 @@
         }
       }
     },
+    "react-draft-wysiwyg": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.15.0.tgz",
+      "integrity": "sha512-p1cYZcWc6/ALFBVksbFoCM3b29fGQDlZLIMrXng0TU/UElxIOF2/AWWo4L5auIYVhmqKTZ0NkNjnXOzGGuxyeA==",
+      "peer": true,
+      "requires": {
+        "classnames": "^2.2.6",
+        "draftjs-utils": "^0.10.2",
+        "html-to-draftjs": "^1.5.0",
+        "linkify-it": "^2.2.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-fast-compare": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
@@ -29791,6 +30196,12 @@
       "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
       "dev": true
     },
+    "striptags": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/striptags/-/striptags-3.2.0.tgz",
+      "integrity": "sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==",
+      "peer": true
+    },
     "style-loader": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz",
@@ -30039,8 +30450,7 @@
     "tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "traverse": {
       "version": "0.6.8",
@@ -30155,6 +30565,18 @@
       "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
       "dev": true
     },
+    "ua-parser-js": {
+      "version": "0.7.39",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
+      "integrity": "sha512-IZ6acm6RhQHNibSt7+c09hhvsKy9WUr4DVbeq9U8o71qxyYtJpQeDxQnMrVqnIFMLcQjHO0I9wgfO2vIahht4w==",
+      "peer": true
+    },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "peer": true
+    },
     "uglify-js": {
       "version": "3.17.4",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
@@ -30373,8 +30795,7 @@
     "webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "webpack": {
       "version": "5.90.1",
@@ -30595,7 +31016,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
       "requires": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
diff --git a/packages/designer/package.json b/packages/designer/package.json
index 4c1c044..67d54be 100644
--- a/packages/designer/package.json
+++ b/packages/designer/package.json
@@ -21,7 +21,7 @@
     "@rjsf/validator-ajv8": "5.18.4",
     "monaco-editor": "^0.50.0",
     "pako": "^2.0.4",
-    "@eavfw/rich-text-editor": "1.0.0-vnext.2"
+    "@eavfw/rich-text-editor": "1.0.0-vnext.3"
   },
   "devDependencies": {
     "@types/pako": "2.0.3"
diff --git a/packages/designer/src/Components/Views/rjsf/Widgets/RichTextWidget.tsx b/packages/designer/src/Components/Views/rjsf/Widgets/RichTextWidget.tsx
index 4ef288a..3c41237 100644
--- a/packages/designer/src/Components/Views/rjsf/Widgets/RichTextWidget.tsx
+++ b/packages/designer/src/Components/Views/rjsf/Widgets/RichTextWidget.tsx
@@ -1,4 +1,4 @@
-
+
 import { Field, Textarea } from "@fluentui/react-components";
 import { FieldProps, ObjectFieldTemplatePropertyType, ObjectFieldTemplateProps, WidgetProps, getUiOptions } from "@rjsf/utils";
 import { RJSFSchema } from "@rjsf/utils/lib/types";

From d939733a53ee159a02bff7d3d884d204a2b16a27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 12 Sep 2024 09:57:12 +0200
Subject: [PATCH 082/118] fix: exporting the register token method to be used
 by projects

---
 .../src/Components/Views/QuickFormSettingsView.tsx     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
index 0abcc25..7d707dd 100644
--- a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
@@ -11,7 +11,7 @@ import { defaultQuickFormTokens } from "@eavfw/quickform-core";
 import { Controls } from "@eavfw/apps";
 import { IconEnum } from "@eavfw/quickform-core/src/components/icons/IconResolver";
 
-const inputSlideSchema = {
+const quickformSettingsSchema = {
     label: "QuickForm Feature Flags",
     uiSchema: {
         tokens: {
@@ -52,10 +52,10 @@ const inputSlideSchema = {
     }
 } as { label: string, uiSchema: any, schema: JSONSchema7 };
 
-function registerToken(key: keyof typeof defaultQuickFormTokens, title: string, description: string, widget: string) {
+export function registerToken(key: keyof typeof defaultQuickFormTokens, title: string, description: string, widget: string) {
 
-    const tokensSchema = inputSlideSchema.schema.properties?.tokens! as JSONSchema7;
-    const uiSchema = inputSlideSchema.uiSchema.tokens;
+    const tokensSchema = quickformSettingsSchema.schema.properties?.tokens! as JSONSchema7;
+    const uiSchema = quickformSettingsSchema.uiSchema.tokens;
     if (tokensSchema && tokensSchema.properties) {
         tokensSchema.properties[key] = {
             title,
@@ -113,7 +113,7 @@ export const QuickFormSettingsView = () => {
             <div className={mergeClasses(styles.sectionSlim, styles.section)}>
                 <Form templates={{ FieldTemplate, BaseInputTemplate }}
                     validator={validator}
-                    {...inputSlideSchema}
+                    {...quickformSettingsSchema}
                     formData={quickformpayload.layout}
                     onChange={(a, b) => {
                         console.log("change", [a, b]);

From 231f5fb5a8e30e361c04b8b0ebc2b8d8fd700f28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 12 Sep 2024 10:32:18 +0200
Subject: [PATCH 083/118] fix: support html on headline

---
 packages/core/src/components/heading/Heading.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/core/src/components/heading/Heading.tsx b/packages/core/src/components/heading/Heading.tsx
index f02df63..638867f 100644
--- a/packages/core/src/components/heading/Heading.tsx
+++ b/packages/core/src/components/heading/Heading.tsx
@@ -21,6 +21,17 @@ export const Heading: React.FC<HeadingProps> = ({ children, label, style = {} }:
         margin: 0
     };
 
+
+    if (typeof (children) === "string") {
+
+        return (
+            <h1
+                style={{ ...style, ...headingStyles }}
+                dangerouslySetInnerHTML={{ __html: children.replace(/(?:\r\n|\r|\n)/g, '<br/>') }}
+            />
+        );
+    }
+
     return (
         <h1 style={{ ...style, ...headingStyles }}>
             {children}

From f235e946fbbf938b4803d266f0f518ee4965a37d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Fri, 13 Sep 2024 06:00:52 +0200
Subject: [PATCH 084/118] fix: the slidein effects need to be applied on all
 slides when used.

---
 packages/core/src/components/QuickForm.tsx    | 23 +++++++++++++++++--
 .../slide-renderer/SlideRenderer.tsx          | 19 ++-------------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/packages/core/src/components/QuickForm.tsx b/packages/core/src/components/QuickForm.tsx
index 58ed054..022edfc 100644
--- a/packages/core/src/components/QuickForm.tsx
+++ b/packages/core/src/components/QuickForm.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef, useEffect, useState } from 'react';
 import { useQuickForm } from "../state/QuickFormContext";
 import { Ending, Submit, Intro, SlideRenderer } from "./index";
 import { mergeClasses } from '@griffel/react';
@@ -9,7 +9,26 @@ export type QuickFormProps = {
 }
 export const QuickForm: React.FC<QuickFormProps> = ({ className}) => {
     const { state, setIntroVisited } = useQuickForm();
-    const classes = useMemo(() => mergeClasses(className, state.classes.slide), [className, state.classes?.slide]);
+
+    const [slideEffectClassName, setSlideEffectClassName] = useState<string>();
+
+    const classes = useMemo(() => mergeClasses(className, state.classes.slide, slideEffectClassName), [className, state.classes?.slide, slideEffectClassName]);
+
+
+    let nextAllowedEffectTime = useRef(new Date().getTime());
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+
+            setSlideEffectClassName(mergeClasses(state.classes.slideIsIn));
+
+        }, Math.max(150, nextAllowedEffectTime.current - new Date().getTime() + 150));
+
+        return () => {
+            clearTimeout(timeout);
+            setSlideEffectClassName(mergeClasses(state.classes.slideIsOut));
+            nextAllowedEffectTime.current = new Date().getTime() + 10;
+        }
+    }, [state.currIdx]);
 
     const renderComponent = () => {
         if (state.isIntroSlide && typeof state.data.intro !== "undefined") {
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index 625efad..576bf46 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -17,10 +17,8 @@ export type SlideRendererProps = {
 export const SlideRenderer: React.FC<SlideRendererProps> = ({ className }) => {
 
     const { state, goToNextSlide } = useQuickForm();
-    const [slideEffectClassName, setSlideEffectClassName] = useState<string>();
     const styles = useSlideRenderStyles();
-    const classes = useMemo(() => mergeClasses(className, slideEffectClassName), [className, slideEffectClassName]);
-
+   
     const currentSlide: SlideModel = state.slides[state.currIdx];
 
     // Determine whether to show the "Press Enter" message:
@@ -33,27 +31,14 @@ export const SlideRenderer: React.FC<SlideRendererProps> = ({ className }) => {
     /* Listens to enter key pressed */
     useHandleEnterKeypress(false, goToNextSlide);
 
-    let nextAllowedEffectTime = useRef(new Date().getTime());
-    useEffect(() => {
-        const timeout = setTimeout(() => {
-
-            setSlideEffectClassName(mergeClasses(state.classes.slideIsIn));
-
-        }, Math.max(150, nextAllowedEffectTime.current - new Date().getTime() + 150));
 
-        return () => {
-            clearTimeout(timeout);
-            setSlideEffectClassName(mergeClasses(state.classes.slideIsOut));
-            nextAllowedEffectTime.current = new Date().getTime() + 10;
-        }
-    }, [state.currIdx]);
 
     
 
     return (
         <div
             id="SlideRenderer"
-            className={classes}
+            className={className}
         >
             <Slide model={currentSlide} />
             <Button

From 5703df72ea18f81b057330b4d4311c31137beeeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Fri, 13 Sep 2024 06:22:27 +0200
Subject: [PATCH 085/118] fix: slidein effect was not triggeret on changs from
 submit,ending or intro slides

---
 packages/core/src/components/QuickForm.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/QuickForm.tsx b/packages/core/src/components/QuickForm.tsx
index 022edfc..3d64715 100644
--- a/packages/core/src/components/QuickForm.tsx
+++ b/packages/core/src/components/QuickForm.tsx
@@ -28,7 +28,7 @@ export const QuickForm: React.FC<QuickFormProps> = ({ className}) => {
             setSlideEffectClassName(mergeClasses(state.classes.slideIsOut));
             nextAllowedEffectTime.current = new Date().getTime() + 10;
         }
-    }, [state.currIdx]);
+    }, [state.currIdx, state.data.submit, state.data.ending, state.data.ending]);
 
     const renderComponent = () => {
         if (state.isIntroSlide && typeof state.data.intro !== "undefined") {
@@ -38,7 +38,7 @@ export const QuickForm: React.FC<QuickFormProps> = ({ className}) => {
         } else if (state.isEndingSlide) {
             return <Ending className={classes} model={state.data.ending} />;
         } else {
-            return <SlideRenderer className={className} key={state.currIdx} />;
+            return <SlideRenderer className={classes} key={state.currIdx} />;
         }
     };
 

From 6e4075f1b12fe3c06d474a01cdd06dfb769bfe88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Mon, 16 Sep 2024 06:42:53 +0200
Subject: [PATCH 086/118] fix: added validation messages for translations +
 custom tokens support

---
 packages/core/src/model/QuickFormModel.ts     |  7 ++++
 .../json-definitions/QuickFormDefinition.ts   |  7 ++++
 .../defaults/DefaultModelTransformer.ts       |  2 +
 .../NavigationActionHandler.ts                | 10 ++---
 .../Views/QuickFormSettingsView.tsx           | 41 +++++++++++++++----
 5 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/packages/core/src/model/QuickFormModel.ts b/packages/core/src/model/QuickFormModel.ts
index 04a1dd1..ab16bdb 100644
--- a/packages/core/src/model/QuickFormModel.ts
+++ b/packages/core/src/model/QuickFormModel.ts
@@ -1,6 +1,13 @@
 import { EndingModel, IntroModel, SlideModel, SubmitModel } from "./index";
 
 export type QuickFormModel = {
+    validation?: {
+        messages?: {
+            "NOT_ALL_QUESTIONS_ANSWERED"?: string,
+            "SOME_QUESTIONS_HAS_EMPTY_ANSWER"?: string,
+            "SOME_QUESTIONS_HAVE_FAILED_VALIDATION"?: string;
+        }
+    },
     intro?: IntroModel;
     slides: SlideModel[];
     submit: SubmitModel;
diff --git a/packages/core/src/model/json-definitions/QuickFormDefinition.ts b/packages/core/src/model/json-definitions/QuickFormDefinition.ts
index 188f950..946e461 100644
--- a/packages/core/src/model/json-definitions/QuickFormDefinition.ts
+++ b/packages/core/src/model/json-definitions/QuickFormDefinition.ts
@@ -5,6 +5,13 @@ import { QuickFormSubmitDefinition } from "./QuickFormSubmitDefinition";
 import { LayoutDefinition } from "./Layout";
 
 export type QuickFormDefinition = {
+    validation?: {
+        messages?: {
+            "NOT_ALL_QUESTIONS_ANSWERED"?: string,
+            "SOME_QUESTIONS_HAS_EMPTY_ANSWER"?: string,
+            "SOME_QUESTIONS_HAVE_FAILED_VALIDATION"?: string;
+        }
+    },
     intro?: IntroModel;
     questions: QuickFormQuestionsDefinition,
     submit: QuickFormSubmitDefinition;
diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
index 259a851..086d9cc 100644
--- a/packages/core/src/services/defaults/DefaultModelTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -218,6 +218,8 @@ const transformJSONInput: QuickFormModelTransformer = (definition, payload): Qui
     }
 
     return {
+
+        validation: definition.validation,
         intro: definition.intro,
         ending: definition.ending,
         submit: handleSubmit(definition.submit, payload?.submitFields),
diff --git a/packages/core/src/state/action-handlers/NavigationActionHandler.ts b/packages/core/src/state/action-handlers/NavigationActionHandler.ts
index 0006f2f..eee4d1e 100644
--- a/packages/core/src/state/action-handlers/NavigationActionHandler.ts
+++ b/packages/core/src/state/action-handlers/NavigationActionHandler.ts
@@ -53,7 +53,7 @@ export class NavigationActionHandler {
         }
 
         // Check all visible questions for answered and validity
-        const validationResult = this.validateQuestions(visibleQuestions);
+        const validationResult = this.validateQuestions(visibleQuestions, state);
         console.log("reducer validationResult", validationResult)
         if (validationResult.isValid) {
             return this.computeProgress(NavigationActionHandler.handleSlideChange({ ...state, errorMsg: "" }, 'next'));
@@ -62,13 +62,13 @@ export class NavigationActionHandler {
         }
     };
 
-    static validateQuestions = (questions: QuestionModel[]) => {
+    static validateQuestions = (questions: QuestionModel[], state: QuickformState) => {
         const logger = resolveQuickFormService("logger");
         if (questions.some((q: { answered: boolean; }) => q.answered === false)) {
-            return { isValid: false, errorMsg: "Not all questions have been answered." };
+            return { isValid: false, errorMsg: state.data.validation?.messages?.NOT_ALL_QUESTIONS_ANSWERED ?? "Not all questions have been answered." };
         }
         if (questions.some((q: { output: any; }) => q.output === '' || typeof q.output === "undefined")) {
-            return { isValid: false, errorMsg: "Some questions are missing outputs." };
+            return { isValid: false, errorMsg: state.data.validation?.messages?.SOME_QUESTIONS_HAS_EMPTY_ANSWER ?? "Some questions are missing outputs." };
         }
         if (questions.some(q => !q.validationResult || (!q.validationResult?.isValidating && q.validationResult?.isValid === false))) {
             //TODO, if its validating, should that block us from moving to next?
@@ -76,7 +76,7 @@ export class NavigationActionHandler {
             //I dont think its critical that it allow to move on.  Right now this function is only called when validating if it can go to next slide
             //it has nothing to do with actually validation of the form.
             logger.log("Some questions have failed validation. {questions}", [questions, JSON.stringify(questions)]);
-            return { isValid: false, errorMsg: "Some questions have failed validation." };
+            return { isValid: false, errorMsg: state.data.validation?.messages?.SOME_QUESTIONS_HAVE_FAILED_VALIDATION ?? "Some questions have failed validation." };
         }
 
         return { isValid: true, errorMsg: "" };
diff --git a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
index 7d707dd..b4c8cbd 100644
--- a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
@@ -50,18 +50,30 @@ const quickformSettingsSchema = {
             }
         }
     }
-} as { label: string, uiSchema: any, schema: JSONSchema7 };
+} as { label: string, uiSchema: any, schema: JSONSchema7 & { properties: { tokens: JSONSchema7 } } };
 
-export function registerToken(key: keyof typeof defaultQuickFormTokens, title: string, description: string, widget: string) {
+export function registerToken<TokenRegistry = typeof defaultQuickFormTokens>(key: keyof TokenRegistry, title: string, description: string, widget: string, defaultValue?: any, defaultTokenKey?: keyof TokenRegistry) {
 
     const tokensSchema = quickformSettingsSchema.schema.properties?.tokens! as JSONSchema7;
     const uiSchema = quickformSettingsSchema.uiSchema.tokens;
     if (tokensSchema && tokensSchema.properties) {
-        tokensSchema.properties[key] = {
+        let defaultTokenValue = defaultTokenKey && defaultTokenKey in defaultQuickFormTokens ?
+            defaultQuickFormTokens[defaultTokenKey as keyof typeof defaultQuickFormTokens] ?? defaultValue
+            : defaultValue
+
+        tokensSchema.properties[key as string] = {
             title,
             description,
             type: "string",
-            default: defaultQuickFormTokens[key]
+
+            default:
+                key in defaultQuickFormTokens ?
+                    defaultQuickFormTokens[key as keyof typeof defaultQuickFormTokens] ?? defaultTokenValue
+                    : defaultTokenValue
+        }
+        if (defaultTokenKey) {
+            //@ts-ignore
+            tokensSchema.properties[key]["x-default-token"] = defaultTokenKey;
         }
     }
     if (widget) {
@@ -106,15 +118,30 @@ export const QuickFormSettingsView = () => {
     const styles = useViewStyles();
     const quickformSettingsStyles = useQuickformSettingsStyles();
     const PreviewComponent = Controls["QuickFormSettingsViewPreviewComponent"];
-    console.log("quickformpayloadV1", JSON.stringify(quickformpayload.layout));
-    console.log("ENUM", Object.values(IconEnum));
+
+    const formData = {
+        ...quickformpayload.layout,
+        tokens: {
+            ...(Object.fromEntries(Object.entries(quickformSettingsSchema.schema.properties.tokens.properties ?? {})
+                .filter(([key, value]) => typeof value === "object" && "x-default-token" in value) //@ts-ignore
+                .map(([key, value]) => [key, quickformpayload.layout?.tokens[value["x-default-token"]]])
+            )),
+            ...quickformpayload.layout?.tokens ?? {}
+        }
+
+
+
+    }
+
+    console.log("Settings Data", [quickformSettingsSchema.schema.properties.tokens.properties, JSON.stringify(formData, null, 4)]);
+
     return (
         <div className={mergeClasses(styles.section, quickformSettingsStyles.container)}>
             <div className={mergeClasses(styles.sectionSlim, styles.section)}>
                 <Form templates={{ FieldTemplate, BaseInputTemplate }}
                     validator={validator}
                     {...quickformSettingsSchema}
-                    formData={quickformpayload.layout}
+                    formData={formData}
                     onChange={(a, b) => {
                         console.log("change", [a, b]);
                         dispatch(old => {

From 7bb58e1a337dc525a34ccae2538b7ebf0b239f8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 3 Oct 2024 06:22:29 +0200
Subject: [PATCH 087/118] fix: removed richtexteditor as default and made it
 optional

---
 .../Views/QuickFormEndingSettingsView.tsx          | 14 +++++++-------
 .../Views/QuickFormIntroSettingsView.tsx           | 11 ++++++++---
 .../Views/QuickFormSubmitSettingsView.tsx          | 10 +++++++---
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx
index 7a7c953..817dabd 100644
--- a/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx
@@ -16,12 +16,12 @@ import { QuickformDesignerFields } from "./QuickFormQuestionsView";
 const endingSlideSchema = {
     label: "Ending Settings",
     uiSchema: {
-        text: {
-            "ui:field": "RichTextField"
-        },
-        paragraph: {
-            "ui:field": "RichTextField"
-        }
+        text: "QF_EndingSideTextField" in QuickformDesignerFields ? ({
+            "ui:field": "QF_EndingSideTextField"
+        }) : ({}),
+        paragraph: "QF_EndingSideParagraphField" in QuickformDesignerFields ? ({
+            "ui:field": "QF_EndingSideParagraphField"
+        }) : ({}),
     },
     schema: {
         type: "object",
@@ -53,7 +53,7 @@ export const QuickFormEndingSettingsView = () => {
             <Form templates={{ FieldTemplate: FieldTemplate, BaseInputTemplate: BaseInputTemplate }}
                 validator={validator}
                 {...endingSlideSchema}
-                fields={{ ...{ "RichTextField": RichTextField }, ...QuickformDesignerFields }}
+                fields={{ ...QuickformDesignerFields }}
                 formData={ending}
                 onChange={(a, b) => {
                     console.log("change", [a, b]);
diff --git a/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx
index af081c5..9f2b0ed 100644
--- a/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx
@@ -15,11 +15,16 @@ const introSlideSchema = {
     label: "Intro Settings",
     uiSchema: {
         text: {
-            "ui:field": "RichTextField",
+             
+            ... "QF_IntroSideTextField" in QuickformDesignerFields ? ({
+                "ui:field": "QF_IntroSideTextField"
+            }) : ({}),
             "ui:help": "The headline displayed to the end user when first loading the form"
         },
         paragraph: {
-            "ui:field": "RichTextField",
+            ... "QF_IntroSideParagraphField" in QuickformDesignerFields ? ({
+                "ui:field": "QF_IntroSideParagraphField"
+            }) : ({}),
             "ui:help": "The text displayed to the end user when first loading the form"
         },
         buttonText: {
@@ -85,7 +90,7 @@ export const QuickFormIntroSettingsView = () => {
                 <Form
                     templates={{ FieldTemplate, BaseInputTemplate }}
                     validator={validator}
-                    fields={{ ...{ "RichTextField": RichTextField }, ...QuickformDesignerFields }}
+                    fields={{  ...QuickformDesignerFields }}
                     {...introSlideSchema}
                     formData={intro}
                     onChange={(a) => {
diff --git a/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx
index b459200..1924672 100644
--- a/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx
@@ -17,10 +17,14 @@ const submitSlideSchema = {
     label: "Ending Settings",
     uiSchema: {
         text: {
-            "ui:field": "RichTextField"
+            ... "QF_SubmitSideTextField" in QuickformDesignerFields ? ({
+                "ui:field": "QF_SubmitSideTextField"
+            }) : ({}),
         },
         paragraph: {
-            "ui:field": "RichTextField"
+            ... "QF_SubmitSideParagraphField" in QuickformDesignerFields ? ({
+                "ui:field": "QF_SubmitSideParagraphField"
+            }) : ({}),
         },
         submitFields: {         
             "ui:field":"QFSubmitField"
@@ -63,7 +67,7 @@ export const QuickFormSubmitSettingsView = () => {
     return (
         <div className={mergeClasses(styles.section)}>
             <Form templates={{ FieldTemplate: FieldTemplate, BaseInputTemplate: BaseInputTemplate }}
-                fields={{ ...{ "QFSubmitField": JsonField, "RichTextField": RichTextField }, ...QuickformDesignerFields }}
+                fields={{ ...{ "QFSubmitField": JsonField}, ...QuickformDesignerFields }}
                 widgets={{ jsonWidget: JsonWidget }}
                 validator={validator}
                 {...submitSlideSchema}

From 8fe1d8f8e7ab911af9eb7ea2684d994ee0621e22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 3 Oct 2024 06:49:00 +0200
Subject: [PATCH 088/118] fix: typo in name

---
 .../src/Components/Views/QuickFormEndingSettingsView.tsx  | 8 ++++----
 .../src/Components/Views/QuickFormIntroSettingsView.tsx   | 8 ++++----
 .../src/Components/Views/QuickFormSubmitSettingsView.tsx  | 8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx
index 817dabd..0bf1963 100644
--- a/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx
@@ -16,11 +16,11 @@ import { QuickformDesignerFields } from "./QuickFormQuestionsView";
 const endingSlideSchema = {
     label: "Ending Settings",
     uiSchema: {
-        text: "QF_EndingSideTextField" in QuickformDesignerFields ? ({
-            "ui:field": "QF_EndingSideTextField"
+        text: "QF_EndingSlideTextField" in QuickformDesignerFields ? ({
+            "ui:field": "QF_EndingSlideTextField"
         }) : ({}),
-        paragraph: "QF_EndingSideParagraphField" in QuickformDesignerFields ? ({
-            "ui:field": "QF_EndingSideParagraphField"
+        paragraph: "QF_EndingSlideParagraphField" in QuickformDesignerFields ? ({
+            "ui:field": "QF_EndingSlideParagraphField"
         }) : ({}),
     },
     schema: {
diff --git a/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx
index 9f2b0ed..3dca628 100644
--- a/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx
@@ -16,14 +16,14 @@ const introSlideSchema = {
     uiSchema: {
         text: {
              
-            ... "QF_IntroSideTextField" in QuickformDesignerFields ? ({
-                "ui:field": "QF_IntroSideTextField"
+            ... "QF_IntroSlideTextField" in QuickformDesignerFields ? ({
+                "ui:field": "QF_IntroSlideTextField"
             }) : ({}),
             "ui:help": "The headline displayed to the end user when first loading the form"
         },
         paragraph: {
-            ... "QF_IntroSideParagraphField" in QuickformDesignerFields ? ({
-                "ui:field": "QF_IntroSideParagraphField"
+            ... "QF_IntroSlideParagraphField" in QuickformDesignerFields ? ({
+                "ui:field": "QF_IntroSlideParagraphField"
             }) : ({}),
             "ui:help": "The text displayed to the end user when first loading the form"
         },
diff --git a/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx
index 1924672..3dbffca 100644
--- a/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSubmitSettingsView.tsx
@@ -17,13 +17,13 @@ const submitSlideSchema = {
     label: "Ending Settings",
     uiSchema: {
         text: {
-            ... "QF_SubmitSideTextField" in QuickformDesignerFields ? ({
-                "ui:field": "QF_SubmitSideTextField"
+            ... "QF_SubmitSlideTextField" in QuickformDesignerFields ? ({
+                "ui:field": "QF_SubmitSlideTextField"
             }) : ({}),
         },
         paragraph: {
-            ... "QF_SubmitSideParagraphField" in QuickformDesignerFields ? ({
-                "ui:field": "QF_SubmitSideParagraphField"
+            ... "QF_SubmitSlideParagraphField" in QuickformDesignerFields ? ({
+                "ui:field": "QF_SubmitSlideParagraphField"
             }) : ({}),
         },
         submitFields: {         

From 76422ec9a1ce0a1ac17cac969c3fdb01a56b4307 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 3 Oct 2024 07:39:24 +0200
Subject: [PATCH 089/118] fix: support for html to not replace linebreaks with
 br

---
 packages/core/src/components/ending/Ending.tsx       | 8 ++++----
 packages/core/src/components/heading/Heading.tsx     | 5 +++--
 packages/core/src/components/paragraph/Paragraph.tsx | 5 +++--
 packages/core/src/model/EndingModel.ts               | 2 ++
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/components/ending/Ending.tsx b/packages/core/src/components/ending/Ending.tsx
index f215f0a..949218c 100644
--- a/packages/core/src/components/ending/Ending.tsx
+++ b/packages/core/src/components/ending/Ending.tsx
@@ -24,8 +24,8 @@ const useEndingStyles = makeStyles({
 export const Ending: React.FC<EndingProps> = ({ model, className }) => {
     const { state } = useQuickForm(); 
 
- 
-    const { text, paragraph } = model;
+
+    const { text, paragraph, paragraphIsHtml,textIsHtml } = model;
     const submitStatus = state.submitStatus;
     const styles = useEndingStyles();
     return (
@@ -45,8 +45,8 @@ export const Ending: React.FC<EndingProps> = ({ model, className }) => {
                         </Heading>
                     }
 
-                    {paragraph &&
-                        <Paragraph style={{ marginTop: '10px' }}>
+                {paragraph &&
+                    <Paragraph isHtml={paragraphIsHtml} style={{ marginTop: '10px' }}>
                             {paragraph}
                         </Paragraph>
                     }
diff --git a/packages/core/src/components/heading/Heading.tsx b/packages/core/src/components/heading/Heading.tsx
index 638867f..8df5038 100644
--- a/packages/core/src/components/heading/Heading.tsx
+++ b/packages/core/src/components/heading/Heading.tsx
@@ -6,9 +6,10 @@ type HeadingProps = {
     readonly style?: React.CSSProperties;
     readonly className?: string;
     readonly label?: string;
+    readonly isHtml?: boolean;
 };
 
-export const Heading: React.FC<HeadingProps> = ({ children, label, style = {} }: HeadingProps) => {
+export const Heading: React.FC<HeadingProps> = ({ children, label, style = {}, isHtml }: HeadingProps) => {
 
     const headingStyles: React.CSSProperties = {
         fontSize: quickformtokens.headlineFontSize,
@@ -27,7 +28,7 @@ export const Heading: React.FC<HeadingProps> = ({ children, label, style = {} }:
         return (
             <h1
                 style={{ ...style, ...headingStyles }}
-                dangerouslySetInnerHTML={{ __html: children.replace(/(?:\r\n|\r|\n)/g, '<br/>') }}
+                dangerouslySetInnerHTML={{ __html: isHtml?children: children.replace(/(?:\r\n|\r|\n)/g, '<br/>') }}
             />
         );
     }
diff --git a/packages/core/src/components/paragraph/Paragraph.tsx b/packages/core/src/components/paragraph/Paragraph.tsx
index bd8bc96..9a11e14 100644
--- a/packages/core/src/components/paragraph/Paragraph.tsx
+++ b/packages/core/src/components/paragraph/Paragraph.tsx
@@ -21,9 +21,10 @@ const useParagraphStyles = makeStyles({
 type ParagraphProps = {
     readonly children: ReactNode;
     style?: React.CSSProperties;
+    isHtml?: boolean;
 };
 
-export const Paragraph: React.FC<ParagraphProps> = ({ style, children }: ParagraphProps) => {
+export const Paragraph: React.FC<ParagraphProps> = ({ style, children,isHtml }: ParagraphProps) => {
     const styles = useParagraphStyles();
 
     if (typeof (children) === "string") {
@@ -32,7 +33,7 @@ export const Paragraph: React.FC<ParagraphProps> = ({ style, children }: Paragra
             <p
                 className={styles.para}
                 style={style}
-                dangerouslySetInnerHTML={{ __html: children.replace(/(?:\r\n|\r|\n)/g, '<br/>') }}
+                dangerouslySetInnerHTML={{ __html: isHtml ? children: children.replace(/(?:\r\n|\r|\n)/g, '<br/>') }}
             />
         );
     }
diff --git a/packages/core/src/model/EndingModel.ts b/packages/core/src/model/EndingModel.ts
index 7416a3c..de28f0e 100644
--- a/packages/core/src/model/EndingModel.ts
+++ b/packages/core/src/model/EndingModel.ts
@@ -1,4 +1,6 @@
 export type EndingModel = {
     text: string;
+    textIsHtml?: boolean;
     paragraph?: string;
+    paragraphIsHtml?: boolean;
 };
\ No newline at end of file

From 158580459d5cbf85ef960bc1f6ca47013a42ed47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 3 Oct 2024 08:31:27 +0200
Subject: [PATCH 090/118] fix: moved the object into the render

---
 .../Views/QuickFormEndingSettingsView.tsx     | 56 ++++++++++---------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx
index 0bf1963..f004798 100644
--- a/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormEndingSettingsView.tsx
@@ -13,37 +13,39 @@ import { JsonField } from "./rjsf/Widgets/JsonWidget";
 import { RichTextField } from "./rjsf/Widgets/RichTextWidget";
 import { QuickformDesignerFields } from "./QuickFormQuestionsView";
 
-const endingSlideSchema = {
-    label: "Ending Settings",
-    uiSchema: {
-        text: "QF_EndingSlideTextField" in QuickformDesignerFields ? ({
-            "ui:field": "QF_EndingSlideTextField"
-        }) : ({}),
-        paragraph: "QF_EndingSlideParagraphField" in QuickformDesignerFields ? ({
-            "ui:field": "QF_EndingSlideParagraphField"
-        }) : ({}),
-    },
-    schema: {
-        type: "object",
-        required: ["text"],
-        properties: {
-            text: {
-                title: "Text",
-                description: "The headline displayed to the end user when completed the form",
-                type: "string"
 
-            },
-            paragraph: {
-                title: "Paragraph",
-                description: "The text displayed to the end user when when completed the form",
-                type: "string"
+export const QuickFormEndingSettingsView = () => {
+
+
+    const endingSlideSchema = {
+        label: "Ending Settings",
+        uiSchema: {
+            text: "QF_EndingSlideTextField" in QuickformDesignerFields ? ({
+                "ui:field": "QF_EndingSlideTextField"
+            }) : ({}),
+            paragraph: "QF_EndingSlideParagraphField" in QuickformDesignerFields ? ({
+                "ui:field": "QF_EndingSlideParagraphField"
+            }) : ({}),
+        },
+        schema: {
+            type: "object",
+            required: ["text"],
+            properties: {
+                text: {
+                    title: "Text",
+                    description: "The headline displayed to the end user when completed the form",
+                    type: "string"
+
+                },
+                paragraph: {
+                    title: "Paragraph",
+                    description: "The text displayed to the end user when when completed the form",
+                    type: "string"
+                }
             }
         }
-    }
-} as { label: string, uiSchema: any, schema: JSONSchema7 };
-
+    } as { label: string, uiSchema: any, schema: JSONSchema7 };
 
-export const QuickFormEndingSettingsView = () => {
 
     const { quickformpayload: { ending }, updateQuickFormPayload: dispatch } = useQuickFormDefinition();
     const styles = useViewStyles();

From 00a5e035614b237c7ea8904e9692cf8e2fd9055c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Fri, 4 Oct 2024 05:28:29 +0200
Subject: [PATCH 091/118] fix: supporting widgets for designer

---
 .../src/Components/Views/QuickFormIntroSettingsView.tsx    | 7 ++++---
 .../src/Components/Views/QuickFormQuestionsView.tsx        | 7 ++++++-
 .../src/Components/Views/QuickFormSettingsView.tsx         | 5 ++++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx
index 3dca628..032e4e4 100644
--- a/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx
@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
 import { JSONSchema7TypeName, JSONSchema7 } from "json-schema";
 import React from "react";
 import { RichTextField } from "./rjsf/Widgets/RichTextWidget";
-import { QuickformDesignerFields } from "./QuickFormQuestionsView";
+import { QuickformDesignerFields, QuickformDesignerWidgets } from "./QuickFormQuestionsView";
 
 const introSlideSchema = {
     label: "Intro Settings",
@@ -80,7 +80,7 @@ export const QuickFormIntroSettingsView = () => {
             return { ...old };
         });
     }, [enableIntro, dispatch]);
-
+    console.log("QuickformDesignerWidgets", QuickformDesignerWidgets);
     return (
         <div className={mergeClasses(styles.section, styles.sectionSlim)}>
             <div style={{ display: "flex", justifyContent: "center", alignItems: enableIntro ? "" : "end", marginTop: "10px" }}>
@@ -90,7 +90,8 @@ export const QuickFormIntroSettingsView = () => {
                 <Form
                     templates={{ FieldTemplate, BaseInputTemplate }}
                     validator={validator}
-                    fields={{  ...QuickformDesignerFields }}
+                    fields={QuickformDesignerFields }
+                    widgets={QuickformDesignerWidgets }
                     {...introSlideSchema}
                     formData={intro}
                     onChange={(a) => {
diff --git a/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx b/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
index 096e856..a8ded3e 100644
--- a/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
@@ -5,7 +5,7 @@ import validator from '@rjsf/validator-ajv8';
 import { Dropdown, DropdownProps, Option, mergeClasses, Field, Input, MessageBar, MessageBarBody, MessageBarTitle, makeStyles, tokens, shorthands } from '@fluentui/react-components';
 import { useViewStyles } from "../Styles/useViewStyles.styles";
 import { QuickFormDesignerDefinition } from "../../Types/QuickFormDefinition";
-import { FieldProps, ariaDescribedByIds } from "@rjsf/utils";
+import { FieldProps, WidgetProps, ariaDescribedByIds } from "@rjsf/utils";
 import { FieldTemplate } from "./rjsf/FieldTemplate";
 import { BaseInputTemplate } from "./rjsf/BaseInputTemplate";
 
@@ -13,11 +13,16 @@ import { InputComponentMetadata, resolveInputComponentSchemas } from "@eavfw/qui
 
 
 export const QuickformDesignerFields = {} as { [key: string]: React.FC<FieldProps> };
+export const QuickformDesignerWidgets = {} as { [key: string]: React.FC<WidgetProps> };
 
 export function registerInputControlDesignerField<T = any>(field: string, component: React.FC<FieldProps<T>>) {
     QuickformDesignerFields[field] = component as React.FC<FieldProps>;
 }
 
+export function registerInputControlDesignerWidget<T = any>(widget: string, component: React.FC<WidgetProps<T>>) {
+    QuickformDesignerWidgets[widget] = component as React.FC<WidgetProps>;
+}
+
 const useQuickFormQuestionsViewStyles = makeStyles({
     messageBar: {
         ...shorthands.margin("0.285714rem"),
diff --git a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
index b4c8cbd..ff724e8 100644
--- a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
@@ -10,6 +10,7 @@ import { JSONSchema7 } from "json-schema";
 import { defaultQuickFormTokens } from "@eavfw/quickform-core";
 import { Controls } from "@eavfw/apps";
 import { IconEnum } from "@eavfw/quickform-core/src/components/icons/IconResolver";
+import { QuickformDesignerFields, QuickformDesignerWidgets } from "./QuickFormQuestionsView";
 
 const quickformSettingsSchema = {
     label: "QuickForm Feature Flags",
@@ -134,13 +135,15 @@ export const QuickFormSettingsView = () => {
     }
 
     console.log("Settings Data", [quickformSettingsSchema.schema.properties.tokens.properties, JSON.stringify(formData, null, 4)]);
-
+    console.log("QuickformDesignerWidgets", QuickformDesignerWidgets);
     return (
         <div className={mergeClasses(styles.section, quickformSettingsStyles.container)}>
             <div className={mergeClasses(styles.sectionSlim, styles.section)}>
                 <Form templates={{ FieldTemplate, BaseInputTemplate }}
                     validator={validator}
                     {...quickformSettingsSchema}
+                    fields={QuickformDesignerFields}
+                    widgets={QuickformDesignerWidgets}
                     formData={formData}
                     onChange={(a, b) => {
                         console.log("change", [a, b]);

From b8b3d635693b3dd48658d544e5832eef11da027c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Fri, 4 Oct 2024 21:54:32 +0200
Subject: [PATCH 092/118] fix: removed flex on headline

---
 packages/core/src/components/ending/Ending.tsx   |  4 ++--
 packages/core/src/components/heading/Heading.tsx | 12 ++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/ending/Ending.tsx b/packages/core/src/components/ending/Ending.tsx
index 949218c..959e34f 100644
--- a/packages/core/src/components/ending/Ending.tsx
+++ b/packages/core/src/components/ending/Ending.tsx
@@ -39,8 +39,8 @@ export const Ending: React.FC<EndingProps> = ({ model, className }) => {
             {submitStatus.isSubmitSuccess &&
                 <>
                     {state.defaultEndingSlideIcon !== "none" && <Checkmark color={quickformtokens.onSurface} />}
-                    {text &&
-                        <Heading style={{ marginTop: '10px' }}>
+                {text &&
+                    <Heading isHtml={textIsHtml} style={{ marginTop: '10px' }}>
                             {text}
                         </Heading>
                     }
diff --git a/packages/core/src/components/heading/Heading.tsx b/packages/core/src/components/heading/Heading.tsx
index 8df5038..1296490 100644
--- a/packages/core/src/components/heading/Heading.tsx
+++ b/packages/core/src/components/heading/Heading.tsx
@@ -16,8 +16,8 @@ export const Heading: React.FC<HeadingProps> = ({ children, label, style = {}, i
         fontWeight: 'bold',
         color: quickformtokens.onSurface,
         position: "relative",
-        display: 'flex',
-        alignItems: 'center',
+      //  display: 'flex',
+       // alignItems: 'center',
         // CSS-reset from default margin on h1
         margin: 0
     };
@@ -25,6 +25,14 @@ export const Heading: React.FC<HeadingProps> = ({ children, label, style = {}, i
 
     if (typeof (children) === "string") {
 
+        if(isHtml)
+            return (
+                <div
+                style={{ ...style, ...headingStyles }}
+                dangerouslySetInnerHTML={{ __html:  children }}
+            />
+        );
+
         return (
             <h1
                 style={{ ...style, ...headingStyles }}

From d06a208103c8d64e928bb088e7d8fca3ff4c23f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Tue, 8 Oct 2024 16:13:17 +0200
Subject: [PATCH 093/118] fix: removed lineheight

---
 packages/core/src/components/paragraph/Paragraph.tsx | 2 +-
 packages/core/src/components/question/Question.tsx   | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/paragraph/Paragraph.tsx b/packages/core/src/components/paragraph/Paragraph.tsx
index 9a11e14..14a769a 100644
--- a/packages/core/src/components/paragraph/Paragraph.tsx
+++ b/packages/core/src/components/paragraph/Paragraph.tsx
@@ -10,7 +10,7 @@ const useParagraphStyles = makeStyles({
         color: quickformtokens.onSurface,
         fontSize: quickformtokens.questionParagraphFontSize,
         fontWeight: 'unset',
-        lineHeight: quickformtokens.questionParagraphFontSize, // '1.4em',
+        //lineHeight: quickformtokens.questionParagraphFontSize, // '1.4em',
         ...shorthands.margin(0, 0, quickformtokens.gap1, 0),
         '@media screen and (max-width: 599px)': { fontSize: quickformtokens.paragraphMobileFontSize },
     },
diff --git a/packages/core/src/components/question/Question.tsx b/packages/core/src/components/question/Question.tsx
index e7f982f..9b390cb 100644
--- a/packages/core/src/components/question/Question.tsx
+++ b/packages/core/src/components/question/Question.tsx
@@ -10,6 +10,7 @@ import { QuestionHeading } from "./components/QuestionHeading";
 type QuestionProps = {
     model: QuestionModel;
     style?: React.CSSProperties;
+    className?: string;
 }
 
 const questionStyling: React.CSSProperties = {
@@ -21,7 +22,7 @@ const questionStyling: React.CSSProperties = {
     padding: `${quickformtokens.questionPadding}, ${quickformtokens.questionPadding}, ${quickformtokens.questionPaddingBottom}, ${quickformtokens.questionPadding}`,
 }
 
-export const Question: React.FC<QuestionProps> = ({ model, style }) => {
+export const Question: React.FC<QuestionProps> = ({ model, style, className }) => {
 
     const InputType = resolveInputComponent(model.inputType);
     const logger = resolveQuickFormService("logger");
@@ -40,7 +41,7 @@ export const Question: React.FC<QuestionProps> = ({ model, style }) => {
     }
 
     return (
-        <div
+        <div className={className}
             style={{ ...questionStyling, ...style }}
         >
             {model.text &&

From 190a71ddb1f5837ecb914e52879873d7128382c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Mon, 14 Oct 2024 08:46:57 +0200
Subject: [PATCH 094/118] feat: Added validation support for submit fields and
 submit

---
 .../core/src/components/question/Question.tsx |  4 +-
 .../question/components/QuestionHeading.tsx   |  4 +-
 packages/core/src/model/QuestionModel.ts      | 11 ++++
 .../model/json-definitions/JsonDataModels.ts  |  4 ++
 .../defaults/DefaultModelTransformer.ts       |  1 +
 .../defaults/DefaultQuestionTransformer.ts    |  1 +
 packages/core/src/state/QuickformAction.ts    |  8 ++-
 packages/core/src/state/QuickformReducer.ts   | 34 ++++++++--
 packages/core/src/state/QuickformState.ts     |  3 +-
 .../action-handlers/QuestionActionHandler.ts  | 14 ++--
 .../action-handlers/SubmitActionHandler.ts    | 64 ++++++++++---------
 .../action-handlers/VisibilityHandler.ts      |  2 +-
 packages/core/src/utils/quickformUtils.ts     |  6 +-
 13 files changed, 107 insertions(+), 49 deletions(-)

diff --git a/packages/core/src/components/question/Question.tsx b/packages/core/src/components/question/Question.tsx
index 9b390cb..ada1e92 100644
--- a/packages/core/src/components/question/Question.tsx
+++ b/packages/core/src/components/question/Question.tsx
@@ -27,7 +27,7 @@ export const Question: React.FC<QuestionProps> = ({ model, style, className }) =
     const InputType = resolveInputComponent(model.inputType);
     const logger = resolveQuickFormService("logger");
     const { state } = useQuickForm();
-    logger.log("QuestionRender for question {@model} InputProps", model);
+    logger.log("QuestionRender for question {logicalName} {@model} InputProps", model.logicalName, model);
 
     const ql = state.slides[state.currIdx].questions.length === 1 ? '' : `.${String.fromCharCode('A'.charCodeAt(0) + state.slides[state.currIdx].questions.indexOf(model))}`;
     const label = state.isSubmitSlide ? '' : `${state.currIdx + 1}${ql}`;
@@ -45,7 +45,7 @@ export const Question: React.FC<QuestionProps> = ({ model, style, className }) =
             style={{ ...questionStyling, ...style }}
         >
             {model.text &&
-                <QuestionHeading label={label} >
+                <QuestionHeading required={model.isRequired} label={label} >
                     {model.text}
                 </QuestionHeading>
             }
diff --git a/packages/core/src/components/question/components/QuestionHeading.tsx b/packages/core/src/components/question/components/QuestionHeading.tsx
index de4c717..0a5113f 100644
--- a/packages/core/src/components/question/components/QuestionHeading.tsx
+++ b/packages/core/src/components/question/components/QuestionHeading.tsx
@@ -10,9 +10,10 @@ type QuestionHeadingProps = {
     readonly style?: React.CSSProperties;
     readonly className?: string;
     readonly label?: string;
+    readonly required?: boolean;
 };
 
-export const QuestionHeading: React.FC<QuestionHeadingProps> = ({ children, label, style = {} }: QuestionHeadingProps) => {
+export const QuestionHeading: React.FC<QuestionHeadingProps> = ({ children, label, style = {}, required=false }: QuestionHeadingProps) => {
 
     const shouldDisplayNumber = resolveQuickFormService("headingNumberDisplayProvider")();
 
@@ -43,6 +44,7 @@ export const QuestionHeading: React.FC<QuestionHeadingProps> = ({ children, labe
                 <ImArrowRightIcon size="12px" />
             </div>}
             {children}
+            {required && <span style={{ color: quickformtokens.onSurface, marginLeft: quickformtokens.gap1 }}>*</span>}
         </h1>
     );
 }
diff --git a/packages/core/src/model/QuestionModel.ts b/packages/core/src/model/QuestionModel.ts
index f4c1782..c2da985 100644
--- a/packages/core/src/model/QuestionModel.ts
+++ b/packages/core/src/model/QuestionModel.ts
@@ -83,6 +83,17 @@ export type QuestionModel<TProps = InputPropertiesTypes> = {
      */
     validationResult?: ValidationResult;
 
+    /**
+     * https://json-schema.org/draft/2019-09/json-schema-validation
+     */
+    validation?: {
+       
+    }
+    /**
+     * is true if the question is required. Input controls should mark the question as required
+     */
+    isRequired?: boolean
+
 
     /** is true if the question is active. Input controls should set focus if set to active*/
     isActive?: boolean
diff --git a/packages/core/src/model/json-definitions/JsonDataModels.ts b/packages/core/src/model/json-definitions/JsonDataModels.ts
index 954e97b..3c97fc3 100644
--- a/packages/core/src/model/json-definitions/JsonDataModels.ts
+++ b/packages/core/src/model/json-definitions/JsonDataModels.ts
@@ -69,6 +69,10 @@ type QuickFormQuestionDefinition = {
      */
     order?: number
 
+    /**
+     * Is the question required to be answered.
+     */
+    isRequired?: boolean
 }
 
 /**
diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
index 086d9cc..5461b9f 100644
--- a/packages/core/src/services/defaults/DefaultModelTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -164,6 +164,7 @@ function handleSubmit(submit: QuickFormSubmitDefinition, payload: any): SubmitMo
                 placeholder: uiSchema?.[k]?.["ui:placeholder"],
                 text: (uiSchema?.[k]?.["ui:label"] ?? true) ? v.title : undefined,
                 paragraph: v.description,
+                isRequired: schema?.required?.includes(k) ?? false,
                 dataType: v.type,
                 ...uiSchema?.[k]?.["ui:inputProps"] ?? {}
 
diff --git a/packages/core/src/services/defaults/DefaultQuestionTransformer.ts b/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
index 7f61393..5ecc431 100644
--- a/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
@@ -20,6 +20,7 @@ function mapJsonQuestionToModelQuestion(questionKey: string, question: QuestionJ
 
     return {
         answered: hasDefaultValueOrPayload,
+        isRequired: question.isRequired ?? true,
         dataType: question.dataType ?? "string",
         inputProperties: parseInputProperties(question),
         inputType: question.inputType ?? "text",
diff --git a/packages/core/src/state/QuickformAction.ts b/packages/core/src/state/QuickformAction.ts
index 184bb7c..3ab78c5 100644
--- a/packages/core/src/state/QuickformAction.ts
+++ b/packages/core/src/state/QuickformAction.ts
@@ -1,6 +1,7 @@
 import { ValidationResult } from "../model/ValidationResult";
 import { SubmitStatus } from "../model/SubmitStatus";
 import { QuickFormDefinition } from "../model/json-definitions/QuickFormDefinition";
+import { QuickformState } from "./QuickformState";
 
 export type QuickformAnswerQuestionAction = { type: 'ANSWER_QUESTION'; logicalName: string; output: string; dispatch: React.Dispatch<QuickformAction>, intermediate?: boolean, validationResult?: ValidationResult };
 
@@ -9,7 +10,12 @@ export type QuickformAction =
     | { type: 'NEXT_SLIDE' }
     | { type: 'PREV_SLIDE' }
     | { type: 'SET_ERROR_MSG'; msg: string }
-    | { type: 'PROCESS_INTERMEDIATE_QUESTIONS'; dispatch: React.Dispatch<QuickformAction>; logicalName?: string }
+    | {
+        type: 'PROCESS_INTERMEDIATE_QUESTIONS';
+        dispatch: React.Dispatch<QuickformAction>;
+        logicalName?: string        
+    }
+    | { type: 'ON_VALIDATION_COMPLETED', callback: (state: QuickformState) => void }
     | QuickformAnswerQuestionAction
     | { type: 'SET_VALIDATION_RESULT'; logicalName: string; validationResult: ValidationResult; timestamp: number }
     | { type: 'COMPUTE_PROGRESS' }
diff --git a/packages/core/src/state/QuickformReducer.ts b/packages/core/src/state/QuickformReducer.ts
index 8a7e16e..69d9ec0 100644
--- a/packages/core/src/state/QuickformReducer.ts
+++ b/packages/core/src/state/QuickformReducer.ts
@@ -8,6 +8,7 @@ import { QuestionActionHandler } from "./action-handlers/QuestionActionHandler";
 import { VisibilityHandler } from "./action-handlers/VisibilityHandler";
 
 import { trace } from "@opentelemetry/api";
+import { ValidationResult } from "../model/ValidationResult";
 
 export const quickformReducer = (state: QuickformState, action: QuickformAction): QuickformState => {
     const logger = resolveQuickFormService("logger");
@@ -97,9 +98,25 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
         }
 
         case 'SET_VALIDATION_RESULT': {
-            return QuestionActionHandler.updateQuestionValidation(state, action.logicalName, action.validationResult, action.timestamp)
-        }
 
+            let updatedState= QuestionActionHandler.updateQuestionValidation(state, action.logicalName, action.validationResult, action.timestamp)
+
+            let isValidating = getAllQuestions(updatedState).some(q => q.validationResult?.isValidating ?? false);
+
+            if (!isValidating && updatedState.onValidationCompleteCallback) {
+                updatedState.onValidationCompleteCallback(updatedState);
+            }
+
+            return updatedState;
+        }
+        case 'ON_VALIDATION_COMPLETED': {
+            let isValidating = getAllQuestions(state).some(q => q.validationResult?.isValidating ?? false);
+            if (isValidating) {
+                return { ...state, onValidationCompleteCallback: action.callback }
+            }
+            action.callback(state);
+            return state;
+        }
         case 'PROCESS_INTERMEDIATE_QUESTIONS': {
             /*  Processes all questions that are in an Intermediate-state by ensuring they are successfully transitioned to a fully answered state. 
             *   1. Iterating through all questions in the state.slides array, it checks each question to determine if it's not yet marked as answered and if it has a valid output. 
@@ -108,7 +125,8 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
             *   The overall effect is to ensure no intermediate questions are left behind unanswered or unvalidated.
             */
 
-            let allIntermediateQuestions = getAllIntermediateQuestions(state.slides);
+            let tasks: Array<PromiseLike<ValidationResult>> = [];
+            let allIntermediateQuestions = getAllIntermediateQuestions(state);
 
             // Dont include the question currently being answered
             if (action.logicalName) {
@@ -126,11 +144,15 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
                         }
                     );
 
-                    QuestionActionHandler.validateInput(state, intermediateQuestion.logicalName).then(result => {
-                        action.dispatch({ type: 'SET_VALIDATION_RESULT', logicalName: intermediateQuestion.logicalName, validationResult: result, timestamp: timestamp })
-                    });
+                    tasks.push(QuestionActionHandler.validateInput(state, intermediateQuestion.logicalName).then(result => {
+                        action.dispatch({ type: 'SET_VALIDATION_RESULT', logicalName: intermediateQuestion.logicalName, validationResult: result, timestamp: timestamp });
+                        return result;
+                    }));
                 }
             }
+
+             
+
             return state;
             //DISCUSS WITH KBA - should we not run this in answer insteaad?
             return VisibilityHandler.updateVisibleState(state);;
diff --git a/packages/core/src/state/QuickformState.ts b/packages/core/src/state/QuickformState.ts
index ccc295c..4eb3f64 100644
--- a/packages/core/src/state/QuickformState.ts
+++ b/packages/core/src/state/QuickformState.ts
@@ -34,7 +34,8 @@ export type QuickformState = {
     submitStatus: SubmitStatus;
     totalSteps: number;
     classes: Partial<QuickformClassNames>,
-    payloadAugments: Array<(payload: any) => any>
+    payloadAugments: Array<(payload: any) => any>,
+    onValidationCompleteCallback?: (state: QuickformState) => void;
 }
 
 export const defaultState = (data: QuickFormModel = defaultData, layout?: LayoutDefinition): QuickformState => {
diff --git a/packages/core/src/state/action-handlers/QuestionActionHandler.ts b/packages/core/src/state/action-handlers/QuestionActionHandler.ts
index 6ebee67..3c96f49 100644
--- a/packages/core/src/state/action-handlers/QuestionActionHandler.ts
+++ b/packages/core/src/state/action-handlers/QuestionActionHandler.ts
@@ -31,8 +31,12 @@ export class QuestionActionHandler {
             newState.data.submit.submitFields[questionIndex] :
             newState.slides[slideIndex].questions[questionIndex];
 
-        if (!targetQuestion)
+        if (!targetQuestion) {
+            const logger = resolveQuickFormService("logger");
+            logger.log("QuickForm Reducer - Question not found: {logicalName} {questionIndex} {isSubmitSlide}",
+                logicalName, questionIndex, state.isSubmitSlide);
             return state;
+        }
 
         Object.entries(propertiesToUpdate).forEach(([key, value]) => {
             if (targetQuestion.hasOwnProperty(key) && typeof value === 'object' && !Array.isArray(value) && value !== null) {
@@ -66,7 +70,7 @@ export class QuestionActionHandler {
     };
 
     static startQuestionValidation = (state: QuickformState, logicalName: string, timestamp: number) => {
-        const currentValidationResult = findQuestionByLogicalName(logicalName, getAllQuestions(state.slides))?.validationResult;
+        const currentValidationResult = findQuestionByLogicalName(logicalName, getAllQuestions(state))?.validationResult;
 
         return this.updateQuestionProperties(state, logicalName, {
             validationResult: { ...currentValidationResult, timestamp: timestamp, isValidating: true, isValid: false }
@@ -83,7 +87,7 @@ export class QuestionActionHandler {
      * @returns the updated state
      */
     static updateQuestionValidation = (state: QuickformState, logicalName: string, validationResult: ValidationResult, timestamp: number) => {
-        const currentValidationResult = findQuestionByLogicalName(logicalName, getAllQuestions(state.slides))?.validationResult;
+        const currentValidationResult = findQuestionByLogicalName(logicalName, getAllQuestions(state))?.validationResult;
         if (currentValidationResult?.timestamp !== timestamp) {
             return state;
         }
@@ -93,9 +97,9 @@ export class QuestionActionHandler {
     }
 
     static async validateInput(state: QuickformState, logicalName: string): Promise<ValidationResult> {
-        const questionRef = findQuestionByLogicalName(logicalName, getAllQuestions(state.slides));
+        const questionRef = findQuestionByLogicalName(logicalName, getAllQuestions(state));
         if (!questionRef) {
-            console.log("Question not valid", [logicalName, getAllQuestions(state.slides)])
+            console.log("Question not valid", [logicalName, getAllQuestions(state)])
             return {
                 isValid: false,
                 message: 'Question not valid',
diff --git a/packages/core/src/state/action-handlers/SubmitActionHandler.ts b/packages/core/src/state/action-handlers/SubmitActionHandler.ts
index adbeeab..926b6e5 100644
--- a/packages/core/src/state/action-handlers/SubmitActionHandler.ts
+++ b/packages/core/src/state/action-handlers/SubmitActionHandler.ts
@@ -4,43 +4,49 @@ import { QuickformAction, QuickformState } from "../index";
 
 export type ServerActionSubmitHandler = (data: any) => Promise<Partial<QuickFormDefinition>>;
 export class SubmitActionHandler {
-    static submit = async (state: QuickformState, dispatch: React.Dispatch<QuickformAction>, onSubmitAsync?: ServerActionSubmitHandler) => {
+    static submit =  (state: QuickformState, dispatch: React.Dispatch<QuickformAction>, onSubmitAsync?: ServerActionSubmitHandler) => {
 
-        try {
-            const body = this.generatePayload(state);
 
-            if (onSubmitAsync) {
-                const rsp = await onSubmitAsync(body);
+        dispatch({ type: "PROCESS_INTERMEDIATE_QUESTIONS", dispatch, logicalName: undefined });
+        dispatch({
+            type: "ON_VALIDATION_COMPLETED",  callback: async (state) => {
+                try {
 
-                dispatch({ type: "UPDATE_QUICKFORM_DEFINITION", definition: rsp });
 
-            } else {
+                    const body = this.generatePayload(state);
 
-                let rsp = await fetch(state.data.submit.submitUrl, {
-                    method: state.data.submit.submitMethod,
-                    headers: {
-                        "content-type": "application/json",
-                    },
-                    body: JSON.stringify(body),
-                    credentials: "include"
-                });
-                if (!rsp.ok) {
-                    throw new Error("Failed to submit:" + await rsp.text());
-                }
-            }
+                    if (onSubmitAsync) {
+                        const rsp = await onSubmitAsync(body);
 
-            dispatch({ type: "SET_SUBMIT_STATUS", status: { isSubmitSuccess: true, isSubmitting: false, isSubmitError: false } });
-            dispatch({ type: 'GO_TO_ENDING' });
+                        dispatch({ type: "UPDATE_QUICKFORM_DEFINITION", definition: rsp });
 
-        } catch (error: any) {
-            console.error(error.message);
-            dispatch({ type: "SET_SUBMIT_STATUS", status: { isSubmitting: false, isSubmitError: true, isSubmitSuccess: false } });
-            return;
+                    } else {
+
+                        let rsp = await fetch(state.data.submit.submitUrl, {
+                            method: state.data.submit.submitMethod,
+                            headers: {
+                                "content-type": "application/json",
+                            },
+                            body: JSON.stringify(body),
+                            credentials: "include"
+                        });
+                        if (!rsp.ok) {
+                            throw new Error("Failed to submit:" + await rsp.text());
+                        }
+                    }
+
+                    dispatch({ type: "SET_SUBMIT_STATUS", status: { isSubmitSuccess: true, isSubmitting: false, isSubmitError: false } });
+                    dispatch({ type: 'GO_TO_ENDING' });
+
+                } catch (error: any) {
+                    console.error(error.message);
+                    dispatch({ type: "SET_SUBMIT_STATUS", status: { isSubmitting: false, isSubmitError: true, isSubmitSuccess: false } });
+                    return;
+
+                }
+            }
+        });
 
-        }
-        // finally {
-        //     dispatch({ type: "SET_SUBMIT_STATUS", status: { isSubmitting: false, isSubmitOK: true } });
-        // }
 
     }
 
diff --git a/packages/core/src/state/action-handlers/VisibilityHandler.ts b/packages/core/src/state/action-handlers/VisibilityHandler.ts
index 2c416a9..0f80845 100644
--- a/packages/core/src/state/action-handlers/VisibilityHandler.ts
+++ b/packages/core/src/state/action-handlers/VisibilityHandler.ts
@@ -35,7 +35,7 @@ export class VisibilityHandler {
         while (hasChanges) {
             hasChanges = false;
 
-            for (let question of getAllQuestionsWithVisibilityRule(state.slides)) {
+            for (let question of getAllQuestionsWithVisibilityRule(state)) {
 
                 let result = false;
                 logger.log("[visibility handler] [{@engines}] for {question}: {@visibility}", Object.keys(engines), question.questionKey, question.visible, context);
diff --git a/packages/core/src/utils/quickformUtils.ts b/packages/core/src/utils/quickformUtils.ts
index 72c6ce5..45c25f2 100644
--- a/packages/core/src/utils/quickformUtils.ts
+++ b/packages/core/src/utils/quickformUtils.ts
@@ -14,11 +14,11 @@ export const isSlideVisited = (slide: SlideModel): boolean => (slide.questions.l
 
 export const getCurrentSlide = (state: QuickformState) => (state.slides[state.currIdx]);
 
-export const getAllQuestions = (slides: SlideModel[]): QuestionModel[] => (slides.map(slide => slide.questions).flat());
+export const getAllQuestions = (state: QuickformState): QuestionModel[] => (state.slides.map(slide => slide.questions).flat().concat(state.data.submit.submitFields));
 
 export const updateAllQuestions = (slides: SlideModel[], update: (q: QuestionModel) => QuestionModel) => slides.forEach(slide => { slide.questions = slide.questions.map(update); });
 
-export const getAllIntermediateQuestions = (slides: SlideModel[]): QuestionModel[] => getAllQuestions(slides).filter(q => q.intermediate);
+export const getAllIntermediateQuestions = (state: QuickformState): QuestionModel[] => getAllQuestions(state).filter(q => q.intermediate);
 
 type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] }
 
@@ -26,7 +26,7 @@ function hasVisibilityRule(question: QuestionModel): question is WithRequired<Qu
     return question.visible && question.visible?.engine && question.visible?.rule;
 }
 
-export const getAllQuestionsWithVisibilityRule = (slides: SlideModel[]) => getAllQuestions(slides).filter(hasVisibilityRule);
+export const getAllQuestionsWithVisibilityRule = (state: QuickformState) => getAllQuestions(state).filter(hasVisibilityRule);
 
 export const allQuestionsMap = (slides: SlideModel[]): { [key: string]: QuestionModel } => slides
     .map(s => s.questions)

From a2d59c8c55c313fc7c4d2343a1fffd3fd3d07658 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Mon, 21 Oct 2024 13:25:35 +0200
Subject: [PATCH 095/118] fix: issue with scroll width being 1 pixel larger on
 desktop.

---
 .../input-types/baseinput/BaseInputComponent.tsx         | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
index 1e5efd3..1653b12 100644
--- a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
+++ b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
@@ -92,13 +92,16 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
 
         if (!oldvalue || oldvalue === '')
             input.value = input.placeholder;
-
-        const isOverflowed = input.scrollWidth > input.clientWidth;
+       
+        const isOverflowed =  (input.scrollWidth - input.clientWidth) > 1;
         input.value = oldvalue;
         if (isOverflowed) {
             var style = window.getComputedStyle(input, null).getPropertyValue('font-size');
             input.style.fontSize = (parseFloat(style) - 1) + "px";
-            resize();
+            console.log("Resize: ", [input.scrollWidth, input.clientWidth, parseFloat(style)]);
+            if (parseFloat(style) - 1 > 0) {
+                resize();
+            }
         }
     }
 

From 5e4fd642c6a42e19fa36c57410f25c6a81ba8ee8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Mon, 21 Oct 2024 13:29:40 +0200
Subject: [PATCH 096/118] fix: (wip) - validation and issues with finding
 correct

---
 .../src/components/icons/ImArrowRightIcon.tsx |  2 +-
 .../defaults/DefaultQuestionTransformer.ts    |  2 +-
 packages/core/src/state/QuickformReducer.ts   | 14 ++++-
 .../action-handlers/QuestionActionHandler.ts  | 55 ++++++++++---------
 4 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/packages/core/src/components/icons/ImArrowRightIcon.tsx b/packages/core/src/components/icons/ImArrowRightIcon.tsx
index b8df16d..1717f1e 100644
--- a/packages/core/src/components/icons/ImArrowRightIcon.tsx
+++ b/packages/core/src/components/icons/ImArrowRightIcon.tsx
@@ -4,7 +4,7 @@ import { quickformtokens } from "../../style/quickFormTokensDefinition";
 
 export const ImArrowRightIcon: React.FC<IconProps> = ({ size = '20px', style }) => {
     return (
-        <svg style={{ fill: quickformtokens.onSurface, ... style }} width={size} stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <svg style={{ fill: quickformtokens.onSurface, ... style }} width={size} stroke="currentColor" fill="currentColor" strokeWidth="0" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
             <path d="M15.5 8l-7.5-7.5v4.5h-8v6h8v4.5z"></path>
         </svg>
         //<> 
diff --git a/packages/core/src/services/defaults/DefaultQuestionTransformer.ts b/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
index 5ecc431..159d870 100644
--- a/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
@@ -20,7 +20,7 @@ function mapJsonQuestionToModelQuestion(questionKey: string, question: QuestionJ
 
     return {
         answered: hasDefaultValueOrPayload,
-        isRequired: question.isRequired ?? true,
+        isRequired: question.isRequired ?? false,
         dataType: question.dataType ?? "string",
         inputProperties: parseInputProperties(question),
         inputType: question.inputType ?? "text",
diff --git a/packages/core/src/state/QuickformReducer.ts b/packages/core/src/state/QuickformReducer.ts
index 69d9ec0..f7a462d 100644
--- a/packages/core/src/state/QuickformReducer.ts
+++ b/packages/core/src/state/QuickformReducer.ts
@@ -105,12 +105,15 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
 
             if (!isValidating && updatedState.onValidationCompleteCallback) {
                 updatedState.onValidationCompleteCallback(updatedState);
+                updatedState.onValidationCompleteCallback = undefined;
             }
 
             return updatedState;
         }
         case 'ON_VALIDATION_COMPLETED': {
             let isValidating = getAllQuestions(state).some(q => q.validationResult?.isValidating ?? false);
+            logger.log("QuickForm Reducer {action} - {isValidating}: {logicalNames}", action.type, isValidating,
+                getAllQuestions(state).filter(q => q.validationResult?.isValidating ?? false).map(c => c.logicalName).join(','));
             if (isValidating) {
                 return { ...state, onValidationCompleteCallback: action.callback }
             }
@@ -135,7 +138,7 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
 
             if (typeof allIntermediateQuestions !== "undefined" && allIntermediateQuestions.length > 0) {
                 const timestamp = new Date().getTime();
-                for (var intermediateQuestion of allIntermediateQuestions) {
+                for (let intermediateQuestion of allIntermediateQuestions) {
                     state = QuestionActionHandler.updateQuestionProperties(state, intermediateQuestion.logicalName,
                         {
                             answered: true,
@@ -145,7 +148,14 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
                     );
 
                     tasks.push(QuestionActionHandler.validateInput(state, intermediateQuestion.logicalName).then(result => {
-                        action.dispatch({ type: 'SET_VALIDATION_RESULT', logicalName: intermediateQuestion.logicalName, validationResult: result, timestamp: timestamp });
+                        logger.log("QuickForm Reducer {action} - {logicalName}: {result}",
+                            action.type, intermediateQuestion.logicalName, result);
+
+                        action.dispatch({
+                            type: 'SET_VALIDATION_RESULT',
+                            logicalName: intermediateQuestion.logicalName,
+                            validationResult: result, timestamp: timestamp
+                        });
                         return result;
                     }));
                 }
diff --git a/packages/core/src/state/action-handlers/QuestionActionHandler.ts b/packages/core/src/state/action-handlers/QuestionActionHandler.ts
index 3c96f49..aa7805a 100644
--- a/packages/core/src/state/action-handlers/QuestionActionHandler.ts
+++ b/packages/core/src/state/action-handlers/QuestionActionHandler.ts
@@ -8,33 +8,38 @@ import { ValidationResult } from "../../model/ValidationResult";
 export class QuestionActionHandler {
     private static inputValidator = resolveQuickFormService("inputValidator");
 
-    static findSlideIdxAndQuestionIdx = (state: QuickformState, logicalName: string): { slideIndex: number; questionIndex: number } => {
-        if (state.isSubmitSlide)
-            return { slideIndex: -1, questionIndex: state.data.submit.submitFields.findIndex(x => x.logicalName === logicalName) };
-
-        for (let slideIndex = 0; slideIndex < state.slides.length; slideIndex++) {
-            const questionIndex: number = state.slides[slideIndex].questions.findIndex((q: QuestionModel) => q.logicalName === logicalName);
-            if (questionIndex !== -1) {
-                return { slideIndex, questionIndex };
-            }
-        }
-        return { slideIndex: -1, questionIndex: -1 };
-    };
+    //static findSlideIdxAndQuestionIdx = (state: QuickformState, logicalName: string): { slideIndex: number; questionIndex: number } => {
+    //    if (state.isSubmitSlide)
+    //        return { slideIndex: -1, questionIndex: state.data.submit.submitFields.findIndex(x => x.logicalName === logicalName) };
+
+    //    for (let slideIndex = 0; slideIndex < state.slides.length; slideIndex++) {
+    //        const questionIndex: number = state.slides[slideIndex].questions.findIndex((q: QuestionModel) => q.logicalName === logicalName);
+    //        if (questionIndex !== -1) {
+    //            return { slideIndex, questionIndex };
+    //        }
+    //    }
+    //    return { slideIndex: -1, questionIndex: -1 };
+    //};
 
     static updateQuestionProperties = (state: QuickformState, logicalName: string, propertiesToUpdate: any): QuickformState => {
-        const { slideIndex, questionIndex } = this.findSlideIdxAndQuestionIdx(state, logicalName);
 
+        //TODO - figure out if object need to be a new object / rerender ect - as the old implementation does
+        //not work when updateQuestionProperties is called after the state has been updated changing to submit page.
         
+        // const { slideIndex, questionIndex } = this.findSlideIdxAndQuestionIdx(state, logicalName);
 
-        const newState = { ...state };
-        const targetQuestion = state.isSubmitSlide ?
-            newState.data.submit.submitFields[questionIndex] :
-            newState.slides[slideIndex].questions[questionIndex];
+        
+
+       // const newState = { ...state };
+       // const targetQuestion = state.isSubmitSlide ?
+       //     newState.data.submit.submitFields[questionIndex] :
+       //     newState.slides[slideIndex].questions[questionIndex];
+        const targetQuestion = getAllQuestions(state).find(x => x.logicalName === logicalName);
 
         if (!targetQuestion) {
             const logger = resolveQuickFormService("logger");
-            logger.log("QuickForm Reducer - Question not found: {logicalName} {questionIndex} {isSubmitSlide}",
-                logicalName, questionIndex, state.isSubmitSlide);
+            logger.log("QuickForm Reducer - Question not found: {logicalName} {isSubmitSlide}",
+                logicalName, state.isSubmitSlide);
             return state;
         }
 
@@ -47,13 +52,13 @@ export class QuestionActionHandler {
             }
         });
 
-        if (state.isSubmitSlide) {
-            newState.data.submit.submitFields[questionIndex] = targetQuestion;
-        } else {
-            newState.slides[slideIndex].questions[questionIndex] = targetQuestion;
-        }
+        //if (state.isSubmitSlide) {
+        //    newState.data.submit.submitFields[questionIndex] = targetQuestion;
+        //} else {
+        //    newState.slides[slideIndex].questions[questionIndex] = targetQuestion;
+        //}
 
-        return newState;
+        return { ...state };
     };
 
     static answerQuestion = (state: QuickformState, { logicalName, output, intermediate, validationResult }: QuickformAnswerQuestionAction) => {

From 8353a5802f231e778d6871e0d8de0028653f291c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 24 Oct 2024 05:32:04 +0200
Subject: [PATCH 097/118] fix: fix for submit on react stricmode

---
 .../core/src/state/action-handlers/SubmitActionHandler.ts  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/state/action-handlers/SubmitActionHandler.ts b/packages/core/src/state/action-handlers/SubmitActionHandler.ts
index 926b6e5..ece8466 100644
--- a/packages/core/src/state/action-handlers/SubmitActionHandler.ts
+++ b/packages/core/src/state/action-handlers/SubmitActionHandler.ts
@@ -6,11 +6,16 @@ export type ServerActionSubmitHandler = (data: any) => Promise<Partial<QuickForm
 export class SubmitActionHandler {
     static submit =  (state: QuickformState, dispatch: React.Dispatch<QuickformAction>, onSubmitAsync?: ServerActionSubmitHandler) => {
 
-
+        let alreadySubmitted = false;
         dispatch({ type: "PROCESS_INTERMEDIATE_QUESTIONS", dispatch, logicalName: undefined });
         dispatch({
             type: "ON_VALIDATION_COMPLETED",  callback: async (state) => {
                 try {
+                    /** React Strict Mode support, for react calling reducers twice to ensure pure function*/
+                    if (alreadySubmitted)
+                        return;
+
+                    alreadySubmitted = true;
 
 
                     const body = this.generatePayload(state);

From 8c3dde52c970a073c9da95d882d3f9126beb333f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 24 Oct 2024 06:21:35 +0200
Subject: [PATCH 098/118] fix: the default visited should be false to avoid
 compute progress skipping slides, aswell as on each slide navigation we will
 mark all questions as visited. And intermediate answers hould also be visited
 always.

---
 .../defaults/DefaultQuestionTransformer.ts       |  2 +-
 packages/core/src/state/QuickformReducer.ts      |  2 +-
 .../action-handlers/NavigationActionHandler.ts   | 16 ++++++++++++----
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/services/defaults/DefaultQuestionTransformer.ts b/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
index 159d870..0803a65 100644
--- a/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
@@ -31,7 +31,7 @@ function mapJsonQuestionToModelQuestion(questionKey: string, question: QuestionJ
         placeholder: question.placeholder ?? '',
         questionKey: questionKey,
         text: question.text,
-        visited: hasDefaultValueOrPayload,
+        visited: false,
         visible: question.visible ? {
             isVisible: question.visible.isVisible ?? false,
             ...question.visible
diff --git a/packages/core/src/state/QuickformReducer.ts b/packages/core/src/state/QuickformReducer.ts
index f7a462d..ca93cfc 100644
--- a/packages/core/src/state/QuickformReducer.ts
+++ b/packages/core/src/state/QuickformReducer.ts
@@ -130,7 +130,6 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
 
             let tasks: Array<PromiseLike<ValidationResult>> = [];
             let allIntermediateQuestions = getAllIntermediateQuestions(state);
-
             // Dont include the question currently being answered
             if (action.logicalName) {
                 allIntermediateQuestions = allIntermediateQuestions.filter(q => q.logicalName !== action.logicalName);
@@ -142,6 +141,7 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
                     state = QuestionActionHandler.updateQuestionProperties(state, intermediateQuestion.logicalName,
                         {
                             answered: true,
+                            visited:true,
                             intermediate: false,
                             validationResult: { ...intermediateQuestion.validationResult, timestamp: timestamp, isValidating: true, isValid: false }
                         }
diff --git a/packages/core/src/state/action-handlers/NavigationActionHandler.ts b/packages/core/src/state/action-handlers/NavigationActionHandler.ts
index eee4d1e..cac111b 100644
--- a/packages/core/src/state/action-handlers/NavigationActionHandler.ts
+++ b/packages/core/src/state/action-handlers/NavigationActionHandler.ts
@@ -1,4 +1,4 @@
-import { getCurrentSlide, isSlideAnswered } from "../../utils/quickformUtils";
+import { getCurrentSlide, isSlideAnswered, isSlideVisited } from "../../utils/quickformUtils";
 import { QuickformState } from "../../state/QuickformState";
 import { resolveQuickFormService } from "../../services";
 import { QuestionModel } from "../../model";
@@ -8,7 +8,12 @@ export class NavigationActionHandler {
         const logger = resolveQuickFormService("logger");
         const currIdx = state.currIdx;
         const slides = state.slides;
-        logger.log("handle slide change: {currentIdx}", currIdx);
+        logger.log("QuickForm Reducer - handle slide change: {currentIdx}", currIdx, state.slides);
+
+        // Mark all questions as visited on the current slide when moving next;
+        for (let q of state.slides[currIdx].questions) {
+            q.visited = true;
+        }
 
         let newIdx = currIdx;
         while (newIdx < slides.length && newIdx >= 0 && (newIdx === currIdx || !state.slides[newIdx].questions.some(x => x.visible?.isVisible ?? true))) {
@@ -24,6 +29,8 @@ export class NavigationActionHandler {
             }
         }
 
+        logger.log("QuickForm Reducer - handle slide change: {newIdx}", newIdx, state.slides);
+
         return {
             ...state,
             currIdx: newIdx,
@@ -34,7 +41,8 @@ export class NavigationActionHandler {
     }
 
     static computeProgress = (state: QuickformState) => {
-        const slidesAnsweredCount = state.slides.reduce((sum, slide) => sum + (isSlideAnswered(slide) ? 1 : 0), 0);
+        console.log("computeProgress", state.slides);
+        const slidesAnsweredCount = state.slides.reduce((sum, slide) => sum + (isSlideAnswered(slide) && isSlideVisited(slide) ? 1 : 0), 0);
         const progress = (slidesAnsweredCount / state.totalSteps) * 100;
         return {
             ...state,
@@ -54,7 +62,7 @@ export class NavigationActionHandler {
 
         // Check all visible questions for answered and validity
         const validationResult = this.validateQuestions(visibleQuestions, state);
-        console.log("reducer validationResult", validationResult)
+        console.log("reducer validationResult", validationResult);
         if (validationResult.isValid) {
             return this.computeProgress(NavigationActionHandler.handleSlideChange({ ...state, errorMsg: "" }, 'next'));
         } else {

From 94b32d12121b113cc8be6ffad2a6fcfcae925319 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 24 Oct 2024 07:43:15 +0200
Subject: [PATCH 099/118] feat: validation handling on submit

---
 .../core/src/components/submit/Submit.tsx     |  4 +-
 packages/core/src/state/QuickformAction.ts    |  2 +-
 packages/core/src/state/QuickformReducer.ts   | 43 +++++++++++++++++--
 .../action-handlers/SubmitActionHandler.ts    |  5 ++-
 4 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index 733951f..070f96c 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -7,6 +7,7 @@ import { Heading, Paragraph, Button, Spinner, Question } from "../index";
 import { SubmitActionHandler } from "../../state/action-handlers/SubmitActionHandler";
 import { useHandleEnterKeypress } from "../../hooks";
 import { makeStyles, mergeClasses } from "@griffel/react";
+import { getAllQuestions } from "../../utils/quickformUtils";
 
 type SubmitProps = {
     model: SubmitModel;
@@ -32,7 +33,7 @@ export const Submit: React.FC<SubmitProps> = ({ model, className }) => {
   
 
     const handleSubmit = async () => {
-        dispatch({ type: "SET_SUBMIT_STATUS", status: { ...state.submitStatus, isSubmitting: true } });
+       // dispatch({ type: "SET_SUBMIT_STATUS", status: { ...state.submitStatus, isSubmitting: true } });
 
         try {
             await SubmitActionHandler.submit(state, dispatch, onSubmitAsync);
@@ -79,6 +80,7 @@ export const Submit: React.FC<SubmitProps> = ({ model, className }) => {
             </div>
 
             <Button
+                disabled={getAllQuestions(state).some(q => (q.validationResult?.isValidating ?? false) || (!(q.validationResult?.isValid ?? false) && (q.validationResult?.timestamp??0) !== 0))}
                 className={state.classes.slideButtonContainer}
                 buttonClassName={ state.classes.slideButton}
                 showPressEnter={typeof state.showPressEnter !== "undefined" && state.showPressEnter !== false}
diff --git a/packages/core/src/state/QuickformAction.ts b/packages/core/src/state/QuickformAction.ts
index 3ab78c5..cea5a6c 100644
--- a/packages/core/src/state/QuickformAction.ts
+++ b/packages/core/src/state/QuickformAction.ts
@@ -15,7 +15,7 @@ export type QuickformAction =
         dispatch: React.Dispatch<QuickformAction>;
         logicalName?: string        
     }
-    | { type: 'ON_VALIDATION_COMPLETED', callback: (state: QuickformState) => void }
+    | { type: 'ON_VALIDATION_COMPLETED', dispatch: React.Dispatch<QuickformAction>, callback: (state: QuickformState) => void }
     | QuickformAnswerQuestionAction
     | { type: 'SET_VALIDATION_RESULT'; logicalName: string; validationResult: ValidationResult; timestamp: number }
     | { type: 'COMPUTE_PROGRESS' }
diff --git a/packages/core/src/state/QuickformReducer.ts b/packages/core/src/state/QuickformReducer.ts
index ca93cfc..91acf94 100644
--- a/packages/core/src/state/QuickformReducer.ts
+++ b/packages/core/src/state/QuickformReducer.ts
@@ -102,22 +102,57 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
             let updatedState= QuestionActionHandler.updateQuestionValidation(state, action.logicalName, action.validationResult, action.timestamp)
 
             let isValidating = getAllQuestions(updatedState).some(q => q.validationResult?.isValidating ?? false);
+            let isAllValid = getAllQuestions(updatedState).every(q => q.validationResult?.isValid ?? false);
 
-            if (!isValidating && updatedState.onValidationCompleteCallback) {
+            if (!isValidating && updatedState.onValidationCompleteCallback && isAllValid) {
                 updatedState.onValidationCompleteCallback(updatedState);
                 updatedState.onValidationCompleteCallback = undefined;
             }
-
+            updatedState.submitStatus = { ...updatedState.submitStatus, isSubmitting: false };
             return updatedState;
         }
         case 'ON_VALIDATION_COMPLETED': {
-            let isValidating = getAllQuestions(state).some(q => q.validationResult?.isValidating ?? false);
+            let allQuestions = getAllQuestions(state);
+            let isValidating = allQuestions.some(q => q.validationResult?.isValidating ?? false);
             logger.log("QuickForm Reducer {action} - {isValidating}: {logicalNames}", action.type, isValidating,
                 getAllQuestions(state).filter(q => q.validationResult?.isValidating ?? false).map(c => c.logicalName).join(','));
             if (isValidating) {
                 return { ...state, onValidationCompleteCallback: action.callback }
             }
-            action.callback(state);
+
+            let tasks: Array<PromiseLike<ValidationResult>> = [];
+            const timestamp = new Date().getTime();
+            for (let q of allQuestions) {
+                logger.log("QuickForm Reducer {action} - {logicalName}: {validationResult} {output} {validatedOutput}",
+                    action.type, q.logicalName, q.validationResult, q.output, q.validationResult?.validatedOutput);
+
+
+                if (!q.validationResult || q.validationResult.timestamp === 0 || !q.validationResult.isValid) {
+
+                    state = QuestionActionHandler.updateQuestionProperties(state, q.logicalName,
+                        {   
+                            validationResult: { ...q.validationResult, timestamp: timestamp, isValidating: true, isValid: false }
+                        }
+                    );
+
+                    tasks.push(QuestionActionHandler.validateInput(state, q.logicalName).then(result => {
+                        logger.log("QuickForm Reducer {action} - {logicalName}: {result}",
+                            action.type, q.logicalName, result);
+
+                        action.dispatch({
+                            type: 'SET_VALIDATION_RESULT',
+                            logicalName: q.logicalName,
+                            validationResult: result, timestamp: timestamp
+                        });
+                        return result;
+                    }));
+                } 
+
+            }
+
+            if (tasks.length === 0) 
+                action.callback(state);
+
             return state;
         }
         case 'PROCESS_INTERMEDIATE_QUESTIONS': {
diff --git a/packages/core/src/state/action-handlers/SubmitActionHandler.ts b/packages/core/src/state/action-handlers/SubmitActionHandler.ts
index ece8466..ba3cbba 100644
--- a/packages/core/src/state/action-handlers/SubmitActionHandler.ts
+++ b/packages/core/src/state/action-handlers/SubmitActionHandler.ts
@@ -7,16 +7,17 @@ export class SubmitActionHandler {
     static submit =  (state: QuickformState, dispatch: React.Dispatch<QuickformAction>, onSubmitAsync?: ServerActionSubmitHandler) => {
 
         let alreadySubmitted = false;
+        dispatch({ type: "SET_SUBMIT_STATUS", status: { ...state.submitStatus, isSubmitting: true } });
         dispatch({ type: "PROCESS_INTERMEDIATE_QUESTIONS", dispatch, logicalName: undefined });
         dispatch({
-            type: "ON_VALIDATION_COMPLETED",  callback: async (state) => {
+            type: "ON_VALIDATION_COMPLETED", dispatch, callback: async (state) => {
                 try {
                     /** React Strict Mode support, for react calling reducers twice to ensure pure function*/
                     if (alreadySubmitted)
                         return;
 
                     alreadySubmitted = true;
-
+                     
 
                     const body = this.generatePayload(state);
 

From 90f36f8b5d08aa5655320a555129e613746695cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 24 Oct 2024 07:48:30 +0200
Subject: [PATCH 100/118] fix: removed ul as it caused bad padding

---
 packages/core/src/components/submit/Submit.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index 070f96c..72d85c7 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -70,13 +70,13 @@ export const Submit: React.FC<SubmitProps> = ({ model, className }) => {
             {/*}*/}
 
             <div style={{ marginTop: '10px' }}>
-                <ul>
+                
                     {submitFields.map((sf, idx) => {
                         return (
                             <Question key={sf.logicalName + idx} model={sf} />
                         )
                     })}
-                </ul>
+                 
             </div>
 
             <Button

From 9ee1c1cd245ab6b581078cf3ede7b64f97ccac1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 17:14:16 +0100
Subject: [PATCH 101/118] fix: hardcoded the vars - css extraction not working
 when imported in consumer project atm and need to investigate - this is
 considered a temp fix

---
 .../src/style/quickFormTokensDefinition.ts    | 74 ++++++++++++++++++-
 1 file changed, 73 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/style/quickFormTokensDefinition.ts b/packages/core/src/style/quickFormTokensDefinition.ts
index 004daa5..1fe62f9 100644
--- a/packages/core/src/style/quickFormTokensDefinition.ts
+++ b/packages/core/src/style/quickFormTokensDefinition.ts
@@ -107,5 +107,77 @@ export const defineQuickFormTokens = (...tokens: Array<Partial<QuickFormTokens>>
  * Provides QuickForm with css tokens to be passed around in the components so they refer to the same css variables that are loaded into the QuickFormProvider upon application instantiation.
  * @returns A flat object with CSS variables in camelCase that have corresponding values provided as kebab-case tokens variable names that map to globally defined colors.
  * See example: quickformtokens = { onPrimary: "var(--on-primary)"; onSecondary: "var(--on-secondary)" } and so on. You get the idea.
+ * export const quickformtokens = camelToKebabCase(defaultQuickFormTokens); 
  */
-export const quickformtokens = camelToKebabCase(defaultQuickFormTokens);
\ No newline at end of file
+export const quickformtokens = {
+    "white": "var(--white)",
+    "black": "var(--black)",
+    "warning": "var(--warning)",
+    "success": "var(--success)",
+    "info": "var(--info)",
+    "primary": "var(--primary)",
+    "primaryLighter": "var(--primary-lighter)",
+    "secondary": "var(--secondary)",
+    "background": "var(--background)",
+    "onBackground": "var(--on-background)",
+    "onBackgroundDarker100": "var(--on-background-darker100)",
+    "onBackgroundDarker200": "var(--on-background-darker200)",
+    "onBackgroundDarker300": "var(--on-background-darker300)",
+    "onBackgroundDarker400": "var(--on-background-darker400)",
+    "onBackgroundDarker500": "var(--on-background-darker500)",
+    "onBackgroundDarker600": "var(--on-background-darker600)",
+    "onBackgroundDarker700": "var(--on-background-darker700)",
+    "onBackgroundDarker800": "var(--on-background-darker800)",
+    "onBackgroundDarker900": "var(--on-background-darker900)",
+    "onBackgroundLighter": "var(--on-background-lighter)",
+    "surface": "var(--surface)",
+    "onSurface": "var(--on-surface)",
+    "error": "var(--error)",
+    "onError": "var(--on-error)",
+    "onErrorDarker100": "var(--on-error-darker100)",
+    "onErrorDarker200": "var(--on-error-darker200)",
+    "onErrorDarker300": "var(--on-error-darker300)",
+    "onErrorDarker400": "var(--on-error-darker400)",
+    "onErrorDarker500": "var(--on-error-darker500)",
+    "onErrorDarker600": "var(--on-error-darker600)",
+    "onErrorDarker700": "var(--on-error-darker700)",
+    "onErrorDarker800": "var(--on-error-darker800)",
+    "onErrorDarker900": "var(--on-error-darker900)",
+    "onPrimary": "var(--on-primary)",
+    "onSecondary": "var(--on-secondary)",
+    "fontFamily": "var(--font-family)",
+    "headlineFontSize": "var(--headline-font-size)",
+    "subtitleFontSize": "var(--subtitle-font-size)",
+    "paragraphFontSize": "var(--paragraph-font-size)",
+    "paragraphMobileFontSize": "var(--paragraph-mobile-font-size)",
+    "btnFontSize": "var(--btn-font-size)",
+    "btnFontWeight": "var(--btn-font-weight)",
+    "btnEnterKeyTextFontSize": "var(--btn-enter-key-text-font-size)",
+    "multilineTextFontSize": "var(--multiline-text-font-size)",
+    "multilineTextMobileFontSize": "var(--multiline-text-mobile-font-size)",
+    "questionHeadlineFontSize": "var(--question-headline-font-size)",
+    "questionParagraphFontSize": "var(--question-paragraph-font-size)",
+    "questionNumberFontSize": "var(--question-number-font-size)",
+    "questionInputFontSize": "var(--question-input-font-size)",
+    "questionInputGap": "var(--question-input-gap)",
+    "questionPlaceholderColor": "var(--question-placeholder-color)",
+    "questionHeadlineFontWeight": "var(--question-headline-font-weight)",
+    "questionBottomMargin": "var(--question-bottom-margin)",
+    "questionTopMargin": "var(--question-top-margin)",
+    "questionBorderRadius": "var(--question-border-radius)",
+    "questionPadding": "var(--question-padding)",
+    "questionPaddingBottom": "var(--question-padding-bottom)",
+    "gap1": "var(--gap1)",
+    "gap2": "var(--gap2)",
+    "gap4": "var(--gap4)",
+    "disabledOpacity": "var(--disabled-opacity)",
+    "dividerOpacity": "var(--divider-opacity)",
+    "lowEmphasisOpacity": "var(--low-emphasis-opacity)",
+    "mediumEmphasisOpacity": "var(--medium-emphasis-opacity)",
+    "highEmphasisOpacity": "var(--high-emphasis-opacity)",
+    "slideButtonIconSize": "var(--slide-button-icon-size)",
+    "headlineColor": "var(--headline-color,var(--primary))",
+    "subtitleColor": "var(--subtitle-color,inherit)",
+    "strongWeight": "var(--strong-weight,900)",
+    "slideButtonBorderRadius": "var(--slide-button-border-radius,100px)"
+}
\ No newline at end of file

From 760b771d3552ae3e2f23c9984a3e94032d800d11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 17:34:05 +0100
Subject: [PATCH 102/118] fix: type was bad

---
 .../core/src/style/quickFormTokensDefinition.ts   | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/style/quickFormTokensDefinition.ts b/packages/core/src/style/quickFormTokensDefinition.ts
index 1fe62f9..066daa3 100644
--- a/packages/core/src/style/quickFormTokensDefinition.ts
+++ b/packages/core/src/style/quickFormTokensDefinition.ts
@@ -107,9 +107,14 @@ export const defineQuickFormTokens = (...tokens: Array<Partial<QuickFormTokens>>
  * Provides QuickForm with css tokens to be passed around in the components so they refer to the same css variables that are loaded into the QuickFormProvider upon application instantiation.
  * @returns A flat object with CSS variables in camelCase that have corresponding values provided as kebab-case tokens variable names that map to globally defined colors.
  * See example: quickformtokens = { onPrimary: "var(--on-primary)"; onSecondary: "var(--on-secondary)" } and so on. You get the idea.
- * export const quickformtokens = camelToKebabCase(defaultQuickFormTokens); 
+ * 
  */
-export const quickformtokens = {
+
+//export const quickformtokens1 = camelToKebabCase(defaultQuickFormTokens);
+export type QuickFormTokenVars = {
+    [key in keyof QuickFormTokens]: string
+}
+export const quickformtokens: QuickFormTokenVars  = {
     "white": "var(--white)",
     "black": "var(--black)",
     "warning": "var(--warning)",
@@ -175,9 +180,5 @@ export const quickformtokens = {
     "lowEmphasisOpacity": "var(--low-emphasis-opacity)",
     "mediumEmphasisOpacity": "var(--medium-emphasis-opacity)",
     "highEmphasisOpacity": "var(--high-emphasis-opacity)",
-    "slideButtonIconSize": "var(--slide-button-icon-size)",
-    "headlineColor": "var(--headline-color,var(--primary))",
-    "subtitleColor": "var(--subtitle-color,inherit)",
-    "strongWeight": "var(--strong-weight,900)",
-    "slideButtonBorderRadius": "var(--slide-button-border-radius,100px)"
+    "slideButtonIconSize": "var(--slide-button-icon-size)" 
 }
\ No newline at end of file

From 8b237469198a8c5bb9ebb949e0cdda895487ec17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 18:02:24 +0100
Subject: [PATCH 103/118] fix: trying to put tokens in clean file

---
 packages/core/src/style/index.ts              |  3 +-
 .../src/style/quickFormTokensDefinition.ts    | 71 ------------------
 packages/core/src/style/tokens.ts             | 75 +++++++++++++++++++
 3 files changed, 77 insertions(+), 72 deletions(-)
 create mode 100644 packages/core/src/style/tokens.ts

diff --git a/packages/core/src/style/index.ts b/packages/core/src/style/index.ts
index c173243..0ff08df 100644
--- a/packages/core/src/style/index.ts
+++ b/packages/core/src/style/index.ts
@@ -1,2 +1,3 @@
 export * from "./quickFormTokensDefinition";
-export * from "./modernQuickFormTokens";
\ No newline at end of file
+export * from "./modernQuickFormTokens";
+export * from "./tokens";
\ No newline at end of file
diff --git a/packages/core/src/style/quickFormTokensDefinition.ts b/packages/core/src/style/quickFormTokensDefinition.ts
index 066daa3..1b1ee5f 100644
--- a/packages/core/src/style/quickFormTokensDefinition.ts
+++ b/packages/core/src/style/quickFormTokensDefinition.ts
@@ -111,74 +111,3 @@ export const defineQuickFormTokens = (...tokens: Array<Partial<QuickFormTokens>>
  */
 
 //export const quickformtokens1 = camelToKebabCase(defaultQuickFormTokens);
-export type QuickFormTokenVars = {
-    [key in keyof QuickFormTokens]: string
-}
-export const quickformtokens: QuickFormTokenVars  = {
-    "white": "var(--white)",
-    "black": "var(--black)",
-    "warning": "var(--warning)",
-    "success": "var(--success)",
-    "info": "var(--info)",
-    "primary": "var(--primary)",
-    "primaryLighter": "var(--primary-lighter)",
-    "secondary": "var(--secondary)",
-    "background": "var(--background)",
-    "onBackground": "var(--on-background)",
-    "onBackgroundDarker100": "var(--on-background-darker100)",
-    "onBackgroundDarker200": "var(--on-background-darker200)",
-    "onBackgroundDarker300": "var(--on-background-darker300)",
-    "onBackgroundDarker400": "var(--on-background-darker400)",
-    "onBackgroundDarker500": "var(--on-background-darker500)",
-    "onBackgroundDarker600": "var(--on-background-darker600)",
-    "onBackgroundDarker700": "var(--on-background-darker700)",
-    "onBackgroundDarker800": "var(--on-background-darker800)",
-    "onBackgroundDarker900": "var(--on-background-darker900)",
-    "onBackgroundLighter": "var(--on-background-lighter)",
-    "surface": "var(--surface)",
-    "onSurface": "var(--on-surface)",
-    "error": "var(--error)",
-    "onError": "var(--on-error)",
-    "onErrorDarker100": "var(--on-error-darker100)",
-    "onErrorDarker200": "var(--on-error-darker200)",
-    "onErrorDarker300": "var(--on-error-darker300)",
-    "onErrorDarker400": "var(--on-error-darker400)",
-    "onErrorDarker500": "var(--on-error-darker500)",
-    "onErrorDarker600": "var(--on-error-darker600)",
-    "onErrorDarker700": "var(--on-error-darker700)",
-    "onErrorDarker800": "var(--on-error-darker800)",
-    "onErrorDarker900": "var(--on-error-darker900)",
-    "onPrimary": "var(--on-primary)",
-    "onSecondary": "var(--on-secondary)",
-    "fontFamily": "var(--font-family)",
-    "headlineFontSize": "var(--headline-font-size)",
-    "subtitleFontSize": "var(--subtitle-font-size)",
-    "paragraphFontSize": "var(--paragraph-font-size)",
-    "paragraphMobileFontSize": "var(--paragraph-mobile-font-size)",
-    "btnFontSize": "var(--btn-font-size)",
-    "btnFontWeight": "var(--btn-font-weight)",
-    "btnEnterKeyTextFontSize": "var(--btn-enter-key-text-font-size)",
-    "multilineTextFontSize": "var(--multiline-text-font-size)",
-    "multilineTextMobileFontSize": "var(--multiline-text-mobile-font-size)",
-    "questionHeadlineFontSize": "var(--question-headline-font-size)",
-    "questionParagraphFontSize": "var(--question-paragraph-font-size)",
-    "questionNumberFontSize": "var(--question-number-font-size)",
-    "questionInputFontSize": "var(--question-input-font-size)",
-    "questionInputGap": "var(--question-input-gap)",
-    "questionPlaceholderColor": "var(--question-placeholder-color)",
-    "questionHeadlineFontWeight": "var(--question-headline-font-weight)",
-    "questionBottomMargin": "var(--question-bottom-margin)",
-    "questionTopMargin": "var(--question-top-margin)",
-    "questionBorderRadius": "var(--question-border-radius)",
-    "questionPadding": "var(--question-padding)",
-    "questionPaddingBottom": "var(--question-padding-bottom)",
-    "gap1": "var(--gap1)",
-    "gap2": "var(--gap2)",
-    "gap4": "var(--gap4)",
-    "disabledOpacity": "var(--disabled-opacity)",
-    "dividerOpacity": "var(--divider-opacity)",
-    "lowEmphasisOpacity": "var(--low-emphasis-opacity)",
-    "mediumEmphasisOpacity": "var(--medium-emphasis-opacity)",
-    "highEmphasisOpacity": "var(--high-emphasis-opacity)",
-    "slideButtonIconSize": "var(--slide-button-icon-size)" 
-}
\ No newline at end of file
diff --git a/packages/core/src/style/tokens.ts b/packages/core/src/style/tokens.ts
new file mode 100644
index 0000000..644cfba
--- /dev/null
+++ b/packages/core/src/style/tokens.ts
@@ -0,0 +1,75 @@
+import type { QuickFormTokens } from "./quickFormTokensDefinition"
+
+export type QuickFormTokenVars = {
+    [key in keyof QuickFormTokens]: string
+}
+export const quickformtokens: QuickFormTokenVars = {
+    "white": "var(--white)",
+    "black": "var(--black)",
+    "warning": "var(--warning)",
+    "success": "var(--success)",
+    "info": "var(--info)",
+    "primary": "var(--primary)",
+    "primaryLighter": "var(--primary-lighter)",
+    "secondary": "var(--secondary)",
+    "background": "var(--background)",
+    "onBackground": "var(--on-background)",
+    "onBackgroundDarker100": "var(--on-background-darker100)",
+    "onBackgroundDarker200": "var(--on-background-darker200)",
+    "onBackgroundDarker300": "var(--on-background-darker300)",
+    "onBackgroundDarker400": "var(--on-background-darker400)",
+    "onBackgroundDarker500": "var(--on-background-darker500)",
+    "onBackgroundDarker600": "var(--on-background-darker600)",
+    "onBackgroundDarker700": "var(--on-background-darker700)",
+    "onBackgroundDarker800": "var(--on-background-darker800)",
+    "onBackgroundDarker900": "var(--on-background-darker900)",
+    "onBackgroundLighter": "var(--on-background-lighter)",
+    "surface": "var(--surface)",
+    "onSurface": "var(--on-surface)",
+    "error": "var(--error)",
+    "onError": "var(--on-error)",
+    "onErrorDarker100": "var(--on-error-darker100)",
+    "onErrorDarker200": "var(--on-error-darker200)",
+    "onErrorDarker300": "var(--on-error-darker300)",
+    "onErrorDarker400": "var(--on-error-darker400)",
+    "onErrorDarker500": "var(--on-error-darker500)",
+    "onErrorDarker600": "var(--on-error-darker600)",
+    "onErrorDarker700": "var(--on-error-darker700)",
+    "onErrorDarker800": "var(--on-error-darker800)",
+    "onErrorDarker900": "var(--on-error-darker900)",
+    "onPrimary": "var(--on-primary)",
+    "onSecondary": "var(--on-secondary)",
+    "fontFamily": "var(--font-family)",
+    "headlineFontSize": "var(--headline-font-size)",
+    "subtitleFontSize": "var(--subtitle-font-size)",
+    "paragraphFontSize": "var(--paragraph-font-size)",
+    "paragraphMobileFontSize": "var(--paragraph-mobile-font-size)",
+    "btnFontSize": "var(--btn-font-size)",
+    "btnFontWeight": "var(--btn-font-weight)",
+    "btnEnterKeyTextFontSize": "var(--btn-enter-key-text-font-size)",
+    "multilineTextFontSize": "var(--multiline-text-font-size)",
+    "multilineTextMobileFontSize": "var(--multiline-text-mobile-font-size)",
+    "questionHeadlineFontSize": "var(--question-headline-font-size)",
+    "questionParagraphFontSize": "var(--question-paragraph-font-size)",
+    "questionNumberFontSize": "var(--question-number-font-size)",
+    "questionInputFontSize": "var(--question-input-font-size)",
+    "questionInputGap": "var(--question-input-gap)",
+    "questionPlaceholderColor": "var(--question-placeholder-color)",
+    "questionHeadlineFontWeight": "var(--question-headline-font-weight)",
+    "questionBottomMargin": "var(--question-bottom-margin)",
+    "questionTopMargin": "var(--question-top-margin)",
+    "questionBorderRadius": "var(--question-border-radius)",
+    "questionPadding": "var(--question-padding)",
+    "questionPaddingBottom": "var(--question-padding-bottom)",
+    "gap1": "var(--gap1)",
+    "gap2": "var(--gap2)",
+    "gap4": "var(--gap4)",
+    "disabledOpacity": "var(--disabled-opacity)",
+    "dividerOpacity": "var(--divider-opacity)",
+    "lowEmphasisOpacity": "var(--low-emphasis-opacity)",
+    "mediumEmphasisOpacity": "var(--medium-emphasis-opacity)",
+    "highEmphasisOpacity": "var(--high-emphasis-opacity)",
+    "slideButtonIconSize": "var(--slide-button-icon-size)"
+}
+
+export default quickformtokens;
\ No newline at end of file

From 307227bbf23381b018953cc7770e61c62a266a1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 18:27:37 +0100
Subject: [PATCH 104/118] fix: reverted back to tokens, was not the issue

---
 packages/core/src/style/index.ts                     | 3 +--
 packages/core/src/style/quickFormTokensDefinition.ts | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/style/index.ts b/packages/core/src/style/index.ts
index 0ff08df..c173243 100644
--- a/packages/core/src/style/index.ts
+++ b/packages/core/src/style/index.ts
@@ -1,3 +1,2 @@
 export * from "./quickFormTokensDefinition";
-export * from "./modernQuickFormTokens";
-export * from "./tokens";
\ No newline at end of file
+export * from "./modernQuickFormTokens";
\ No newline at end of file
diff --git a/packages/core/src/style/quickFormTokensDefinition.ts b/packages/core/src/style/quickFormTokensDefinition.ts
index 1b1ee5f..c2b9a96 100644
--- a/packages/core/src/style/quickFormTokensDefinition.ts
+++ b/packages/core/src/style/quickFormTokensDefinition.ts
@@ -110,4 +110,4 @@ export const defineQuickFormTokens = (...tokens: Array<Partial<QuickFormTokens>>
  * 
  */
 
-//export const quickformtokens1 = camelToKebabCase(defaultQuickFormTokens);
+export const quickformtokens = camelToKebabCase(defaultQuickFormTokens);

From 529503cf19edcd3188edd3bcb126e6d6a5955ea4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 19:09:32 +0100
Subject: [PATCH 105/118] fix: lets try a build typescript so consumers can use
 js

---
 .github/workflows/release.yml                 |    8 +
 .gitignore                                    |    1 +
 package-lock.json                             | 2564 ++++++++++++++++-
 package.json                                  |   10 +-
 packages/core/package.json                    |   16 +-
 .../core/src/style/modernQuickFormTokens.ts   |    2 +-
 packages/core/tsup.config.ts                  |   10 +
 7 files changed, 2451 insertions(+), 160 deletions(-)
 create mode 100644 packages/core/tsup.config.ts

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index de8ed15..b55f5e2 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -31,6 +31,14 @@ jobs:
     - name: NPM Install
       run: npm ci --force
 
+    - name: Build
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        GIT_AUTHOR_NAME: pksorensen
+        GIT_AUTHOR_EMAIL: poul@kjeldager.com
+      run: npm run build
+
     - name: Release
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
index f0c599d..cafee3d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 /.vs
+/packages/core/dist
diff --git a/package-lock.json b/package-lock.json
index 456b5ec..f385eda 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "npm-run-all": "^4.1.5",
         "semantic-release": "19.0.5",
         "semantic-release-monorepo": "7.0.5",
+        "tsup": "8.3.5",
         "typescript": "5.4.2"
       },
       "workspaces": {
@@ -2213,6 +2214,414 @@
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
       "peer": true
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
+      "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz",
+      "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz",
+      "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz",
+      "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz",
+      "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz",
+      "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz",
+      "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz",
+      "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz",
+      "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz",
+      "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz",
+      "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz",
+      "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz",
+      "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz",
+      "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz",
+      "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz",
+      "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz",
+      "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
+      "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz",
+      "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz",
+      "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz",
+      "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz",
+      "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz",
+      "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
+      "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
@@ -4477,6 +4886,109 @@
         "react": "*"
       }
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -4947,6 +5459,17 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@pnpm/config.env-replace": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz",
@@ -5086,60 +5609,312 @@
         "react": "^16.14.0 || >=17"
       }
     },
-    "node_modules/@rjsf/fluentui-rc": {
-      "version": "5.18.4",
-      "resolved": "https://registry.npmjs.org/@rjsf/fluentui-rc/-/fluentui-rc-5.18.4.tgz",
-      "integrity": "sha512-lkRaVrh2Hm6AtzSxMAUeP5lOBPKGhAEAzUpQoGSdY6Y2QXaGYku69Dfp0zm2zfAcO5kWdLCTSNcHQONuxJnVHQ==",
-      "peer": true,
-      "dependencies": {
-        "@fluentui/react-components": "^9.46.3",
-        "@fluentui/react-icons": "^2.0.226",
-        "@fluentui/react-migration-v0-v9": "^9.1.14"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "@rjsf/utils": "^5.18.x",
-        "react": "^16.14.0 || >=17"
-      }
+    "node_modules/@rjsf/fluentui-rc": {
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/@rjsf/fluentui-rc/-/fluentui-rc-5.18.4.tgz",
+      "integrity": "sha512-lkRaVrh2Hm6AtzSxMAUeP5lOBPKGhAEAzUpQoGSdY6Y2QXaGYku69Dfp0zm2zfAcO5kWdLCTSNcHQONuxJnVHQ==",
+      "peer": true,
+      "dependencies": {
+        "@fluentui/react-components": "^9.46.3",
+        "@fluentui/react-icons": "^2.0.226",
+        "@fluentui/react-migration-v0-v9": "^9.1.14"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@rjsf/utils": "^5.18.x",
+        "react": "^16.14.0 || >=17"
+      }
+    },
+    "node_modules/@rjsf/utils": {
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.18.4.tgz",
+      "integrity": "sha512-svLMk5aW6q3JQRYVTJradFc9tLeQ1vX5/k6fPwxf+08eweqPbINq7aokLBSStUNr8FfYgThTl8IfehLoVP2dvw==",
+      "peer": true,
+      "dependencies": {
+        "json-schema-merge-allof": "^0.8.1",
+        "jsonpointer": "^5.0.1",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0 || >=17"
+      }
+    },
+    "node_modules/@rjsf/validator-ajv8": {
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.18.4.tgz",
+      "integrity": "sha512-D0bUtruWbUmXG8z3VBbCky0Cx65rmcdG/QypB9ri5YTSNTQIxuq28StBpZUZn84CO/oMOtociGy4afW1aj5C0g==",
+      "peer": true,
+      "dependencies": {
+        "ajv": "^8.12.0",
+        "ajv-formats": "^2.1.1",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@rjsf/utils": "^5.18.x"
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.26.0.tgz",
+      "integrity": "sha512-gJNwtPDGEaOEgejbaseY6xMFu+CPltsc8/T+diUTTbOQLqD+bnrJq9ulH6WD69TqwqWmrfRAtUv30cCFZlbGTQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.26.0.tgz",
+      "integrity": "sha512-YJa5Gy8mEZgz5JquFruhJODMq3lTHWLm1fOy+HIANquLzfIOzE9RA5ie3JjCdVb9r46qfAQY/l947V0zfGJ0OQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.26.0.tgz",
+      "integrity": "sha512-ErTASs8YKbqTBoPLp/kA1B1Um5YSom8QAc4rKhg7b9tyyVqDBlQxy7Bf2wW7yIlPGPg2UODDQcbkTlruPzDosw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.26.0.tgz",
+      "integrity": "sha512-wbgkYDHcdWW+NqP2mnf2NOuEbOLzDblalrOWcPyY6+BRbVhliavon15UploG7PpBRQ2bZJnbmh8o3yLoBvDIHA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.26.0.tgz",
+      "integrity": "sha512-Y9vpjfp9CDkAG4q/uwuhZk96LP11fBz/bYdyg9oaHYhtGZp7NrbkQrj/66DYMMP2Yo/QPAsVHkV891KyO52fhg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.26.0.tgz",
+      "integrity": "sha512-A/jvfCZ55EYPsqeaAt/yDAG4q5tt1ZboWMHEvKAH9Zl92DWvMIbnZe/f/eOXze65aJaaKbL+YeM0Hz4kLQvdwg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.26.0.tgz",
+      "integrity": "sha512-paHF1bMXKDuizaMODm2bBTjRiHxESWiIyIdMugKeLnjuS1TCS54MF5+Y5Dx8Ui/1RBPVRE09i5OUlaLnv8OGnA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.26.0.tgz",
+      "integrity": "sha512-cwxiHZU1GAs+TMxvgPfUDtVZjdBdTsQwVnNlzRXC5QzIJ6nhfB4I1ahKoe9yPmoaA/Vhf7m9dB1chGPpDRdGXg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.26.0.tgz",
+      "integrity": "sha512-4daeEUQutGRCW/9zEo8JtdAgtJ1q2g5oHaoQaZbMSKaIWKDQwQ3Yx0/3jJNmpzrsScIPtx/V+1AfibLisb3AMQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.26.0.tgz",
+      "integrity": "sha512-eGkX7zzkNxvvS05ROzJ/cO/AKqNvR/7t1jA3VZDi2vRniLKwAWxUr85fH3NsvtxU5vnUUKFHKh8flIBdlo2b3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.26.0.tgz",
+      "integrity": "sha512-Odp/lgHbW/mAqw/pU21goo5ruWsytP7/HCC/liOt0zcGG0llYWKrd10k9Fj0pdj3prQ63N5yQLCLiE7HTX+MYw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.26.0.tgz",
+      "integrity": "sha512-MBR2ZhCTzUgVD0OJdTzNeF4+zsVogIR1U/FsyuFerwcqjZGvg2nYe24SAHp8O5sN8ZkRVbHwlYeHqcSQ8tcYew==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.26.0.tgz",
+      "integrity": "sha512-YYcg8MkbN17fMbRMZuxwmxWqsmQufh3ZJFxFGoHjrE7bv0X+T6l3glcdzd7IKLiwhT+PZOJCblpnNlz1/C3kGQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.26.0.tgz",
+      "integrity": "sha512-ZuwpfjCwjPkAOxpjAEjabg6LRSfL7cAJb6gSQGZYjGhadlzKKywDkCUnJ+KEfrNY1jH5EEoSIKLCb572jSiglA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@rjsf/utils": {
-      "version": "5.18.4",
-      "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.18.4.tgz",
-      "integrity": "sha512-svLMk5aW6q3JQRYVTJradFc9tLeQ1vX5/k6fPwxf+08eweqPbINq7aokLBSStUNr8FfYgThTl8IfehLoVP2dvw==",
-      "peer": true,
-      "dependencies": {
-        "json-schema-merge-allof": "^0.8.1",
-        "jsonpointer": "^5.0.1",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "react-is": "^18.2.0"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "react": "^16.14.0 || >=17"
-      }
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.26.0.tgz",
+      "integrity": "sha512-+HJD2lFS86qkeF8kNu0kALtifMpPCZU80HvwztIKnYwym3KnA1os6nsX4BGSTLtS2QVAGG1P3guRgsYyMA0Yhg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@rjsf/validator-ajv8": {
-      "version": "5.18.4",
-      "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.18.4.tgz",
-      "integrity": "sha512-D0bUtruWbUmXG8z3VBbCky0Cx65rmcdG/QypB9ri5YTSNTQIxuq28StBpZUZn84CO/oMOtociGy4afW1aj5C0g==",
-      "peer": true,
-      "dependencies": {
-        "ajv": "^8.12.0",
-        "ajv-formats": "^2.1.1",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "@rjsf/utils": "^5.18.x"
-      }
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.26.0.tgz",
+      "integrity": "sha512-WUQzVFWPSw2uJzX4j6YEbMAiLbs0BUysgysh8s817doAYhR5ybqTI1wtKARQKo6cGop3pHnrUJPFCsXdoFaimQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.26.0.tgz",
+      "integrity": "sha512-D4CxkazFKBfN1akAIY6ieyOqzoOoBV1OICxgUblWxff/pSjCA2khXlASUx7mK6W1oP4McqhgcCsu6QaLj3WMWg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.26.0.tgz",
+      "integrity": "sha512-2x8MO1rm4PGEP0xWbubJW5RtbNLk3puzAMaLQd3B3JHVw4KcHlmXcO+Wewx9zCoo7EUFiMlu/aZbCJ7VjMzAag==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
     },
     "node_modules/@semantic-release/commit-analyzer": {
       "version": "9.0.2",
@@ -5523,10 +6298,11 @@
       }
     },
     "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/express": {
       "version": "4.17.21",
@@ -6168,6 +6944,13 @@
       "integrity": "sha512-QXu7BPrP29VllRxH8GwB7x5iX5qWKAAMLqKQGWTeLWVlNHNOpVMJ91dsxQAIWXpjuW5wqvxu3Jd/nRjrJ+0pqg==",
       "dev": true
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -6527,6 +7310,22 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true
     },
+    "node_modules/bundle-require": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/bundle-require/-/bundle-require-5.0.0.tgz",
+      "integrity": "sha512-GuziW3fSSmopcx4KRymQEJVbZUfqlCqcq7dvs6TYwKRZiegK/2buMxQTPs6MGlNv50wms1699qYO54R8XfRX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "load-tsconfig": "^0.2.3"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "esbuild": ">=0.18"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -6548,6 +7347,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.6.tgz",
@@ -6978,6 +7787,16 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/consola": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-3.2.3.tgz",
+      "integrity": "sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -7397,11 +8216,12 @@
       "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
     },
     "node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -7826,6 +8646,13 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -8049,6 +8876,46 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/esbuild": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.0.tgz",
+      "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.24.0",
+        "@esbuild/android-arm": "0.24.0",
+        "@esbuild/android-arm64": "0.24.0",
+        "@esbuild/android-x64": "0.24.0",
+        "@esbuild/darwin-arm64": "0.24.0",
+        "@esbuild/darwin-x64": "0.24.0",
+        "@esbuild/freebsd-arm64": "0.24.0",
+        "@esbuild/freebsd-x64": "0.24.0",
+        "@esbuild/linux-arm": "0.24.0",
+        "@esbuild/linux-arm64": "0.24.0",
+        "@esbuild/linux-ia32": "0.24.0",
+        "@esbuild/linux-loong64": "0.24.0",
+        "@esbuild/linux-mips64el": "0.24.0",
+        "@esbuild/linux-ppc64": "0.24.0",
+        "@esbuild/linux-riscv64": "0.24.0",
+        "@esbuild/linux-s390x": "0.24.0",
+        "@esbuild/linux-x64": "0.24.0",
+        "@esbuild/netbsd-x64": "0.24.0",
+        "@esbuild/openbsd-arm64": "0.24.0",
+        "@esbuild/openbsd-x64": "0.24.0",
+        "@esbuild/sunos-x64": "0.24.0",
+        "@esbuild/win32-arm64": "0.24.0",
+        "@esbuild/win32-ia32": "0.24.0",
+        "@esbuild/win32-x64": "0.24.0"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
@@ -8622,6 +9489,36 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -8696,6 +9593,21 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -9891,6 +10803,22 @@
         "node": ">=10.13"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/java-properties": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/java-properties/-/java-properties-1.0.2.tgz",
@@ -9914,6 +10842,16 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/joycon": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz",
+      "integrity": "sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10100,6 +11038,19 @@
         "immediate": "~3.0.5"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -10144,6 +11095,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/load-tsconfig": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/load-tsconfig/-/load-tsconfig-0.2.5.tgz",
+      "integrity": "sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -10212,6 +11173,13 @@
       "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
       "dev": true
     },
+    "node_modules/lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.uniqby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
@@ -10514,6 +11482,16 @@
         "node": ">= 6"
       }
     },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/modify-values": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
@@ -10539,9 +11517,10 @@
       }
     },
     "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
     },
     "node_modules/multi-semantic-release": {
       "version": "3.0.2",
@@ -10589,6 +11568,18 @@
         "multicast-dns": "cli.js"
       }
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -13569,7 +14560,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13796,6 +14786,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/pako": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
@@ -13894,6 +14891,30 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
@@ -13910,9 +14931,10 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -13946,6 +14968,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/pkg-conf": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pkg-conf/-/pkg-conf-2.1.0.tgz",
@@ -15141,6 +16173,44 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rollup": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.26.0.tgz",
+      "integrity": "sha512-ilcl12hnWonG8f+NxU6BlgysVA0gvY2l8N0R84S1HcINbW20bvwuCngJkkInV6LXhwRpucsW5k1ovDwEdBVrNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.6"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.26.0",
+        "@rollup/rollup-android-arm64": "4.26.0",
+        "@rollup/rollup-darwin-arm64": "4.26.0",
+        "@rollup/rollup-darwin-x64": "4.26.0",
+        "@rollup/rollup-freebsd-arm64": "4.26.0",
+        "@rollup/rollup-freebsd-x64": "4.26.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.26.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.26.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.26.0",
+        "@rollup/rollup-linux-arm64-musl": "4.26.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.26.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.26.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.26.0",
+        "@rollup/rollup-linux-x64-gnu": "4.26.0",
+        "@rollup/rollup-linux-x64-musl": "4.26.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.26.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.26.0",
+        "@rollup/rollup-win32-x64-msvc": "4.26.0",
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/rtl-css-js": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
@@ -15728,12 +16798,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/send/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
-    },
     "node_modules/serialize-javascript": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
@@ -16287,6 +17351,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/string.prototype.padend": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.5.tgz",
@@ -16361,6 +17441,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -16513,6 +17607,86 @@
       "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==",
       "peer": true
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/supports-color": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -16704,6 +17878,29 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -16738,6 +17935,55 @@
       "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
       "peer": true
     },
+    "node_modules/tinyexec": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.1.tgz",
+      "integrity": "sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.10.tgz",
+      "integrity": "sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.2.tgz",
+      "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -16811,39 +18057,238 @@
         "node": ">=8"
       }
     },
-    "node_modules/ts-loader": {
-      "version": "9.5.1",
-      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.1.tgz",
-      "integrity": "sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==",
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/ts-loader": {
+      "version": "9.5.1",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.1.tgz",
+      "integrity": "sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^5.0.0",
+        "micromatch": "^4.0.0",
+        "semver": "^7.3.4",
+        "source-map": "^0.7.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "typescript": "*",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/ts-loader/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
+    "node_modules/tsup": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/tsup/-/tsup-8.3.5.tgz",
+      "integrity": "sha512-Tunf6r6m6tnZsG9GYWndg0z8dEV7fD733VBFzFJ5Vcm1FtlXB8xBD/rtrBi2a3YKEV7hHtxiZtW5EAVADoe1pA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bundle-require": "^5.0.0",
+        "cac": "^6.7.14",
+        "chokidar": "^4.0.1",
+        "consola": "^3.2.3",
+        "debug": "^4.3.7",
+        "esbuild": "^0.24.0",
+        "joycon": "^3.1.1",
+        "picocolors": "^1.1.1",
+        "postcss-load-config": "^6.0.1",
+        "resolve-from": "^5.0.0",
+        "rollup": "^4.24.0",
+        "source-map": "0.8.0-beta.0",
+        "sucrase": "^3.35.0",
+        "tinyexec": "^0.3.1",
+        "tinyglobby": "^0.2.9",
+        "tree-kill": "^1.2.2"
+      },
+      "bin": {
+        "tsup": "dist/cli-default.js",
+        "tsup-node": "dist/cli-node.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@microsoft/api-extractor": "^7.36.0",
+        "@swc/core": "^1",
+        "postcss": "^8.4.12",
+        "typescript": ">=4.5.0"
+      },
+      "peerDependenciesMeta": {
+        "@microsoft/api-extractor": {
+          "optional": true
+        },
+        "@swc/core": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tsup/node_modules/chokidar": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/tsup/node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tsup/node_modules/readdirp": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/tsup/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tsup/node_modules/source-map": {
+      "version": "0.8.0-beta.0",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
+      "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "chalk": "^4.1.0",
-        "enhanced-resolve": "^5.0.0",
-        "micromatch": "^4.0.0",
-        "semver": "^7.3.4",
-        "source-map": "^0.7.4"
+        "whatwg-url": "^7.0.0"
       },
       "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "typescript": "*",
-        "webpack": "^5.0.0"
+        "node": ">= 8"
       }
     },
-    "node_modules/ts-loader/node_modules/source-map": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+    "node_modules/tsup/node_modules/tr46": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
+      "integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
       "dev": true,
-      "engines": {
-        "node": ">= 8"
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.1.0"
       }
     },
-    "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    "node_modules/tsup/node_modules/webidl-conversions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/tsup/node_modules/whatwg-url": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
+      "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash.sortby": "^4.7.0",
+        "tr46": "^1.0.1",
+        "webidl-conversions": "^4.0.2"
+      }
+    },
+    "node_modules/tsup/node_modules/yaml": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
+      "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
     },
     "node_modules/type-fest": {
       "version": "0.18.1",
@@ -17697,6 +19142,25 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -19426,6 +20890,174 @@
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
       "peer": true
     },
+    "@esbuild/aix-ppc64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
+      "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/android-arm": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz",
+      "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/android-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz",
+      "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/android-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz",
+      "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/darwin-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz",
+      "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/darwin-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz",
+      "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/freebsd-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz",
+      "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/freebsd-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz",
+      "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-arm": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz",
+      "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz",
+      "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-ia32": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz",
+      "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-loong64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz",
+      "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-mips64el": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz",
+      "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-ppc64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz",
+      "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-riscv64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz",
+      "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-s390x": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz",
+      "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz",
+      "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/netbsd-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
+      "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/openbsd-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz",
+      "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/openbsd-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz",
+      "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/sunos-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz",
+      "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz",
+      "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-ia32": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz",
+      "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
+      "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==",
+      "dev": true,
+      "optional": true
+    },
     "@floating-ui/core": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
@@ -21207,6 +22839,71 @@
       "peer": true,
       "requires": {}
     },
+    "@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+          "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+          "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "9.2.2",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+          "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+          "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+          "dev": true,
+          "requires": {
+            "eastasianwidth": "^0.2.0",
+            "emoji-regex": "^9.2.2",
+            "strip-ansi": "^7.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
+        },
+        "wrap-ansi": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+          "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^6.1.0",
+            "string-width": "^5.0.1",
+            "strip-ansi": "^7.0.1"
+          }
+        }
+      }
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -21533,6 +23230,13 @@
       "integrity": "sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==",
       "peer": true
     },
+    "@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true
+    },
     "@pnpm/config.env-replace": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz",
@@ -21632,41 +23336,167 @@
         "prop-types": "^15.8.1"
       }
     },
-    "@rjsf/fluentui-rc": {
-      "version": "5.18.4",
-      "resolved": "https://registry.npmjs.org/@rjsf/fluentui-rc/-/fluentui-rc-5.18.4.tgz",
-      "integrity": "sha512-lkRaVrh2Hm6AtzSxMAUeP5lOBPKGhAEAzUpQoGSdY6Y2QXaGYku69Dfp0zm2zfAcO5kWdLCTSNcHQONuxJnVHQ==",
-      "peer": true,
-      "requires": {
-        "@fluentui/react-components": "^9.46.3",
-        "@fluentui/react-icons": "^2.0.226",
-        "@fluentui/react-migration-v0-v9": "^9.1.14"
-      }
+    "@rjsf/fluentui-rc": {
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/@rjsf/fluentui-rc/-/fluentui-rc-5.18.4.tgz",
+      "integrity": "sha512-lkRaVrh2Hm6AtzSxMAUeP5lOBPKGhAEAzUpQoGSdY6Y2QXaGYku69Dfp0zm2zfAcO5kWdLCTSNcHQONuxJnVHQ==",
+      "peer": true,
+      "requires": {
+        "@fluentui/react-components": "^9.46.3",
+        "@fluentui/react-icons": "^2.0.226",
+        "@fluentui/react-migration-v0-v9": "^9.1.14"
+      }
+    },
+    "@rjsf/utils": {
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.18.4.tgz",
+      "integrity": "sha512-svLMk5aW6q3JQRYVTJradFc9tLeQ1vX5/k6fPwxf+08eweqPbINq7aokLBSStUNr8FfYgThTl8IfehLoVP2dvw==",
+      "peer": true,
+      "requires": {
+        "json-schema-merge-allof": "^0.8.1",
+        "jsonpointer": "^5.0.1",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-is": "^18.2.0"
+      }
+    },
+    "@rjsf/validator-ajv8": {
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.18.4.tgz",
+      "integrity": "sha512-D0bUtruWbUmXG8z3VBbCky0Cx65rmcdG/QypB9ri5YTSNTQIxuq28StBpZUZn84CO/oMOtociGy4afW1aj5C0g==",
+      "peer": true,
+      "requires": {
+        "ajv": "^8.12.0",
+        "ajv-formats": "^2.1.1",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21"
+      }
+    },
+    "@rollup/rollup-android-arm-eabi": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.26.0.tgz",
+      "integrity": "sha512-gJNwtPDGEaOEgejbaseY6xMFu+CPltsc8/T+diUTTbOQLqD+bnrJq9ulH6WD69TqwqWmrfRAtUv30cCFZlbGTQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-android-arm64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.26.0.tgz",
+      "integrity": "sha512-YJa5Gy8mEZgz5JquFruhJODMq3lTHWLm1fOy+HIANquLzfIOzE9RA5ie3JjCdVb9r46qfAQY/l947V0zfGJ0OQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-darwin-arm64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.26.0.tgz",
+      "integrity": "sha512-ErTASs8YKbqTBoPLp/kA1B1Um5YSom8QAc4rKhg7b9tyyVqDBlQxy7Bf2wW7yIlPGPg2UODDQcbkTlruPzDosw==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-darwin-x64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.26.0.tgz",
+      "integrity": "sha512-wbgkYDHcdWW+NqP2mnf2NOuEbOLzDblalrOWcPyY6+BRbVhliavon15UploG7PpBRQ2bZJnbmh8o3yLoBvDIHA==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-freebsd-arm64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.26.0.tgz",
+      "integrity": "sha512-Y9vpjfp9CDkAG4q/uwuhZk96LP11fBz/bYdyg9oaHYhtGZp7NrbkQrj/66DYMMP2Yo/QPAsVHkV891KyO52fhg==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-freebsd-x64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.26.0.tgz",
+      "integrity": "sha512-A/jvfCZ55EYPsqeaAt/yDAG4q5tt1ZboWMHEvKAH9Zl92DWvMIbnZe/f/eOXze65aJaaKbL+YeM0Hz4kLQvdwg==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.26.0.tgz",
+      "integrity": "sha512-paHF1bMXKDuizaMODm2bBTjRiHxESWiIyIdMugKeLnjuS1TCS54MF5+Y5Dx8Ui/1RBPVRE09i5OUlaLnv8OGnA==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.26.0.tgz",
+      "integrity": "sha512-cwxiHZU1GAs+TMxvgPfUDtVZjdBdTsQwVnNlzRXC5QzIJ6nhfB4I1ahKoe9yPmoaA/Vhf7m9dB1chGPpDRdGXg==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.26.0.tgz",
+      "integrity": "sha512-4daeEUQutGRCW/9zEo8JtdAgtJ1q2g5oHaoQaZbMSKaIWKDQwQ3Yx0/3jJNmpzrsScIPtx/V+1AfibLisb3AMQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-arm64-musl": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.26.0.tgz",
+      "integrity": "sha512-eGkX7zzkNxvvS05ROzJ/cO/AKqNvR/7t1jA3VZDi2vRniLKwAWxUr85fH3NsvtxU5vnUUKFHKh8flIBdlo2b3Q==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.26.0.tgz",
+      "integrity": "sha512-Odp/lgHbW/mAqw/pU21goo5ruWsytP7/HCC/liOt0zcGG0llYWKrd10k9Fj0pdj3prQ63N5yQLCLiE7HTX+MYw==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.26.0.tgz",
+      "integrity": "sha512-MBR2ZhCTzUgVD0OJdTzNeF4+zsVogIR1U/FsyuFerwcqjZGvg2nYe24SAHp8O5sN8ZkRVbHwlYeHqcSQ8tcYew==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.26.0.tgz",
+      "integrity": "sha512-YYcg8MkbN17fMbRMZuxwmxWqsmQufh3ZJFxFGoHjrE7bv0X+T6l3glcdzd7IKLiwhT+PZOJCblpnNlz1/C3kGQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-x64-gnu": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.26.0.tgz",
+      "integrity": "sha512-ZuwpfjCwjPkAOxpjAEjabg6LRSfL7cAJb6gSQGZYjGhadlzKKywDkCUnJ+KEfrNY1jH5EEoSIKLCb572jSiglA==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-x64-musl": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.26.0.tgz",
+      "integrity": "sha512-+HJD2lFS86qkeF8kNu0kALtifMpPCZU80HvwztIKnYwym3KnA1os6nsX4BGSTLtS2QVAGG1P3guRgsYyMA0Yhg==",
+      "dev": true,
+      "optional": true
     },
-    "@rjsf/utils": {
-      "version": "5.18.4",
-      "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.18.4.tgz",
-      "integrity": "sha512-svLMk5aW6q3JQRYVTJradFc9tLeQ1vX5/k6fPwxf+08eweqPbINq7aokLBSStUNr8FfYgThTl8IfehLoVP2dvw==",
-      "peer": true,
-      "requires": {
-        "json-schema-merge-allof": "^0.8.1",
-        "jsonpointer": "^5.0.1",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "react-is": "^18.2.0"
-      }
+    "@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.26.0.tgz",
+      "integrity": "sha512-WUQzVFWPSw2uJzX4j6YEbMAiLbs0BUysgysh8s817doAYhR5ybqTI1wtKARQKo6cGop3pHnrUJPFCsXdoFaimQ==",
+      "dev": true,
+      "optional": true
     },
-    "@rjsf/validator-ajv8": {
-      "version": "5.18.4",
-      "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.18.4.tgz",
-      "integrity": "sha512-D0bUtruWbUmXG8z3VBbCky0Cx65rmcdG/QypB9ri5YTSNTQIxuq28StBpZUZn84CO/oMOtociGy4afW1aj5C0g==",
-      "peer": true,
-      "requires": {
-        "ajv": "^8.12.0",
-        "ajv-formats": "^2.1.1",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21"
-      }
+    "@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.26.0.tgz",
+      "integrity": "sha512-D4CxkazFKBfN1akAIY6ieyOqzoOoBV1OICxgUblWxff/pSjCA2khXlASUx7mK6W1oP4McqhgcCsu6QaLj3WMWg==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-win32-x64-msvc": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.26.0.tgz",
+      "integrity": "sha512-2x8MO1rm4PGEP0xWbubJW5RtbNLk3puzAMaLQd3B3JHVw4KcHlmXcO+Wewx9zCoo7EUFiMlu/aZbCJ7VjMzAag==",
+      "dev": true,
+      "optional": true
     },
     "@semantic-release/commit-analyzer": {
       "version": "9.0.2",
@@ -21991,9 +23821,9 @@
       }
     },
     "@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true
     },
     "@types/express": {
@@ -22558,6 +24388,12 @@
       "integrity": "sha512-QXu7BPrP29VllRxH8GwB7x5iX5qWKAAMLqKQGWTeLWVlNHNOpVMJ91dsxQAIWXpjuW5wqvxu3Jd/nRjrJ+0pqg==",
       "dev": true
     },
+    "any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
     "anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -22841,6 +24677,15 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true
     },
+    "bundle-require": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/bundle-require/-/bundle-require-5.0.0.tgz",
+      "integrity": "sha512-GuziW3fSSmopcx4KRymQEJVbZUfqlCqcq7dvs6TYwKRZiegK/2buMxQTPs6MGlNv50wms1699qYO54R8XfRX4w==",
+      "dev": true,
+      "requires": {
+        "load-tsconfig": "^0.2.3"
+      }
+    },
     "busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -22856,6 +24701,12 @@
       "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
       "dev": true
     },
+    "cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true
+    },
     "call-bind": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.6.tgz",
@@ -23192,6 +25043,12 @@
       "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
       "dev": true
     },
+    "consola": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-3.2.3.tgz",
+      "integrity": "sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==",
+      "dev": true
+    },
     "content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -23500,11 +25357,11 @@
       "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
     },
     "debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "requires": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       }
     },
     "decamelize": {
@@ -23823,6 +25680,12 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -24003,6 +25866,38 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "esbuild": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.0.tgz",
+      "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
+      "dev": true,
+      "requires": {
+        "@esbuild/aix-ppc64": "0.24.0",
+        "@esbuild/android-arm": "0.24.0",
+        "@esbuild/android-arm64": "0.24.0",
+        "@esbuild/android-x64": "0.24.0",
+        "@esbuild/darwin-arm64": "0.24.0",
+        "@esbuild/darwin-x64": "0.24.0",
+        "@esbuild/freebsd-arm64": "0.24.0",
+        "@esbuild/freebsd-x64": "0.24.0",
+        "@esbuild/linux-arm": "0.24.0",
+        "@esbuild/linux-arm64": "0.24.0",
+        "@esbuild/linux-ia32": "0.24.0",
+        "@esbuild/linux-loong64": "0.24.0",
+        "@esbuild/linux-mips64el": "0.24.0",
+        "@esbuild/linux-ppc64": "0.24.0",
+        "@esbuild/linux-riscv64": "0.24.0",
+        "@esbuild/linux-s390x": "0.24.0",
+        "@esbuild/linux-x64": "0.24.0",
+        "@esbuild/netbsd-x64": "0.24.0",
+        "@esbuild/openbsd-arm64": "0.24.0",
+        "@esbuild/openbsd-x64": "0.24.0",
+        "@esbuild/sunos-x64": "0.24.0",
+        "@esbuild/win32-arm64": "0.24.0",
+        "@esbuild/win32-ia32": "0.24.0",
+        "@esbuild/win32-x64": "0.24.0"
+      }
+    },
     "escalade": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
@@ -24470,6 +26365,24 @@
         "is-callable": "^1.1.3"
       }
     },
+    "foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "dependencies": {
+        "signal-exit": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+          "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+          "dev": true
+        }
+      }
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -24521,6 +26434,13 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
+    "fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "optional": true
+    },
     "function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -25339,6 +27259,16 @@
         "lodash.uniqby": "^4.7.0"
       }
     },
+    "jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "requires": {
+        "@isaacs/cliui": "^8.0.2",
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "java-properties": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/java-properties/-/java-properties-1.0.2.tgz",
@@ -25356,6 +27286,12 @@
         "supports-color": "^8.0.0"
       }
     },
+    "joycon": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz",
+      "integrity": "sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==",
+      "dev": true
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -25511,6 +27447,12 @@
         "immediate": "~3.0.5"
       }
     },
+    "lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "dev": true
+    },
     "lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -25550,6 +27492,12 @@
         }
       }
     },
+    "load-tsconfig": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/load-tsconfig/-/load-tsconfig-0.2.5.tgz",
+      "integrity": "sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==",
+      "dev": true
+    },
     "loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -25612,6 +27560,12 @@
       "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
       "dev": true
     },
+    "lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
+      "dev": true
+    },
     "lodash.uniqby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
@@ -25830,6 +27784,12 @@
         "kind-of": "^6.0.3"
       }
     },
+    "minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true
+    },
     "modify-values": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
@@ -25849,9 +27809,9 @@
       "dev": true
     },
     "ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "multi-semantic-release": {
       "version": "3.0.2",
@@ -25889,6 +27849,17 @@
         "thunky": "^1.0.2"
       }
     },
+    "mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "requires": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -27964,8 +29935,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "peer": true
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-inspect": {
       "version": "1.13.1",
@@ -28120,6 +30090,12 @@
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "dev": true
     },
+    "package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true
+    },
     "pako": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
@@ -28197,6 +30173,24 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "requires": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "10.4.3",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+          "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+          "dev": true
+        }
+      }
+    },
     "path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
@@ -28210,9 +30204,9 @@
       "dev": true
     },
     "picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "picomatch": {
       "version": "2.3.1",
@@ -28231,6 +30225,12 @@
       "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
       "dev": true
     },
+    "pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true
+    },
     "pkg-conf": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pkg-conf/-/pkg-conf-2.1.0.tgz",
@@ -29169,6 +31169,34 @@
         "glob": "^7.1.3"
       }
     },
+    "rollup": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.26.0.tgz",
+      "integrity": "sha512-ilcl12hnWonG8f+NxU6BlgysVA0gvY2l8N0R84S1HcINbW20bvwuCngJkkInV6LXhwRpucsW5k1ovDwEdBVrNg==",
+      "dev": true,
+      "requires": {
+        "@rollup/rollup-android-arm-eabi": "4.26.0",
+        "@rollup/rollup-android-arm64": "4.26.0",
+        "@rollup/rollup-darwin-arm64": "4.26.0",
+        "@rollup/rollup-darwin-x64": "4.26.0",
+        "@rollup/rollup-freebsd-arm64": "4.26.0",
+        "@rollup/rollup-freebsd-x64": "4.26.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.26.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.26.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.26.0",
+        "@rollup/rollup-linux-arm64-musl": "4.26.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.26.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.26.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.26.0",
+        "@rollup/rollup-linux-x64-gnu": "4.26.0",
+        "@rollup/rollup-linux-x64-musl": "4.26.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.26.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.26.0",
+        "@rollup/rollup-win32-x64-msvc": "4.26.0",
+        "@types/estree": "1.0.6",
+        "fsevents": "~2.3.2"
+      }
+    },
     "rtl-css-js": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
@@ -29635,12 +31663,6 @@
           "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
           "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
           "dev": true
-        },
-        "ms": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-          "dev": true
         }
       }
     },
@@ -30110,6 +32132,17 @@
         "strip-ansi": "^6.0.1"
       }
     },
+    "string-width-cjs": {
+      "version": "npm:string-width@4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      }
+    },
     "string.prototype.padend": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.5.tgz",
@@ -30163,6 +32196,15 @@
         "ansi-regex": "^5.0.1"
       }
     },
+    "strip-ansi-cjs": {
+      "version": "npm:strip-ansi@6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.1"
+      }
+    },
     "strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -30259,6 +32301,61 @@
       "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==",
       "peer": true
     },
+    "sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+          "dev": true
+        },
+        "glob": {
+          "version": "10.4.5",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+          "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+          "dev": true,
+          "requires": {
+            "foreground-child": "^3.1.0",
+            "jackspeak": "^3.1.2",
+            "minimatch": "^9.0.4",
+            "minipass": "^7.1.2",
+            "package-json-from-dist": "^1.0.0",
+            "path-scurry": "^1.11.1"
+          }
+        },
+        "minimatch": {
+          "version": "9.0.5",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+          "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -30387,6 +32484,24 @@
       "integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==",
       "dev": true
     },
+    "thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "requires": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "requires": {
+        "thenify": ">= 3.1.0 < 4"
+      }
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -30421,6 +32536,37 @@
       "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
       "peer": true
     },
+    "tinyexec": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.1.tgz",
+      "integrity": "sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==",
+      "dev": true
+    },
+    "tinyglobby": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.10.tgz",
+      "integrity": "sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==",
+      "dev": true,
+      "requires": {
+        "fdir": "^6.4.2",
+        "picomatch": "^4.0.2"
+      },
+      "dependencies": {
+        "fdir": {
+          "version": "6.4.2",
+          "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.2.tgz",
+          "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==",
+          "dev": true,
+          "requires": {}
+        },
+        "picomatch": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+          "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+          "dev": true
+        }
+      }
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -30470,6 +32616,12 @@
       "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
       "dev": true
     },
+    "ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
     "ts-loader": {
       "version": "9.5.1",
       "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.1.tgz",
@@ -30496,6 +32648,105 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
+    "tsup": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/tsup/-/tsup-8.3.5.tgz",
+      "integrity": "sha512-Tunf6r6m6tnZsG9GYWndg0z8dEV7fD733VBFzFJ5Vcm1FtlXB8xBD/rtrBi2a3YKEV7hHtxiZtW5EAVADoe1pA==",
+      "dev": true,
+      "requires": {
+        "bundle-require": "^5.0.0",
+        "cac": "^6.7.14",
+        "chokidar": "^4.0.1",
+        "consola": "^3.2.3",
+        "debug": "^4.3.7",
+        "esbuild": "^0.24.0",
+        "joycon": "^3.1.1",
+        "picocolors": "^1.1.1",
+        "postcss-load-config": "^6.0.1",
+        "resolve-from": "^5.0.0",
+        "rollup": "^4.24.0",
+        "source-map": "0.8.0-beta.0",
+        "sucrase": "^3.35.0",
+        "tinyexec": "^0.3.1",
+        "tinyglobby": "^0.2.9",
+        "tree-kill": "^1.2.2"
+      },
+      "dependencies": {
+        "chokidar": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+          "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+          "dev": true,
+          "requires": {
+            "readdirp": "^4.0.1"
+          }
+        },
+        "postcss-load-config": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+          "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+          "dev": true,
+          "requires": {
+            "lilconfig": "^3.1.1"
+          }
+        },
+        "readdirp": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+          "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+          "dev": true
+        },
+        "resolve-from": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+          "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.8.0-beta.0",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
+          "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
+          "dev": true,
+          "requires": {
+            "whatwg-url": "^7.0.0"
+          }
+        },
+        "tr46": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
+          "integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
+          "dev": true,
+          "requires": {
+            "punycode": "^2.1.0"
+          }
+        },
+        "webidl-conversions": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+          "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
+          "dev": true
+        },
+        "whatwg-url": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
+          "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
+          "dev": true,
+          "requires": {
+            "lodash.sortby": "^4.7.0",
+            "tr46": "^1.0.1",
+            "webidl-conversions": "^4.0.2"
+          }
+        },
+        "yaml": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
+          "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
+          "dev": true,
+          "optional": true,
+          "peer": true
+        }
+      }
+    },
     "type-fest": {
       "version": "0.18.1",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
@@ -31079,6 +33330,17 @@
         "strip-ansi": "^6.0.0"
       }
     },
+    "wrap-ansi-cjs": {
+      "version": "npm:wrap-ansi@7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/package.json b/package.json
index 6f1a3c1..4a515ee 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "npm-run-all": "^4.1.5",
     "semantic-release": "19.0.5",
     "semantic-release-monorepo": "7.0.5",
-    "typescript": "5.4.2"
+    "typescript": "5.4.2",
+    "tsup": "8.3.5"
   },
   "scripts": {
     "link": "concurrently  \"npm:link-*\"",
@@ -20,6 +21,11 @@
     "link-designer": "npm --workspace packages/designer link",
     "link-inputs": "npm run link --workspace packages/inputs",
     "link-querybuilder": "npm --workspace packages/querybuilder link",
+
+    "build": "concurrently  \"npm:build-*\"",
+    "build-core": "npm --workspace packages/core run build",
+    
+
     "publish": "npm-run-all --continue-on-error publish-*",
     "publish-core": "npm --workspace packages/core publish --access public",
     "publish-designer": "npm --workspace packages/designer publish --access public",
@@ -28,7 +34,7 @@
     "release-designer": "npm run release --workspace packages/designer",
     "release-inputs": "npm run release --workspace packages/inputs",
     "release-querybuilder": "npm run release --workspace packages/querybuilder",
-   "eavfw-link": "npm link @eavfw/apps @eavfw/next @eavfw/expressions @eavfw/manifest @eavfw/hooks @eavfw/forms @eavfw/utils @eavfw/designer @eavfw/designer-core @eavfw/designer-nodes @eavfw/rich-text-editor",
+    "eavfw-link": "npm link @eavfw/apps @eavfw/next @eavfw/expressions @eavfw/manifest @eavfw/hooks @eavfw/forms @eavfw/utils @eavfw/designer @eavfw/designer-core @eavfw/designer-nodes @eavfw/rich-text-editor",
     "playground": "npm --workspace packages/playground run dev"
   },
   "config": {
diff --git a/packages/core/package.json b/packages/core/package.json
index fda6217..ec836c6 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,28 +1,32 @@
 {
   "version": "1.0.0-vnext.36",
   "name": "@eavfw/quickform-core",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
     "@griffel/react": "1.5.23",
-    "@opentelemetry/api": "^1.8.0"  
+    "@opentelemetry/api": "^1.8.0"
   },
   "devDependencies": {
   },
   "license": "MIT",
-  "files": [
-    "src"
-  ],
   "author": "Poul Kjeldager <poul@kjeldager.com>",
   "type": "module",
-  "main": "./src/index.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/EAVFW/QuickForm.git"
   },
   "scripts": {
-    "release": "semantic-release -e semantic-release-monorepo"
+    "release": "semantic-release -e semantic-release-monorepo",
+    "build": "tsup"
   }
 }
diff --git a/packages/core/src/style/modernQuickFormTokens.ts b/packages/core/src/style/modernQuickFormTokens.ts
index 59e3e6c..30feee6 100644
--- a/packages/core/src/style/modernQuickFormTokens.ts
+++ b/packages/core/src/style/modernQuickFormTokens.ts
@@ -1,4 +1,4 @@
-import { QuickFormTokens } from "@eavfw/quickform-core";
+import { QuickFormTokens } from "./quickFormTokensDefinition";
 
 export const modernQuickFormTokens: QuickFormTokens = {
     white: '#FFFFFF',
diff --git a/packages/core/tsup.config.ts b/packages/core/tsup.config.ts
new file mode 100644
index 0000000..076ff8e
--- /dev/null
+++ b/packages/core/tsup.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+    entry: ["src/index.ts"],
+    format: ["cjs", "esm"], // Build for commonJS and ESmodules
+    dts: true, // Generate declaration file (.d.ts)
+    splitting: false,
+    sourcemap: true,
+    clean: true,
+});
\ No newline at end of file

From 7eca6e115c57c18b512a599354efeeaaef6d44ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 19:57:14 +0100
Subject: [PATCH 106/118] fix: exported a few things

---
 packages/core/package.json                         | 14 +++++++++++---
 packages/core/src/hooks/index.ts                   |  3 ++-
 packages/core/src/index.ts                         |  2 +-
 packages/core/src/model/index.ts                   |  3 ++-
 packages/core/src/state/index.ts                   |  1 +
 .../src/reactQueryBuilderVisibilityEngine.ts       |  5 ++---
 6 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index ec836c6..5b43c57 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,9 +1,18 @@
 {
   "version": "1.0.0-vnext.36",
   "name": "@eavfw/quickform-core",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
     "dist",
     "src"
@@ -20,7 +29,6 @@
   },
   "license": "MIT",
   "author": "Poul Kjeldager <poul@kjeldager.com>",
-  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/EAVFW/QuickForm.git"
diff --git a/packages/core/src/hooks/index.ts b/packages/core/src/hooks/index.ts
index 0bec6b8..52d28b4 100644
--- a/packages/core/src/hooks/index.ts
+++ b/packages/core/src/hooks/index.ts
@@ -1,4 +1,5 @@
 export { useHandleEnterKeypress} from "./useHandleEnterKeypress";
 export { useHandleScroll } from "./useHandleScroll";
 export { useDelayedClickListener } from "./useDelayedClickListenerCallback";
-export { useKeyPressHandler } from "./useKeyPressHandler";
\ No newline at end of file
+export { useKeyPressHandler } from "./useKeyPressHandler";
+export { useFocusableQuestion } from "./useFocusableQuestion";
\ No newline at end of file
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index a711be0..9a48b7e 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -3,5 +3,5 @@ export * from "./state";
 export * from "./services";
 export * from "./hooks";
 export * from "./style";
-export type { QuickFormDefinition, InputProps } from "./model";
+export type { QuickFormDefinition, InputProps, QuestionModel } from "./model";
 export { defaultQuickFormTokens } from "./style/defaultQuickFormTokens";
\ No newline at end of file
diff --git a/packages/core/src/model/index.ts b/packages/core/src/model/index.ts
index cf09f85..ce778c0 100644
--- a/packages/core/src/model/index.ts
+++ b/packages/core/src/model/index.ts
@@ -8,4 +8,5 @@ export * from "./SlideModel";
 export * from "./SubmitModel";
 
 
-export type { QuickFormDefinition } from "./json-definitions/QuickFormDefinition";
\ No newline at end of file
+export type { QuickFormDefinition } from "./json-definitions/QuickFormDefinition";
+
diff --git a/packages/core/src/state/index.ts b/packages/core/src/state/index.ts
index edd3482..c4ee372 100644
--- a/packages/core/src/state/index.ts
+++ b/packages/core/src/state/index.ts
@@ -5,3 +5,4 @@ export type { QuickformState } from "./QuickformState";
 export * from "./QuickformState";
 export * from "./QuickformProvider";
 export * from "./QuickFormContext";
+export * from "./action-handlers/VisibilityHandler";
\ No newline at end of file
diff --git a/packages/querybuilder/src/reactQueryBuilderVisibilityEngine.ts b/packages/querybuilder/src/reactQueryBuilderVisibilityEngine.ts
index b1e6b87..2d26c9d 100644
--- a/packages/querybuilder/src/reactQueryBuilderVisibilityEngine.ts
+++ b/packages/querybuilder/src/reactQueryBuilderVisibilityEngine.ts
@@ -1,7 +1,6 @@
 "use client";
-import { resolveInputComponent, type QuickformState } from "@eavfw/quickform-core";
-import type { QuestionModel } from "@eavfw/quickform-core/src/model";
-import { VisibilityRuleEngineContext, registerVisibilityEngine } from "@eavfw/quickform-core/src/state/action-handlers/VisibilityHandler";
+import { resolveInputComponent, VisibilityRuleEngineContext, registerVisibilityEngine, type QuickformState, type QuestionModel } from "@eavfw/quickform-core";
+
 import type { RuleGroupType, RuleType, defaultOperators } from "react-querybuilder";
 
 type ArrayElement<ArrayType extends readonly unknown[]> =

From d209037026165150da57fab308b4aa5c75a7f63c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 20:09:12 +0100
Subject: [PATCH 107/118] fix: exported types from model

---
 packages/core/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 9a48b7e..9179692 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -3,5 +3,5 @@ export * from "./state";
 export * from "./services";
 export * from "./hooks";
 export * from "./style";
-export type { QuickFormDefinition, InputProps, QuestionModel } from "./model";
+export type * from "./model";
 export { defaultQuickFormTokens } from "./style/defaultQuickFormTokens";
\ No newline at end of file

From aa7e214ecde5fc7c329825bfc5a6682395c46fb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 20:19:37 +0100
Subject: [PATCH 108/118] fix: exported ValidationResult

---
 packages/core/src/model/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/core/src/model/index.ts b/packages/core/src/model/index.ts
index ce778c0..ad0af6d 100644
--- a/packages/core/src/model/index.ts
+++ b/packages/core/src/model/index.ts
@@ -6,6 +6,7 @@ export * from "./json-definitions/Layout";
 export * from "./QuestionModel";
 export * from "./SlideModel";
 export * from "./SubmitModel";
+export * from "./ValidationResult";
 
 
 export type { QuickFormDefinition } from "./json-definitions/QuickFormDefinition";

From 7e5463791d72592678513827ee3d8348499914bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 20:37:48 +0100
Subject: [PATCH 109/118] fix: updated broken depenecy

---
 .../designer/src/Components/Views/QuickFormSettingsView.tsx    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
index ff724e8..4e84e73 100644
--- a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
+++ b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
@@ -7,9 +7,8 @@ import { useQuickFormDefinition } from "../../Contexts/QuickFormDefContext";
 import { useViewStyles } from "../Styles/useViewStyles.styles";
 import { makeStyles, mergeClasses } from "@fluentui/react-components";
 import { JSONSchema7 } from "json-schema";
-import { defaultQuickFormTokens } from "@eavfw/quickform-core";
+import { defaultQuickFormTokens, IconEnum } from "@eavfw/quickform-core";
 import { Controls } from "@eavfw/apps";
-import { IconEnum } from "@eavfw/quickform-core/src/components/icons/IconResolver";
 import { QuickformDesignerFields, QuickformDesignerWidgets } from "./QuickFormQuestionsView";
 
 const quickformSettingsSchema = {

From 9987aa17dca870f8119e31094cd92e5b92b01213 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 20:41:47 +0100
Subject: [PATCH 110/118] fix: exported iconenum

---
 packages/core/src/components/icons/index.ts | 4 +++-
 packages/core/src/components/index.ts       | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/icons/index.ts b/packages/core/src/components/icons/index.ts
index 6be3f29..7c1ca1e 100644
--- a/packages/core/src/components/icons/index.ts
+++ b/packages/core/src/components/icons/index.ts
@@ -6,4 +6,6 @@ export { ErrorIcon } from "./ErrorIcon";
 export { TelephoneIcon } from "./TelephoneIcon";
 export { ImArrowRightIcon } from "./ImArrowRightIcon";
 export { RightArrow } from "./RightArrow";
-export { UserIcon } from "./UserIcon";
\ No newline at end of file
+export { UserIcon } from "./UserIcon";
+export type { IconProps } from "./iconProps";
+export { type IconEnum, IconResolver } from "./IconResolver";
\ No newline at end of file
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
index 43fea3c..84a9ce8 100644
--- a/packages/core/src/components/index.ts
+++ b/packages/core/src/components/index.ts
@@ -18,4 +18,5 @@ export { QuickFormContainer } from "./container/QuickFormContainer";
 export { ModernQuickFormContainer } from "./modern-container/ModernQuickformContainer";
 export { SlideRenderer } from "./renderers/slide-renderer/SlideRenderer";
 export { QuestionHeading } from "./question/components/QuestionHeading";
+export { IconResolver, type IconEnum } from "./icons";
 // import "./question/input-types";

From bc33d8545216ddd079a426461123d15814873d45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 21:05:29 +0100
Subject: [PATCH 111/118] fix: added methods to register services

---
 .../core/src/components/question-number/QuestionNumber.tsx | 7 +------
 .../src/components/question/components/QuestionHeading.tsx | 3 ++-
 .../core/src/services/defaults/DefaultInputTypeResolver.ts | 4 +++-
 .../core/src/services/defaults/DefaultInputValidator.ts    | 4 +++-
 .../core/src/services/defaults/DefaultModelTransformer.ts  | 3 ++-
 .../src/services/defaults/DefaultQuestionTransformer.ts    | 3 ++-
 .../core/src/services/defaults/DefaultQuickFormLogger.ts   | 5 +++--
 7 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/components/question-number/QuestionNumber.tsx b/packages/core/src/components/question-number/QuestionNumber.tsx
index ead3126..16a349f 100644
--- a/packages/core/src/components/question-number/QuestionNumber.tsx
+++ b/packages/core/src/components/question-number/QuestionNumber.tsx
@@ -3,12 +3,7 @@ import { ImArrowRightIcon } from "../icons";
 import { useQuickForm } from "../../state/QuickFormContext";
 import React from "react";
 
-const defaultHeadingNumberDisplayProvider: HeadingNumberDisplayProvider = () => {
-    const { state } = useQuickForm();
-    return state.currStep > 1 && state.currStep <= state.totalSteps + 1;
-}
-
-registerQuickFormService("headingNumberDisplayProvider", defaultHeadingNumberDisplayProvider);
+ 
 
 /**
  * Deprecated: Use QuestionHeading instead
diff --git a/packages/core/src/components/question/components/QuestionHeading.tsx b/packages/core/src/components/question/components/QuestionHeading.tsx
index 0a5113f..335f929 100644
--- a/packages/core/src/components/question/components/QuestionHeading.tsx
+++ b/packages/core/src/components/question/components/QuestionHeading.tsx
@@ -57,4 +57,5 @@ const defaultHeadingNumberDisplayProvider: HeadingNumberDisplayProvider = () =>
     return false;
 }
 
-registerQuickFormService("headingNumberDisplayProvider", defaultHeadingNumberDisplayProvider);
\ No newline at end of file
+export const withDefaultHeadingNumberDisplayProvider = () =>
+    registerQuickFormService("headingNumberDisplayProvider", defaultHeadingNumberDisplayProvider);
diff --git a/packages/core/src/services/defaults/DefaultInputTypeResolver.ts b/packages/core/src/services/defaults/DefaultInputTypeResolver.ts
index 92a8751..c2163c0 100644
--- a/packages/core/src/services/defaults/DefaultInputTypeResolver.ts
+++ b/packages/core/src/services/defaults/DefaultInputTypeResolver.ts
@@ -22,7 +22,9 @@ const parseInputProperties = (questionJsonModel: QuestionJsonModel): InputProper
     return {};
 };
 
-registerQuickFormService("inputTypePropertiesTransformer", parseInputProperties);
+
+export const widthDefaultInputTypePropertiesTransformer = () =>
+    registerQuickFormService("inputTypePropertiesTransformer", parseInputProperties);
 
 
 import { JSONSchema7, JSONSchema7Definition } from "json-schema";
diff --git a/packages/core/src/services/defaults/DefaultInputValidator.ts b/packages/core/src/services/defaults/DefaultInputValidator.ts
index c4b4597..d016080 100644
--- a/packages/core/src/services/defaults/DefaultInputValidator.ts
+++ b/packages/core/src/services/defaults/DefaultInputValidator.ts
@@ -83,4 +83,6 @@ export const registerInputTypeValidator = <TAnswer, TInputProps, TQuestionModel
     validatorMap[key] = validator as ValidatorFunction<any, any, QuestionModel<any>, QuickformState>;
 };
 
-registerQuickFormService("inputValidator", validateQuestionOutput);
\ No newline at end of file
+export const withDefaultInputValidator = () =>
+    registerQuickFormService("inputValidator", validateQuestionOutput);
+
diff --git a/packages/core/src/services/defaults/DefaultModelTransformer.ts b/packages/core/src/services/defaults/DefaultModelTransformer.ts
index 5461b9f..8731d96 100644
--- a/packages/core/src/services/defaults/DefaultModelTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultModelTransformer.ts
@@ -228,4 +228,5 @@ const transformJSONInput: QuickFormModelTransformer = (definition, payload): Qui
     };
 };
 
-registerQuickFormService("modeltransformer", transformJSONInput);
\ No newline at end of file
+export const widthDefaultModeltransformer = () =>
+    registerQuickFormService("modeltransformer", transformJSONInput);
\ No newline at end of file
diff --git a/packages/core/src/services/defaults/DefaultQuestionTransformer.ts b/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
index 0803a65..2fb2d47 100644
--- a/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
@@ -46,4 +46,5 @@ function mapJsonQuestionToModelQuestion(questionKey: string, question: QuestionJ
     };
 }
 
-registerQuickFormService("questionTransformer", mapJsonQuestionToModelQuestion);
\ No newline at end of file
+
+export const widthDefaultQuestionTransformer = () => registerQuickFormService("questionTransformer", mapJsonQuestionToModelQuestion);
\ No newline at end of file
diff --git a/packages/core/src/services/defaults/DefaultQuickFormLogger.ts b/packages/core/src/services/defaults/DefaultQuickFormLogger.ts
index 134f325..7c947bd 100644
--- a/packages/core/src/services/defaults/DefaultQuickFormLogger.ts
+++ b/packages/core/src/services/defaults/DefaultQuickFormLogger.ts
@@ -1,6 +1,6 @@
 import { IQuickFormLogger, registerQuickFormService } from "../QuickFormServices";
 
-class DefaultLogger implements IQuickFormLogger {
+export class DefaultLogger implements IQuickFormLogger {
     
     private replaceLiteral(body: string, ...args: any[]) {
         var iterLiteral = "{(.*?)}";
@@ -25,4 +25,5 @@ class DefaultLogger implements IQuickFormLogger {
 
 }
 
-registerQuickFormService("logger", new DefaultLogger());
\ No newline at end of file
+
+export const widthDefaultLogger = () => registerQuickFormService("logger", new DefaultLogger());

From b00a489e7704d6ea678517190d95f4a780147f88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 21:10:19 +0100
Subject: [PATCH 112/118] fix: added registerDefaultServices to easily register
 all default services

---
 packages/core/src/services/QuickFormServices.ts |  5 +++--
 packages/core/src/services/index.ts             | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/services/QuickFormServices.ts b/packages/core/src/services/QuickFormServices.ts
index 4dddaae..8fcd6ca 100644
--- a/packages/core/src/services/QuickFormServices.ts
+++ b/packages/core/src/services/QuickFormServices.ts
@@ -3,7 +3,7 @@ import { ValidationResult } from "../model/ValidationResult";
 import { InputPropertiesTypes, QuestionModel, QuickFormModel } from "../model";
 import { QuickFormDefinition } from "../model";
 import { QuestionJsonModel } from "../model/json-definitions/JsonDataModels";
-import { InputComponentType } from "./defaults/DefaultInputTypeResolver";
+import { InputComponentType, widthDefaultInputTypePropertiesTransformer } from "./defaults/DefaultInputTypeResolver";
 import { QuickformState } from "../state";
 
 export type HeadingNumberDisplayProvider = () => boolean;
@@ -39,4 +39,5 @@ export function resolveQuickFormService<Key extends keyof QuickFormFeatures>(nam
     if (!f)
         throw new Error(`'${name}' was not registered, registred keys: ${Object.keys(_quickFormFeatures)}`);
     return f as Required<QuickFormFeatures>[Key];
-}
\ No newline at end of file
+}
+
diff --git a/packages/core/src/services/index.ts b/packages/core/src/services/index.ts
index ae719a7..485dc02 100644
--- a/packages/core/src/services/index.ts
+++ b/packages/core/src/services/index.ts
@@ -1,2 +1,16 @@
+import { withDefaultHeadingNumberDisplayProvider } from "../components/question/components/QuestionHeading";
+import { widthDefaultInputTypePropertiesTransformer, widthDefaultLogger, widthDefaultModeltransformer, widthDefaultQuestionTransformer, withDefaultInputValidator } from "./defaults";
+
 export * from "./defaults";
-export * from "./QuickFormServices";
\ No newline at end of file
+export * from "./QuickFormServices";
+
+
+
+export function registerDefaultServices() {
+    widthDefaultInputTypePropertiesTransformer();
+    withDefaultInputValidator();
+    widthDefaultModeltransformer();
+    widthDefaultQuestionTransformer();
+    widthDefaultLogger();
+    withDefaultHeadingNumberDisplayProvider();
+}
\ No newline at end of file

From 4abaa4732eb21b0fd0e64e5b24339b146fbd5b5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 21:42:48 +0100
Subject: [PATCH 113/118] fix: trying globalThis for service container

---
 packages/core/src/declarations.d.ts           |  3 ++-
 .../core/src/services/QuickFormServices.ts    | 26 ++++++++++++++-----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/declarations.d.ts b/packages/core/src/declarations.d.ts
index 64a965f..0d30359 100644
--- a/packages/core/src/declarations.d.ts
+++ b/packages/core/src/declarations.d.ts
@@ -7,4 +7,5 @@ declare global {
   interface Window {
     google?: typeof google;
   }
-}
\ No newline at end of file
+}
+
diff --git a/packages/core/src/services/QuickFormServices.ts b/packages/core/src/services/QuickFormServices.ts
index 8fcd6ca..144cd77 100644
--- a/packages/core/src/services/QuickFormServices.ts
+++ b/packages/core/src/services/QuickFormServices.ts
@@ -1,4 +1,4 @@
-
+
 import { ValidationResult } from "../model/ValidationResult";
 import { InputPropertiesTypes, QuestionModel, QuickFormModel } from "../model";
 import { QuickFormDefinition } from "../model";
@@ -26,18 +26,32 @@ export type QuickFormFeatures = {
     inputValidator?: InputValidator;
     logger?: IQuickFormLogger
 }
+declare global {
+    var __quickFormFeatures: QuickFormFeatures | undefined;
+}
+//let _quickFormFeatures: QuickFormFeatures = {
+//};
 
-let _quickFormFeatures: QuickFormFeatures = {
-};
+export function getOrCreateServiceContainer(keys?: Map<string, string>): QuickFormFeatures {
+    if (!globalThis.__quickFormFeatures) {
+        console.info(`✨ Created a service container ✨`);
+        globalThis.__quickFormFeatures = {};
+;
+    }
+    return globalThis.__quickFormFeatures;
+}
 
 export function registerQuickFormService<Key extends keyof QuickFormFeatures>(name: Key, instance: (QuickFormFeatures)[Key]) {
-    _quickFormFeatures[name] = instance;
+    let services = getOrCreateServiceContainer();
+    services[name] = instance;
 }
 
 export function resolveQuickFormService<Key extends keyof QuickFormFeatures>(name: Key) {
-    let f = _quickFormFeatures[name];
+
+    let services = getOrCreateServiceContainer();
+    let f = services[name];
     if (!f)
-        throw new Error(`'${name}' was not registered, registred keys: ${Object.keys(_quickFormFeatures)}`);
+        throw new Error(`'${name}' was not registered, registred keys: ${Object.keys(services)}`);
     return f as Required<QuickFormFeatures>[Key];
 }
 

From bc2bac260f948c2e1d0188fb838076086f1c7b76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 22:13:22 +0100
Subject: [PATCH 114/118] fix: cant have a static resolved service, blocks
 compiling if its not registered yet

---
 .../core/src/state/action-handlers/QuestionActionHandler.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/state/action-handlers/QuestionActionHandler.ts b/packages/core/src/state/action-handlers/QuestionActionHandler.ts
index aa7805a..f297701 100644
--- a/packages/core/src/state/action-handlers/QuestionActionHandler.ts
+++ b/packages/core/src/state/action-handlers/QuestionActionHandler.ts
@@ -6,7 +6,7 @@ import { QuickformState } from "../QuickformState";
 import { ValidationResult } from "../../model/ValidationResult";
 
 export class QuestionActionHandler {
-    private static inputValidator = resolveQuickFormService("inputValidator");
+   // private static inputValidator = resolveQuickFormService("inputValidator");
 
     //static findSlideIdxAndQuestionIdx = (state: QuickformState, logicalName: string): { slideIndex: number; questionIndex: number } => {
     //    if (state.isSubmitSlide)
@@ -111,7 +111,7 @@ export class QuestionActionHandler {
                 validatedOutput: ''
             }
         }
-        return await QuestionActionHandler.inputValidator(questionRef, state);
+        return await resolveQuickFormService("inputValidator")(questionRef, state);
     }
     
 }
\ No newline at end of file

From 442613916c39b202e65f1180b4490eeca00df118 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Thu, 14 Nov 2024 22:34:15 +0100
Subject: [PATCH 115/118] fix: react needs to be imported

---
 packages/core/src/components/container/QuickFormContainer.tsx | 1 +
 packages/core/src/components/icons/IconResolver.tsx           | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/container/QuickFormContainer.tsx b/packages/core/src/components/container/QuickFormContainer.tsx
index efe8132..ab389d0 100644
--- a/packages/core/src/components/container/QuickFormContainer.tsx
+++ b/packages/core/src/components/container/QuickFormContainer.tsx
@@ -2,6 +2,7 @@
 import { makeStyles, mergeClasses, shorthands } from "@griffel/react"
 import { CSSProperties, PropsWithChildren } from "react";
 import { quickformtokens } from "../../style/quickFormTokensDefinition";
+import React from "react";
 
 const useQuickFormContainerStyles = makeStyles({
     root: {
diff --git a/packages/core/src/components/icons/IconResolver.tsx b/packages/core/src/components/icons/IconResolver.tsx
index 2f19077..d54f72d 100644
--- a/packages/core/src/components/icons/IconResolver.tsx
+++ b/packages/core/src/components/icons/IconResolver.tsx
@@ -4,7 +4,7 @@ import { UserIcon } from "./UserIcon";
 import { IconProps } from "./iconProps";
 import { Checkmark } from '../icons/Checkmark';
 import { ChevronRight } from "./ChevronRight";
-
+import React from "react";
 export enum IconEnum {
     None = "None",
     Email = "Email",

From 8c5a40e8fb8c32358ef215cf2eb8a001151f0a77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Fri, 15 Nov 2024 06:57:27 +0100
Subject: [PATCH 116/118] fix: exported QuestionJsonModel

---
 packages/core/src/components/icons/IconResolver.tsx | 4 ++--
 packages/core/src/model/index.ts                    | 1 +
 packages/core/tsconfig.json                         | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/icons/IconResolver.tsx b/packages/core/src/components/icons/IconResolver.tsx
index d54f72d..28215ad 100644
--- a/packages/core/src/components/icons/IconResolver.tsx
+++ b/packages/core/src/components/icons/IconResolver.tsx
@@ -2,9 +2,9 @@ import { EmailIcon } from "./EmailIcon";
 import { TelephoneIcon } from "./TelephoneIcon";
 import { UserIcon } from "./UserIcon";
 import { IconProps } from "./iconProps";
-import { Checkmark } from '../icons/Checkmark';
+import { Checkmark } from './Checkmark';
 import { ChevronRight } from "./ChevronRight";
-import React from "react";
+
 export enum IconEnum {
     None = "None",
     Email = "Email",
diff --git a/packages/core/src/model/index.ts b/packages/core/src/model/index.ts
index ad0af6d..4d94637 100644
--- a/packages/core/src/model/index.ts
+++ b/packages/core/src/model/index.ts
@@ -10,4 +10,5 @@ export * from "./ValidationResult";
 
 
 export type { QuickFormDefinition } from "./json-definitions/QuickFormDefinition";
+export type { QuestionJsonModel } from "./json-definitions/JsonDataModels";
 
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
index a21a1b3..ffd67b3 100644
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@@ -16,7 +16,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "baseUrl": "./",
     "paths": {},
     "rootDirs": [

From 28acc5d29c7b8be739dce819e22740ca89e019a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Sat, 16 Nov 2024 22:21:42 +0100
Subject: [PATCH 117/118] fix: iconenum was not exported properly

---
 packages/core/package.json                                  | 4 +++-
 packages/core/src/components/icons/index.ts                 | 2 +-
 packages/core/src/components/index.ts                       | 2 +-
 .../dropdown-select-option/DropdownSelectOption.tsx         | 6 +++---
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 5b43c57..e823a49 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -5,7 +5,9 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "src/services/index.ts"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
diff --git a/packages/core/src/components/icons/index.ts b/packages/core/src/components/icons/index.ts
index 7c1ca1e..36a09c4 100644
--- a/packages/core/src/components/icons/index.ts
+++ b/packages/core/src/components/icons/index.ts
@@ -8,4 +8,4 @@ export { ImArrowRightIcon } from "./ImArrowRightIcon";
 export { RightArrow } from "./RightArrow";
 export { UserIcon } from "./UserIcon";
 export type { IconProps } from "./iconProps";
-export { type IconEnum, IconResolver } from "./IconResolver";
\ No newline at end of file
+export { IconEnum, IconResolver } from "./IconResolver";
\ No newline at end of file
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
index 84a9ce8..e034f5c 100644
--- a/packages/core/src/components/index.ts
+++ b/packages/core/src/components/index.ts
@@ -18,5 +18,5 @@ export { QuickFormContainer } from "./container/QuickFormContainer";
 export { ModernQuickFormContainer } from "./modern-container/ModernQuickformContainer";
 export { SlideRenderer } from "./renderers/slide-renderer/SlideRenderer";
 export { QuestionHeading } from "./question/components/QuestionHeading";
-export { IconResolver, type IconEnum } from "./icons";
+export { IconResolver, IconEnum } from "./icons";
 // import "./question/input-types";
diff --git a/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx b/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
index 3f59da9..aa84a8b 100644
--- a/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
+++ b/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
@@ -4,7 +4,7 @@ import styles from "./DropdownSelectOption.module.css";
 import { makeStyles, mergeClasses } from "@griffel/react";
 import { Checkmark } from "@eavfw/quickform-core/src/components/icons";
 import { shorthands } from "@fluentui/react-components";
-import { quickformtokens } from "@eavfw/quickform-core";
+import { quickformtokens, IconResolver } from "@eavfw/quickform-core";
 
 type DropdownSelectOptionProps = {
     readonly isSelected?: boolean;
@@ -62,8 +62,8 @@ export function DropdownSelectOption({
             onClick={onClick}
         >
             {children}
-            {isSelected && (
-                <Checkmark style={{display:"flex"}} color={quickformtokens.onSurface} size={"2rem"} />)}
+            {isSelected && <IconResolver icon="Checkmark" color={quickformtokens.onSurface} size={"2rem"} />}
+                
         </span>
     );
 }

From fe8042f5188c5f3ef1900317d4057504c53041f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Mon, 18 Nov 2024 15:26:37 +0100
Subject: [PATCH 118/118] fix: typo on propertyname

---
 .../dropdown-select-option/DropdownSelectOption.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx b/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
index aa84a8b..2c378c0 100644
--- a/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
+++ b/packages/inputs/select/src/dropdown-options-list/dropdown-select-option/DropdownSelectOption.tsx
@@ -62,7 +62,7 @@ export function DropdownSelectOption({
             onClick={onClick}
         >
             {children}
-            {isSelected && <IconResolver icon="Checkmark" color={quickformtokens.onSurface} size={"2rem"} />}
+            {isSelected && <IconResolver type="Checkmark" color={quickformtokens.onSurface} size={"2rem"} />}
                 
         </span>
     );