@lmb-it/kitsconcerto-native 0.1.236

package/form-renderer/components/FormRenderer/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../src/form-renderer/components/FormRenderer/index.native.tsx"],"sourcesContent":["// components/FormRenderer.tsx\n\nimport React, {useCallback, useEffect, useMemo, useState} from 'react';\nimport type {Control, FieldValues, UseFormGetValues} from 'react-hook-form';\nimport type {GroupFieldConfigs, IFormElement} from '@lmb-it/kitsconcerto-types';\nimport {FieldWrapper} from '../layout/FieldWrapper';\nimport {KeyboardNavContext, useKeyboardNavProvider} from '../../../hooks/useKeyboardNavigation';\n\n// Import all your \"dumb\" field components\nimport {\n    Checkboxes,\n    ColorPicker,\n    CombinedElement,\n    ContainerElement,\n    DateField,\n    FileUploader,\n    Group,\n    InputNumber,\n    InputText,\n    ListBox,\n    Location,\n    NormalSelect,\n    ObjectElement,\n    Password,\n    Phone,\n    RadiusPicker,\n    Radios,\n    Select,\n    Switch,\n    TagsSelect,\n    Textarea,\n    TreeSelect\n} from '../fields';\nimport {Grid, GridItem} from \"../../../_compat\";\nimport type {IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\n// ... import all other field components\n\ninterface FormRendererProps<T extends FieldValues> extends GroupFieldConfigs<T> {\n    elements: IFormElement<T>[];\n    control: Control<T>;\n    getValues: UseFormGetValues<T>;\n    parentPath?: string; // ✨ Pass down the parent path for nesting\n    grid?: IStyleClasses;\n    focusedField?: string;\n    setFocusedField: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const FormRenderer = <T extends FieldValues>({\n                                                        elements,\n                                                        control,\n                                                        getValues,\n                                                        groupField,\n                                                        grid = {},\n                                                        parentPath = '',\n                                                        focusedField, setFocusedField\n                                                    }: FormRendererProps<T>) => {\n\n    const [gridItemProps, setGridItemProps] = useState<Record<string, string>>({})\n\n    // --- Keyboard navigation ---\n    const TEXT_TYPES = ['Text', 'Email', 'Number', 'Password', 'Phone', 'Textarea'];\n    const textFieldIds = useMemo(() => {\n        return elements\n            .filter((el) => TEXT_TYPES.includes(el.type))\n            .map((el) => `${parentPath}${el.id as string}`);\n    }, [elements, parentPath]);\n\n    const keyboardNavCtx = useKeyboardNavProvider();\n\n    useEffect(() => {\n        keyboardNavCtx.setElementsOrder(textFieldIds);\n    }, [textFieldIds]);\n\n    const getElement = useCallback((elementType: string) => {\n\n        switch (elementType) {\n\n            case 'Email':\n            case 'Text':\n                return InputText;\n            case 'Number':\n                return InputNumber;\n            case 'Password':\n                return Password;\n            case 'Location':\n                return Location;\n            case 'Phone':\n                return Phone\n            case 'Date':\n                return DateField\n            case 'ColorPicker':\n                return ColorPicker\n            case 'RadiusPicker':\n                return RadiusPicker\n            case 'Radios':\n                return Radios\n            case 'Textarea':\n                return Textarea\n            case 'Image':\n            case 'File':\n                return FileUploader\n            case 'Switch':\n                return Switch\n            case 'Checkbox':\n                return Checkboxes\n            case 'Select':\n                return NormalSelect\n            case 'TreeSelect':\n                return TreeSelect\n            case 'Tags':\n                return TagsSelect\n            case 'ListBox':\n                return ListBox\n            case 'Multiselect':\n                return Select\n            case 'Group':\n                return Group\n            case 'Object':\n                return ObjectElement\n            case 'Container':\n                return ContainerElement\n            case 'Combined':\n                return CombinedElement\n            // default:\n            //     return <Flex/>;\n        }\n    }, []);\n\n\n    return (\n        <KeyboardNavContext.Provider value={keyboardNavCtx}>\n            <Grid\n                columns={12}\n                rowGap={6}\n                columnGap={8}\n            >\n                {elements.map((element) => {\n\n                    const FieldComponent = getElement(element.type);\n\n                    const elementId = `${parentPath}${element.id as string}`;\n                    const resolvedElement = elementId !== element.id ? { ...element, id: elementId } : element;\n\n\n                    if (!FieldComponent) {\n                        console.warn(`No component found for element type: \"${resolvedElement.type}\"`);\n                        return null;\n                    }\n\n                    const colSpan = parseInt(gridItemProps[elementId] ?? '12', 10);\n\n                    return (\n                        <GridItem key={elementId} id={elementId} colSpan={colSpan}>\n                            <FieldWrapper\n                                key={elementId}\n                                element={resolvedElement}\n                                control={control}\n                                grid={grid}\n                                groupField={groupField}\n                                getValues={getValues}\n                                focusedField={focusedField}\n                                setFocusedField={setFocusedField}\n                                onGridChange={(value) => {\n                                    if (value != gridItemProps[elementId]) {\n                                        setGridItemProps(prevState => ({\n                                            ...prevState,\n                                            [elementId]: value\n                                        }));\n                                    }\n                                }}\n\n\n                            >\n                                {(props) => <FieldComponent\n                                    groupField={groupField}\n                                    element={resolvedElement}\n                                    control={control}\n                                    getValues={getValues}\n                                    focusedField={focusedField}\n                                    setFocusedField={setFocusedField}\n                                    fieldLogic={props}\n\n                                />}\n                            </FieldWrapper>\n                        </GridItem>\n                    );\n                })}\n            </Grid>\n        </KeyboardNavContext.Provider>\n    );\n};\n"],"names":["useState","useMemo","useKeyboardNavProvider","useEffect","useCallback","InputText","InputNumber","Password","Location","Phone","DateField","ColorPicker","RadiusPicker","Radios","Textarea","FileUploader","Switch","Checkboxes","NormalSelect","TreeSelect","TagsSelect","ListBox","Select","Group","ObjectElement","ContainerElement","CombinedElement","jsx","KeyboardNavContext","Grid","GridItem","FieldWrapper"],"mappings":"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"}

package/form-renderer/components/FormRenderer/index.js

@@ -0,0 +1,149 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import { FieldWrapper } from '../layout/FieldWrapper.js';
+import { useKeyboardNavProvider, KeyboardNavContext } from '../../../hooks/useKeyboardNavigation.js';
+import { Select } from '../fields/Select/index.js';
+import { InputText } from '../fields/InputText/index.js';
+import { InputNumber } from '../fields/InputNumber/index.js';
+import { Password } from '../fields/Password/index.js';
+import { Radios } from '../fields/Radios/index.js';
+import { Checkboxes } from '../fields/Checkboxes/index.js';
+import { Textarea } from '../fields/Textarea/index.js';
+import { FileUploader } from '../fields/FileUploader/index.js';
+import { Switch } from '../fields/Switch/index.js';
+import { Phone } from '../fields/Phone/index.js';
+import { Container } from '../fields/Container/index.js';
+import { DateField } from '../fields/DateField/index.js';
+import { Location } from '../fields/Location/index.js';
+import { ColorPicker } from '../fields/ColorPicker/index.js';
+import { RadiusPicker } from '../fields/RadiusPicker/index.js';
+import { Group } from '../fields/Group/index.js';
+import { ObjectElement } from '../fields/Object/index.js';
+import { CombinedElement } from '../fields/Combined/index.js';
+import KitsGrid from '../../../layout/Grid/native/KitsGrid.js';
+import KitsGridItem from '../../../layout/GridItem/native/KitsGridItem.js';
+
+const FormRenderer = ({
+  elements,
+  control,
+  getValues,
+  groupField,
+  grid = {},
+  parentPath = "",
+  focusedField,
+  setFocusedField
+}) => {
+  const [gridItemProps, setGridItemProps] = useState({});
+  const TEXT_TYPES = ["Text", "Email", "Number", "Password", "Phone", "Textarea"];
+  const textFieldIds = useMemo(() => {
+    return elements.filter((el) => TEXT_TYPES.includes(el.type)).map((el) => `${parentPath}${el.id}`);
+  }, [elements, parentPath]);
+  const keyboardNavCtx = useKeyboardNavProvider();
+  useEffect(() => {
+    keyboardNavCtx.setElementsOrder(textFieldIds);
+  }, [textFieldIds]);
+  const getElement = useCallback((elementType) => {
+    switch (elementType) {
+      case "Email":
+      case "Text":
+        return InputText;
+      case "Number":
+        return InputNumber;
+      case "Password":
+        return Password;
+      case "Location":
+        return Location;
+      case "Phone":
+        return Phone;
+      case "Date":
+        return DateField;
+      case "ColorPicker":
+        return ColorPicker;
+      case "RadiusPicker":
+        return RadiusPicker;
+      case "Radios":
+        return Radios;
+      case "Textarea":
+        return Textarea;
+      case "Image":
+      case "File":
+        return FileUploader;
+      case "Switch":
+        return Switch;
+      case "Checkbox":
+        return Checkboxes;
+      case "Select":
+        return Select;
+      case "TreeSelect":
+        return Select;
+      case "Tags":
+        return Select;
+      case "ListBox":
+        return Select;
+      case "Multiselect":
+        return Select;
+      case "Group":
+        return Group;
+      case "Object":
+        return ObjectElement;
+      case "Container":
+        return Container;
+      case "Combined":
+        return CombinedElement;
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(KeyboardNavContext.Provider, { value: keyboardNavCtx, children: /* @__PURE__ */ jsx(
+    KitsGrid,
+    {
+      columns: 12,
+      rowGap: 6,
+      columnGap: 8,
+      children: elements.map((element) => {
+        const FieldComponent = getElement(element.type);
+        const elementId = `${parentPath}${element.id}`;
+        const resolvedElement = elementId !== element.id ? { ...element, id: elementId } : element;
+        if (!FieldComponent) {
+          console.warn(`No component found for element type: "${resolvedElement.type}"`);
+          return null;
+        }
+        const colSpan = parseInt(gridItemProps[elementId] ?? "12", 10);
+        return /* @__PURE__ */ jsx(KitsGridItem, { id: elementId, colSpan, children: /* @__PURE__ */ jsx(
+          FieldWrapper,
+          {
+            element: resolvedElement,
+            control,
+            grid,
+            groupField,
+            getValues,
+            focusedField,
+            setFocusedField,
+            onGridChange: (value) => {
+              if (value != gridItemProps[elementId]) {
+                setGridItemProps((prevState) => ({
+                  ...prevState,
+                  [elementId]: value
+                }));
+              }
+            },
+            children: (props) => /* @__PURE__ */ jsx(
+              FieldComponent,
+              {
+                groupField,
+                element: resolvedElement,
+                control,
+                getValues,
+                focusedField,
+                setFocusedField,
+                fieldLogic: props
+              }
+            )
+          },
+          elementId
+        ) }, elementId);
+      })
+    }
+  ) });
+};
+
+export { FormRenderer };
+//# sourceMappingURL=index.js.map

package/form-renderer/components/FormRenderer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/form-renderer/components/FormRenderer/index.native.tsx"],"sourcesContent":["// components/FormRenderer.tsx\n\nimport React, {useCallback, useEffect, useMemo, useState} from 'react';\nimport type {Control, FieldValues, UseFormGetValues} from 'react-hook-form';\nimport type {GroupFieldConfigs, IFormElement} from '@lmb-it/kitsconcerto-types';\nimport {FieldWrapper} from '../layout/FieldWrapper';\nimport {KeyboardNavContext, useKeyboardNavProvider} from '../../../hooks/useKeyboardNavigation';\n\n// Import all your \"dumb\" field components\nimport {\n    Checkboxes,\n    ColorPicker,\n    CombinedElement,\n    ContainerElement,\n    DateField,\n    FileUploader,\n    Group,\n    InputNumber,\n    InputText,\n    ListBox,\n    Location,\n    NormalSelect,\n    ObjectElement,\n    Password,\n    Phone,\n    RadiusPicker,\n    Radios,\n    Select,\n    Switch,\n    TagsSelect,\n    Textarea,\n    TreeSelect\n} from '../fields';\nimport {Grid, GridItem} from \"../../../_compat\";\nimport type {IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\n// ... import all other field components\n\ninterface FormRendererProps<T extends FieldValues> extends GroupFieldConfigs<T> {\n    elements: IFormElement<T>[];\n    control: Control<T>;\n    getValues: UseFormGetValues<T>;\n    parentPath?: string; // ✨ Pass down the parent path for nesting\n    grid?: IStyleClasses;\n    focusedField?: string;\n    setFocusedField: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const FormRenderer = <T extends FieldValues>({\n                                                        elements,\n                                                        control,\n                                                        getValues,\n                                                        groupField,\n                                                        grid = {},\n                                                        parentPath = '',\n                                                        focusedField, setFocusedField\n                                                    }: FormRendererProps<T>) => {\n\n    const [gridItemProps, setGridItemProps] = useState<Record<string, string>>({})\n\n    // --- Keyboard navigation ---\n    const TEXT_TYPES = ['Text', 'Email', 'Number', 'Password', 'Phone', 'Textarea'];\n    const textFieldIds = useMemo(() => {\n        return elements\n            .filter((el) => TEXT_TYPES.includes(el.type))\n            .map((el) => `${parentPath}${el.id as string}`);\n    }, [elements, parentPath]);\n\n    const keyboardNavCtx = useKeyboardNavProvider();\n\n    useEffect(() => {\n        keyboardNavCtx.setElementsOrder(textFieldIds);\n    }, [textFieldIds]);\n\n    const getElement = useCallback((elementType: string) => {\n\n        switch (elementType) {\n\n            case 'Email':\n            case 'Text':\n                return InputText;\n            case 'Number':\n                return InputNumber;\n            case 'Password':\n                return Password;\n            case 'Location':\n                return Location;\n            case 'Phone':\n                return Phone\n            case 'Date':\n                return DateField\n            case 'ColorPicker':\n                return ColorPicker\n            case 'RadiusPicker':\n                return RadiusPicker\n            case 'Radios':\n                return Radios\n            case 'Textarea':\n                return Textarea\n            case 'Image':\n            case 'File':\n                return FileUploader\n            case 'Switch':\n                return Switch\n            case 'Checkbox':\n                return Checkboxes\n            case 'Select':\n                return NormalSelect\n            case 'TreeSelect':\n                return TreeSelect\n            case 'Tags':\n                return TagsSelect\n            case 'ListBox':\n                return ListBox\n            case 'Multiselect':\n                return Select\n            case 'Group':\n                return Group\n            case 'Object':\n                return ObjectElement\n            case 'Container':\n                return ContainerElement\n            case 'Combined':\n                return CombinedElement\n            // default:\n            //     return <Flex/>;\n        }\n    }, []);\n\n\n    return (\n        <KeyboardNavContext.Provider value={keyboardNavCtx}>\n            <Grid\n                columns={12}\n                rowGap={6}\n                columnGap={8}\n            >\n                {elements.map((element) => {\n\n                    const FieldComponent = getElement(element.type);\n\n                    const elementId = `${parentPath}${element.id as string}`;\n                    const resolvedElement = elementId !== element.id ? { ...element, id: elementId } : element;\n\n\n                    if (!FieldComponent) {\n                        console.warn(`No component found for element type: \"${resolvedElement.type}\"`);\n                        return null;\n                    }\n\n                    const colSpan = parseInt(gridItemProps[elementId] ?? '12', 10);\n\n                    return (\n                        <GridItem key={elementId} id={elementId} colSpan={colSpan}>\n                            <FieldWrapper\n                                key={elementId}\n                                element={resolvedElement}\n                                control={control}\n                                grid={grid}\n                                groupField={groupField}\n                                getValues={getValues}\n                                focusedField={focusedField}\n                                setFocusedField={setFocusedField}\n                                onGridChange={(value) => {\n                                    if (value != gridItemProps[elementId]) {\n                                        setGridItemProps(prevState => ({\n                                            ...prevState,\n                                            [elementId]: value\n                                        }));\n                                    }\n                                }}\n\n\n                            >\n                                {(props) => <FieldComponent\n                                    groupField={groupField}\n                                    element={resolvedElement}\n                                    control={control}\n                                    getValues={getValues}\n                                    focusedField={focusedField}\n                                    setFocusedField={setFocusedField}\n                                    fieldLogic={props}\n\n                                />}\n                            </FieldWrapper>\n                        </GridItem>\n                    );\n                })}\n            </Grid>\n        </KeyboardNavContext.Provider>\n    );\n};\n"],"names":["NormalSelect","TreeSelect","TagsSelect","ListBox","ContainerElement","Grid","GridItem"],"mappings":"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"}

package/form-renderer/components/SubmitButton.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Button_native = require('../../components/Button/Button.cjs');
+
+const SubmitButton = ({ isSubmitting, handleSubmit, submitButtonProps, formMethods }) => {
+  if (typeof submitButtonProps === "function") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: submitButtonProps(handleSubmit, isSubmitting, formMethods) });
+  }
+  if (React.isValidElement(submitButtonProps)) {
+    return submitButtonProps;
+  }
+  const props = {
+    label: "Submit",
+    isLoadingText: "Please Wait...",
+    ...submitButtonProps && typeof submitButtonProps === "object" ? submitButtonProps : {}
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button_native.Button,
+    {
+      ...props,
+      onClick: handleSubmit,
+      loading: isSubmitting,
+      disabled: isSubmitting
+    }
+  );
+};
+
+exports.SubmitButton = SubmitButton;
+//# sourceMappingURL=SubmitButton.cjs.map

package/form-renderer/components/SubmitButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubmitButton.cjs","sources":["../../../../src/form-renderer/components/SubmitButton.tsx"],"sourcesContent":["import React, {isValidElement} from 'react';\nimport {Button} from \"../../_compat\";\nimport type {UseFormReturn} from \"react-hook-form\";\nimport type {IButtonProps, CustomSubmitButtonProps} from \"@lmb-it/kitsconcerto-types\";\n\ninterface SubmitButtonProps {\n    isSubmitting: boolean;\n    handleSubmit: () => void;\n    submitButtonProps?: CustomSubmitButtonProps;\n    formMethods: UseFormReturn<any>;\n}\n\nexport const SubmitButton = ({isSubmitting, handleSubmit, submitButtonProps, formMethods}: SubmitButtonProps) => {\n    // Function → render prop\n    if (typeof submitButtonProps === \"function\") {\n        return <>{submitButtonProps(handleSubmit, isSubmitting, formMethods)}</>;\n    }\n\n    // ReactElement → render directly\n    if (isValidElement(submitButtonProps)) {\n        return submitButtonProps;\n    }\n\n    // Object or undefined → merge with defaults and render Button\n    // NOTE: severity intentionally omitted — the underlying <Button> defaults\n    // to 'brand', which means the form's primary CTA picks up the configured\n    // theme primary color (e.g. teal in the AlphaMatch standalone theme)\n    // without each consumer having to pass `severity: 'brand'` explicitly.\n    // Was previously `severity: 'secondary'` which produced a grey button on\n    // every form regardless of theme — non-standard for a primary action.\n    const props: Omit<IButtonProps<any>, \"onClick\"> = {\n        label: \"Submit\",\n        isLoadingText: \"Please Wait...\",\n        ...(submitButtonProps && typeof submitButtonProps === \"object\" ? submitButtonProps : {}),\n    };\n\n    return (\n        <Button\n            {...props}\n            onClick={handleSubmit}\n            loading={isSubmitting}\n            disabled={isSubmitting}\n        />\n    );\n};\n"],"names":["jsx","Fragment","isValidElement","Button"],"mappings":";;;;;;AAYO,MAAM,eAAe,CAAC,EAAC,cAAc,YAAA,EAAc,iBAAA,EAAmB,aAAW,KAAyB;AAE7G,EAAA,IAAI,OAAO,sBAAsB,UAAA,EAAY;AACzC,IAAA,uBAAOA,cAAA,CAAAC,mBAAA,EAAA,EAAG,QAAA,EAAA,iBAAA,CAAkB,YAAA,EAAc,YAAA,EAAc,WAAW,CAAA,EAAE,CAAA;AAAA,EACzE;AAGA,EAAA,IAAIC,oBAAA,CAAe,iBAAiB,CAAA,EAAG;AACnC,IAAA,OAAO,iBAAA;AAAA,EACX;AASA,EAAA,MAAM,KAAA,GAA4C;AAAA,IAC9C,KAAA,EAAO,QAAA;AAAA,IACP,aAAA,EAAe,gBAAA;AAAA,IACf,GAAI,iBAAA,IAAqB,OAAO,iBAAA,KAAsB,QAAA,GAAW,oBAAoB;AAAC,GAC1F;AAEA,EAAA,uBACIF,cAAA;AAAA,IAACG,oBAAA;AAAA,IAAA;AAAA,MACI,GAAG,KAAA;AAAA,MACJ,OAAA,EAAS,YAAA;AAAA,MACT,OAAA,EAAS,YAAA;AAAA,MACT,QAAA,EAAU;AAAA;AAAA,GACd;AAER;;;;"}

package/form-renderer/components/SubmitButton.js

@@ -0,0 +1,29 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
+import { Button } from '../../components/Button/Button.js';
+
+const SubmitButton = ({ isSubmitting, handleSubmit, submitButtonProps, formMethods }) => {
+  if (typeof submitButtonProps === "function") {
+    return /* @__PURE__ */ jsx(Fragment, { children: submitButtonProps(handleSubmit, isSubmitting, formMethods) });
+  }
+  if (isValidElement(submitButtonProps)) {
+    return submitButtonProps;
+  }
+  const props = {
+    label: "Submit",
+    isLoadingText: "Please Wait...",
+    ...submitButtonProps && typeof submitButtonProps === "object" ? submitButtonProps : {}
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      onClick: handleSubmit,
+      loading: isSubmitting,
+      disabled: isSubmitting
+    }
+  );
+};
+
+export { SubmitButton };
+//# sourceMappingURL=SubmitButton.js.map

package/form-renderer/components/SubmitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubmitButton.js","sources":["../../../../src/form-renderer/components/SubmitButton.tsx"],"sourcesContent":["import React, {isValidElement} from 'react';\nimport {Button} from \"../../_compat\";\nimport type {UseFormReturn} from \"react-hook-form\";\nimport type {IButtonProps, CustomSubmitButtonProps} from \"@lmb-it/kitsconcerto-types\";\n\ninterface SubmitButtonProps {\n    isSubmitting: boolean;\n    handleSubmit: () => void;\n    submitButtonProps?: CustomSubmitButtonProps;\n    formMethods: UseFormReturn<any>;\n}\n\nexport const SubmitButton = ({isSubmitting, handleSubmit, submitButtonProps, formMethods}: SubmitButtonProps) => {\n    // Function → render prop\n    if (typeof submitButtonProps === \"function\") {\n        return <>{submitButtonProps(handleSubmit, isSubmitting, formMethods)}</>;\n    }\n\n    // ReactElement → render directly\n    if (isValidElement(submitButtonProps)) {\n        return submitButtonProps;\n    }\n\n    // Object or undefined → merge with defaults and render Button\n    // NOTE: severity intentionally omitted — the underlying <Button> defaults\n    // to 'brand', which means the form's primary CTA picks up the configured\n    // theme primary color (e.g. teal in the AlphaMatch standalone theme)\n    // without each consumer having to pass `severity: 'brand'` explicitly.\n    // Was previously `severity: 'secondary'` which produced a grey button on\n    // every form regardless of theme — non-standard for a primary action.\n    const props: Omit<IButtonProps<any>, \"onClick\"> = {\n        label: \"Submit\",\n        isLoadingText: \"Please Wait...\",\n        ...(submitButtonProps && typeof submitButtonProps === \"object\" ? submitButtonProps : {}),\n    };\n\n    return (\n        <Button\n            {...props}\n            onClick={handleSubmit}\n            loading={isSubmitting}\n            disabled={isSubmitting}\n        />\n    );\n};\n"],"names":[],"mappings":";;;;AAYO,MAAM,eAAe,CAAC,EAAC,cAAc,YAAA,EAAc,iBAAA,EAAmB,aAAW,KAAyB;AAE7G,EAAA,IAAI,OAAO,sBAAsB,UAAA,EAAY;AACzC,IAAA,uBAAO,GAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA,iBAAA,CAAkB,YAAA,EAAc,YAAA,EAAc,WAAW,CAAA,EAAE,CAAA;AAAA,EACzE;AAGA,EAAA,IAAI,cAAA,CAAe,iBAAiB,CAAA,EAAG;AACnC,IAAA,OAAO,iBAAA;AAAA,EACX;AASA,EAAA,MAAM,KAAA,GAA4C;AAAA,IAC9C,KAAA,EAAO,QAAA;AAAA,IACP,aAAA,EAAe,gBAAA;AAAA,IACf,GAAI,iBAAA,IAAqB,OAAO,iBAAA,KAAsB,QAAA,GAAW,oBAAoB;AAAC,GAC1F;AAEA,EAAA,uBACI,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACI,GAAG,KAAA;AAAA,MACJ,OAAA,EAAS,YAAA;AAAA,MACT,OAAA,EAAS,YAAA;AAAA,MACT,QAAA,EAAU;AAAA;AAAA,GACd;AAER;;;;"}

package/form-renderer/components/fields/Checkboxes/index.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../../../layout/Flex/index.cjs');
+var index$1 = require('../../../../form/controls/Checkbox/index.cjs');
+
+const Checkboxes = ({
+  element,
+  control,
+  getValues,
+  fieldLogic
+}) => {
+  const {
+    field,
+    fieldState,
+    label,
+    isDisabled,
+    isRequired,
+    helperText,
+    hideError,
+    list,
+    attached,
+    style: elementStyle,
+    slots
+  } = fieldLogic;
+  getValues();
+  const checkboxElement = element;
+  const { vertical } = checkboxElement;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      alignSelf: "center",
+      flexWrap: "wrap",
+      gap: 2,
+      flexDirection: vertical ? "column" : "row",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        index$1.default,
+        {
+          ...field,
+          onChange: (values) => {
+            field.onChange({
+              target: {
+                value: values
+              }
+            });
+          },
+          id: field.name,
+          label,
+          disabled: isDisabled,
+          required: isRequired,
+          invalid: fieldState.invalid,
+          hideError,
+          errors: fieldState.error?.message,
+          helperText,
+          item: list,
+          attached,
+          style: elementStyle?.input,
+          containerStyle: elementStyle?.container,
+          slots,
+          appearanceMode: vertical ? "vertical" : "horizontal"
+        }
+      )
+    }
+  );
+};
+
+exports.Checkboxes = Checkboxes;
+exports.default = Checkboxes;
+//# sourceMappingURL=index.cjs.map

package/form-renderer/components/fields/Checkboxes/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../../src/form-renderer/components/fields/Checkboxes/index.tsx"],"sourcesContent":["// components/fields/Checkboxes.tsx\n\nimport React from 'react';\nimport type {FieldValues} from 'react-hook-form';\n\nimport {Flex, KitsCheckboxes} from \"../../../../_compat\";\nimport type {ICheckbox, UseFieldLogicElementProps} from \"@lmb-it/kitsconcerto-types\";\nimport type {IRadioCheckboxListItem} from \"@lmb-it/kitsconcerto-types\";\n\n/**\n * Renders a group of checkboxes.\n */\nexport const Checkboxes = <T extends FieldValues>({\n                                                      element,\n                                                      control,\n                                                      getValues,\n                                                      fieldLogic,\n                                                  }: UseFieldLogicElementProps<T>) => {\n\n    // 1. The central hook provides all the necessary state and resolved props.\n    const {\n        field,\n        fieldState,\n        label,\n        isDisabled,\n        isRequired,\n        helperText,\n        hideError,\n        list,\n        attached,\n        style: elementStyle,\n        slots,\n    } = fieldLogic\n\n    const allFormValues = getValues();\n\n\n    // 2. Cast the element to its specific type to access unique properties.\n    const checkboxElement = element as ICheckbox<T>;\n    const {vertical} = checkboxElement;\n\n    // 3. The component is now only responsible for rendering the UI.\n    return (\n        <Flex\n            alignSelf={\"center\"}\n            flexWrap={\"wrap\"}\n            gap={2}\n            flexDirection={vertical ? \"column\" : \"row\"}\n        >\n            <KitsCheckboxes\n                // --- Core react-hook-form props ---\n                {...field} // Spreads `onChange`, `onBlur`, `value`, `ref`\n\n                onChange={(values)=>{\n                    // console.log(checked,event)\n                    field.onChange({\n                        target:{\n                            value:values\n                        }\n                    });\n                }}\n                id={field.name}\n                label={label}\n                disabled={isDisabled}\n                required={isRequired}\n                invalid={fieldState.invalid}\n                hideError={hideError}\n                errors={fieldState.error?.message}\n                helperText={helperText}\n                item={list as IRadioCheckboxListItem[]}\n                attached={attached}\n                style={elementStyle?.input}\n                containerStyle={elementStyle?.container}\n                slots={slots}\n                appearanceMode={vertical ? 'vertical' : 'horizontal'}\n            />\n        </Flex>\n    );\n};\n\nexport default Checkboxes;\n"],"names":["jsx","Flex","KitsCheckboxes"],"mappings":";;;;;;;;AAYO,MAAM,aAAa,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACJ,CAAA,KAAoC;AAGlF,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,YAAA;AAAA,IACP;AAAA,GACJ,GAAI,UAAA;AAEJ,EAAsB,SAAA;AAItB,EAAA,MAAM,eAAA,GAAkB,OAAA;AACxB,EAAA,MAAM,EAAC,UAAQ,GAAI,eAAA;AAGnB,EAAA,uBACIA,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACG,SAAA,EAAW,QAAA;AAAA,MACX,QAAA,EAAU,MAAA;AAAA,MACV,GAAA,EAAK,CAAA;AAAA,MACL,aAAA,EAAe,WAAW,QAAA,GAAW,KAAA;AAAA,MAErC,QAAA,kBAAAD,cAAA;AAAA,QAACE,eAAA;AAAA,QAAA;AAAA,UAEI,GAAG,KAAA;AAAA,UAEJ,QAAA,EAAU,CAAC,MAAA,KAAS;AAEhB,YAAA,KAAA,CAAM,QAAA,CAAS;AAAA,cACX,MAAA,EAAO;AAAA,gBACH,KAAA,EAAM;AAAA;AACV,aACH,CAAA;AAAA,UACL,CAAA;AAAA,UACA,IAAI,KAAA,CAAM,IAAA;AAAA,UACV,KAAA;AAAA,UACA,QAAA,EAAU,UAAA;AAAA,UACV,QAAA,EAAU,UAAA;AAAA,UACV,SAAS,UAAA,CAAW,OAAA;AAAA,UACpB,SAAA;AAAA,UACA,MAAA,EAAQ,WAAW,KAAA,EAAO,OAAA;AAAA,UAC1B,UAAA;AAAA,UACA,IAAA,EAAM,IAAA;AAAA,UACN,QAAA;AAAA,UACA,OAAO,YAAA,EAAc,KAAA;AAAA,UACrB,gBAAgB,YAAA,EAAc,SAAA;AAAA,UAC9B,KAAA;AAAA,UACA,cAAA,EAAgB,WAAW,UAAA,GAAa;AAAA;AAAA;AAC5C;AAAA,GACJ;AAER;;;;;"}

package/form-renderer/components/fields/Checkboxes/index.js

@@ -0,0 +1,66 @@
+import { jsx } from 'react/jsx-runtime';
+import Flex from '../../../../layout/Flex/index.js';
+import KitsCheckbox from '../../../../form/controls/Checkbox/index.js';
+
+const Checkboxes = ({
+  element,
+  control,
+  getValues,
+  fieldLogic
+}) => {
+  const {
+    field,
+    fieldState,
+    label,
+    isDisabled,
+    isRequired,
+    helperText,
+    hideError,
+    list,
+    attached,
+    style: elementStyle,
+    slots
+  } = fieldLogic;
+  getValues();
+  const checkboxElement = element;
+  const { vertical } = checkboxElement;
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      alignSelf: "center",
+      flexWrap: "wrap",
+      gap: 2,
+      flexDirection: vertical ? "column" : "row",
+      children: /* @__PURE__ */ jsx(
+        KitsCheckbox,
+        {
+          ...field,
+          onChange: (values) => {
+            field.onChange({
+              target: {
+                value: values
+              }
+            });
+          },
+          id: field.name,
+          label,
+          disabled: isDisabled,
+          required: isRequired,
+          invalid: fieldState.invalid,
+          hideError,
+          errors: fieldState.error?.message,
+          helperText,
+          item: list,
+          attached,
+          style: elementStyle?.input,
+          containerStyle: elementStyle?.container,
+          slots,
+          appearanceMode: vertical ? "vertical" : "horizontal"
+        }
+      )
+    }
+  );
+};
+
+export { Checkboxes, Checkboxes as default };
+//# sourceMappingURL=index.js.map

package/form-renderer/components/fields/Checkboxes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/form-renderer/components/fields/Checkboxes/index.tsx"],"sourcesContent":["// components/fields/Checkboxes.tsx\n\nimport React from 'react';\nimport type {FieldValues} from 'react-hook-form';\n\nimport {Flex, KitsCheckboxes} from \"../../../../_compat\";\nimport type {ICheckbox, UseFieldLogicElementProps} from \"@lmb-it/kitsconcerto-types\";\nimport type {IRadioCheckboxListItem} from \"@lmb-it/kitsconcerto-types\";\n\n/**\n * Renders a group of checkboxes.\n */\nexport const Checkboxes = <T extends FieldValues>({\n                                                      element,\n                                                      control,\n                                                      getValues,\n                                                      fieldLogic,\n                                                  }: UseFieldLogicElementProps<T>) => {\n\n    // 1. The central hook provides all the necessary state and resolved props.\n    const {\n        field,\n        fieldState,\n        label,\n        isDisabled,\n        isRequired,\n        helperText,\n        hideError,\n        list,\n        attached,\n        style: elementStyle,\n        slots,\n    } = fieldLogic\n\n    const allFormValues = getValues();\n\n\n    // 2. Cast the element to its specific type to access unique properties.\n    const checkboxElement = element as ICheckbox<T>;\n    const {vertical} = checkboxElement;\n\n    // 3. The component is now only responsible for rendering the UI.\n    return (\n        <Flex\n            alignSelf={\"center\"}\n            flexWrap={\"wrap\"}\n            gap={2}\n            flexDirection={vertical ? \"column\" : \"row\"}\n        >\n            <KitsCheckboxes\n                // --- Core react-hook-form props ---\n                {...field} // Spreads `onChange`, `onBlur`, `value`, `ref`\n\n                onChange={(values)=>{\n                    // console.log(checked,event)\n                    field.onChange({\n                        target:{\n                            value:values\n                        }\n                    });\n                }}\n                id={field.name}\n                label={label}\n                disabled={isDisabled}\n                required={isRequired}\n                invalid={fieldState.invalid}\n                hideError={hideError}\n                errors={fieldState.error?.message}\n                helperText={helperText}\n                item={list as IRadioCheckboxListItem[]}\n                attached={attached}\n                style={elementStyle?.input}\n                containerStyle={elementStyle?.container}\n                slots={slots}\n                appearanceMode={vertical ? 'vertical' : 'horizontal'}\n            />\n        </Flex>\n    );\n};\n\nexport default Checkboxes;\n"],"names":["KitsCheckboxes"],"mappings":";;;;AAYO,MAAM,aAAa,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACJ,CAAA,KAAoC;AAGlF,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,YAAA;AAAA,IACP;AAAA,GACJ,GAAI,UAAA;AAEJ,EAAsB,SAAA;AAItB,EAAA,MAAM,eAAA,GAAkB,OAAA;AACxB,EAAA,MAAM,EAAC,UAAQ,GAAI,eAAA;AAGnB,EAAA,uBACI,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACG,SAAA,EAAW,QAAA;AAAA,MACX,QAAA,EAAU,MAAA;AAAA,MACV,GAAA,EAAK,CAAA;AAAA,MACL,aAAA,EAAe,WAAW,QAAA,GAAW,KAAA;AAAA,MAErC,QAAA,kBAAA,GAAA;AAAA,QAACA,YAAA;AAAA,QAAA;AAAA,UAEI,GAAG,KAAA;AAAA,UAEJ,QAAA,EAAU,CAAC,MAAA,KAAS;AAEhB,YAAA,KAAA,CAAM,QAAA,CAAS;AAAA,cACX,MAAA,EAAO;AAAA,gBACH,KAAA,EAAM;AAAA;AACV,aACH,CAAA;AAAA,UACL,CAAA;AAAA,UACA,IAAI,KAAA,CAAM,IAAA;AAAA,UACV,KAAA;AAAA,UACA,QAAA,EAAU,UAAA;AAAA,UACV,QAAA,EAAU,UAAA;AAAA,UACV,SAAS,UAAA,CAAW,OAAA;AAAA,UACpB,SAAA;AAAA,UACA,MAAA,EAAQ,WAAW,KAAA,EAAO,OAAA;AAAA,UAC1B,UAAA;AAAA,UACA,IAAA,EAAM,IAAA;AAAA,UACN,QAAA;AAAA,UACA,OAAO,YAAA,EAAc,KAAA;AAAA,UACrB,gBAAgB,YAAA,EAAc,SAAA;AAAA,UAC9B,KAAA;AAAA,UACA,cAAA,EAAgB,WAAW,UAAA,GAAa;AAAA;AAAA;AAC5C;AAAA,GACJ;AAER;;;;"}

package/form-renderer/components/fields/ColorPicker/index.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var index_native = require('../../../../form/inputs/ColorPicker/index.cjs');
+require('react');
+require('axios');
+
+const ColorPicker = ({
+  element,
+  control,
+  getValues,
+  fieldLogic
+}) => {
+  const {
+    field,
+    fieldState,
+    label,
+    isDisabled,
+    isRequired,
+    attached,
+    style: elementStyle,
+    slots
+  } = fieldLogic;
+  const colorPickerElement = element;
+  const { colorFormat, inline } = colorPickerElement;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index_native.default,
+    {
+      ...field,
+      id: field.name,
+      label,
+      disabled: isDisabled,
+      required: isRequired,
+      invalid: fieldState.invalid,
+      errors: fieldState.error?.message,
+      attached,
+      colorFormat,
+      inline,
+      style: elementStyle?.input,
+      containerStyle: elementStyle?.container,
+      slots
+    }
+  );
+};
+
+exports.ColorPicker = ColorPicker;
+exports.default = ColorPicker;
+//# sourceMappingURL=index.cjs.map

package/form-renderer/components/fields/ColorPicker/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../../src/form-renderer/components/fields/ColorPicker/index.tsx"],"sourcesContent":["// components/fields/ColorPicker.tsx\n\nimport React from 'react';\nimport type {FieldValues} from 'react-hook-form';\nimport type {IColorPicker, UseFieldLogicElementProps} from \"@lmb-it/kitsconcerto-types\";\nimport {KitsInputColorPicker} from \"../../../../_compat\";\n\n/**\n * Renders a color picker input.\n\n */\nexport const ColorPicker = <T extends FieldValues>({\n                                                       element,\n                                                       control,\n                                                       getValues,\n                                                       fieldLogic,\n                                                   }: UseFieldLogicElementProps<T>) => {\n\n    // 1. The central hook provides all the necessary state and resolved props.\n    const {\n        field,\n        fieldState,\n        label,\n        isDisabled,\n        isRequired,\n        attached,\n        style: elementStyle,\n        slots,\n    } = fieldLogic\n\n    // 2. Cast the element to its specific type to access unique properties.\n    const colorPickerElement = element as IColorPicker<T>;\n    const {colorFormat, inline} = colorPickerElement;\n\n    // 3. The component is now only responsible for rendering the UI.\n    return (\n        <KitsInputColorPicker\n            // --- Core react-hook-form props ---\n            {...field} // Spreads `onChange`, `onBlur`, `value`, `ref`\n\n            // --- Resolved props from useFieldLogic ---\n            id={field.name}\n            label={label}\n            disabled={isDisabled}\n            required={isRequired}\n            invalid={fieldState.invalid}\n            errors={fieldState.error?.message}\n            attached={attached}\n\n            // --- Props from the element definition ---\n            colorFormat={colorFormat}\n            inline={inline}\n            style={elementStyle?.input}\n            containerStyle={elementStyle?.container}\n            slots={slots}\n        />\n    );\n};\n\nexport default ColorPicker;\n"],"names":["jsx","KitsInputColorPicker"],"mappings":";;;;;;;;;AAWO,MAAM,cAAc,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACJ,CAAA,KAAoC;AAGnF,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,YAAA;AAAA,IACP;AAAA,GACJ,GAAI,UAAA;AAGJ,EAAA,MAAM,kBAAA,GAAqB,OAAA;AAC3B,EAAA,MAAM,EAAC,WAAA,EAAa,MAAA,EAAM,GAAI,kBAAA;AAG9B,EAAA,uBACIA,cAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MAEI,GAAG,KAAA;AAAA,MAGJ,IAAI,KAAA,CAAM,IAAA;AAAA,MACV,KAAA;AAAA,MACA,QAAA,EAAU,UAAA;AAAA,MACV,QAAA,EAAU,UAAA;AAAA,MACV,SAAS,UAAA,CAAW,OAAA;AAAA,MACpB,MAAA,EAAQ,WAAW,KAAA,EAAO,OAAA;AAAA,MAC1B,QAAA;AAAA,MAGA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAO,YAAA,EAAc,KAAA;AAAA,MACrB,gBAAgB,YAAA,EAAc,SAAA;AAAA,MAC9B;AAAA;AAAA,GACJ;AAER;;;;;"}

package/form-renderer/components/fields/ColorPicker/index.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import KitsInputColorPicker from '../../../../form/inputs/ColorPicker/index.js';
+import 'react';
+import 'axios';
+
+const ColorPicker = ({
+  element,
+  control,
+  getValues,
+  fieldLogic
+}) => {
+  const {
+    field,
+    fieldState,
+    label,
+    isDisabled,
+    isRequired,
+    attached,
+    style: elementStyle,
+    slots
+  } = fieldLogic;
+  const colorPickerElement = element;
+  const { colorFormat, inline } = colorPickerElement;
+  return /* @__PURE__ */ jsx(
+    KitsInputColorPicker,
+    {
+      ...field,
+      id: field.name,
+      label,
+      disabled: isDisabled,
+      required: isRequired,
+      invalid: fieldState.invalid,
+      errors: fieldState.error?.message,
+      attached,
+      colorFormat,
+      inline,
+      style: elementStyle?.input,
+      containerStyle: elementStyle?.container,
+      slots
+    }
+  );
+};
+
+export { ColorPicker, ColorPicker as default };
+//# sourceMappingURL=index.js.map

package/form-renderer/components/fields/ColorPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/form-renderer/components/fields/ColorPicker/index.tsx"],"sourcesContent":["// components/fields/ColorPicker.tsx\n\nimport React from 'react';\nimport type {FieldValues} from 'react-hook-form';\nimport type {IColorPicker, UseFieldLogicElementProps} from \"@lmb-it/kitsconcerto-types\";\nimport {KitsInputColorPicker} from \"../../../../_compat\";\n\n/**\n * Renders a color picker input.\n\n */\nexport const ColorPicker = <T extends FieldValues>({\n                                                       element,\n                                                       control,\n                                                       getValues,\n                                                       fieldLogic,\n                                                   }: UseFieldLogicElementProps<T>) => {\n\n    // 1. The central hook provides all the necessary state and resolved props.\n    const {\n        field,\n        fieldState,\n        label,\n        isDisabled,\n        isRequired,\n        attached,\n        style: elementStyle,\n        slots,\n    } = fieldLogic\n\n    // 2. Cast the element to its specific type to access unique properties.\n    const colorPickerElement = element as IColorPicker<T>;\n    const {colorFormat, inline} = colorPickerElement;\n\n    // 3. The component is now only responsible for rendering the UI.\n    return (\n        <KitsInputColorPicker\n            // --- Core react-hook-form props ---\n            {...field} // Spreads `onChange`, `onBlur`, `value`, `ref`\n\n            // --- Resolved props from useFieldLogic ---\n            id={field.name}\n            label={label}\n            disabled={isDisabled}\n            required={isRequired}\n            invalid={fieldState.invalid}\n            errors={fieldState.error?.message}\n            attached={attached}\n\n            // --- Props from the element definition ---\n            colorFormat={colorFormat}\n            inline={inline}\n            style={elementStyle?.input}\n            containerStyle={elementStyle?.container}\n            slots={slots}\n        />\n    );\n};\n\nexport default ColorPicker;\n"],"names":[],"mappings":";;;;;AAWO,MAAM,cAAc,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACJ,CAAA,KAAoC;AAGnF,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,YAAA;AAAA,IACP;AAAA,GACJ,GAAI,UAAA;AAGJ,EAAA,MAAM,kBAAA,GAAqB,OAAA;AAC3B,EAAA,MAAM,EAAC,WAAA,EAAa,MAAA,EAAM,GAAI,kBAAA;AAG9B,EAAA,uBACI,GAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MAEI,GAAG,KAAA;AAAA,MAGJ,IAAI,KAAA,CAAM,IAAA;AAAA,MACV,KAAA;AAAA,MACA,QAAA,EAAU,UAAA;AAAA,MACV,QAAA,EAAU,UAAA;AAAA,MACV,SAAS,UAAA,CAAW,OAAA;AAAA,MACpB,MAAA,EAAQ,WAAW,KAAA,EAAO,OAAA;AAAA,MAC1B,QAAA;AAAA,MAGA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAO,YAAA,EAAc,KAAA;AAAA,MACrB,gBAAgB,YAAA,EAAc,SAAA;AAAA,MAC9B;AAAA;AAAA,GACJ;AAER;;;;"}