@lmb-it/kitsconcerto-native 0.1.236

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

@@ -0,0 +1,86 @@
+import { jsx } from 'react/jsx-runtime';
+import { useFormContext } from 'react-hook-form';
+import FilePicker from '../../../../form/file-pickers/index.js';
+import 'react';
+import 'axios';
+import '../../../../contexts/DialogContext.js';
+import '../../../../form/selects/SelectContext.js';
+
+const FileUploader = ({
+  element,
+  control,
+  getValues,
+  fieldLogic
+}) => {
+  const { setError, clearErrors, getValues: getFormConfig } = useFormContext();
+  const outputFormat = getFormConfig().outputFormat || "Json";
+  const {
+    field,
+    fieldState,
+    label,
+    isDisabled,
+    isRequired,
+    helperText,
+    placeholder,
+    attached,
+    style: elementStyle,
+    slots
+  } = fieldLogic;
+  const fileElement = element;
+  const {
+    type,
+    multiple,
+    limit,
+    acceptedTypes,
+    maxFileSize,
+    minFileSize,
+    classicUploader,
+    children
+  } = fileElement;
+  const handleOnChange = (files, base64Data) => {
+    if (outputFormat === "FormData") {
+      field.onChange(multiple ? files : files[0]);
+    } else {
+      field.onChange(multiple ? base64Data : base64Data[0]);
+    }
+  };
+  const handleError = (errorMessage) => {
+    if (errorMessage === "clear") {
+      clearErrors(field.name);
+    } else {
+      setError(field.name, { type: "custom", message: errorMessage });
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    FilePicker,
+    {
+      id: field.name,
+      value: field.value,
+      onChange: handleOnChange,
+      onError: handleError,
+      label,
+      disabled: isDisabled,
+      required: isRequired,
+      invalid: fieldState.invalid,
+      errors: fieldState.error?.message,
+      helperText,
+      placeholder,
+      attached,
+      type,
+      multiple,
+      limit,
+      acceptedTypes,
+      maxFileSize,
+      minFileSize,
+      classicUploader,
+      isJsonOutput: outputFormat === "Json",
+      children,
+      style: elementStyle?.input,
+      containerStyle: elementStyle?.container,
+      slots
+    }
+  );
+};
+
+export { FileUploader, FileUploader as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/form-renderer/components/fields/FileUploader/index.tsx"],"sourcesContent":["// components/fields/FileUploader.tsx\n\nimport React from 'react';\nimport {type FieldValues, useFormContext} from 'react-hook-form';\nimport {KitsFilePicker} from \"../../../../_compat\";\nimport type {IFile, UseFieldLogicElementProps} from '@lmb-it/kitsconcerto-types';\n\n/**\n * Renders a file or image uploader.\n * It uses useFieldLogic for standard field state and useFormContext for form-level\n * configurations like outputFormat and error handling.\n */\nexport const FileUploader = <T extends FieldValues>({\n                                                        element,\n                                                        control,\n                                                        getValues,\n                                                        fieldLogic,\n                                                    }: UseFieldLogicElementProps<T>) => {\n\n    // 1. Get form-level context for special properties.\n    // We need to know the outputFormat to correctly structure the onChange payload.\n    // We also need setError and clearErrors for the custom onError handler.\n    const {setError, clearErrors, getValues: getFormConfig} = useFormContext();\n    const outputFormat = (getFormConfig() as any).outputFormat || 'Json'; // Get form's output format\n\n    // 2. Get field-level state and props from the central logic hook.\n    const {\n        field,\n        fieldState,\n        label,\n        isDisabled,\n        isRequired,\n        helperText,\n        placeholder,\n        attached,\n        style: elementStyle,\n        slots,\n    } = fieldLogic\n\n    // 3. Cast the element to its specific type to access unique properties.\n    const fileElement = element as IFile<T>;\n    const {\n        type,\n        multiple,\n        limit,\n        acceptedTypes,\n        maxFileSize,\n        minFileSize,\n        classicUploader,\n        children,\n    } = fileElement;\n\n    // 4. Define the specific handlers for this component.\n    const handleOnChange = (files: File[], base64Data: any[]) => {\n        if (outputFormat === 'FormData') {\n            field.onChange(multiple ? files : files[0]);\n        } else {\n            field.onChange(multiple ? base64Data : base64Data[0]);\n        }\n    };\n\n    const handleError = (errorMessage: string) => {\n        if (errorMessage === 'clear') {\n            clearErrors(field.name);\n        } else {\n            setError(field.name, {type: 'custom', message: errorMessage});\n        }\n    };\n\n    // 5. Render the \"dumb\" UI component with the resolved props.\n    return (\n        <KitsFilePicker\n            id={field.name}\n            value={field.value}\n            //@ts-ignore\n            onChange={handleOnChange}\n            onError={handleError}\n\n            // --- Resolved props ---\n            label={label}\n            disabled={isDisabled}\n            required={isRequired}\n            invalid={fieldState.invalid}\n            errors={fieldState.error?.message}\n            helperText={helperText}\n            placeholder={placeholder}\n            attached={attached}\n\n            // --- Props from element definition ---\n            type={type}\n            multiple={multiple}\n            limit={limit}\n            acceptedTypes={acceptedTypes}\n            maxFileSize={maxFileSize}\n            minFileSize={minFileSize}\n            classicUploader={classicUploader}\n            isJsonOutput={outputFormat === 'Json'}\n            children={children}\n            style={elementStyle?.input}\n            containerStyle={elementStyle?.container}\n            slots={slots}\n        />\n    );\n};\n\nexport default FileUploader;\n"],"names":["KitsFilePicker"],"mappings":";;;;;;;;AAYO,MAAM,eAAe,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACJ,CAAA,KAAoC;AAKpF,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAa,SAAA,EAAW,aAAA,KAAiB,cAAA,EAAe;AACzE,EAAA,MAAM,YAAA,GAAgB,aAAA,EAAc,CAAU,YAAA,IAAgB,MAAA;AAG9D,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,YAAA;AAAA,IACP;AAAA,GACJ,GAAI,UAAA;AAGJ,EAAA,MAAM,WAAA,GAAc,OAAA;AACpB,EAAA,MAAM;AAAA,IACF,IAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACJ,GAAI,WAAA;AAGJ,EAAA,MAAM,cAAA,GAAiB,CAAC,KAAA,EAAe,UAAA,KAAsB;AACzD,IAAA,IAAI,iBAAiB,UAAA,EAAY;AAC7B,MAAA,KAAA,CAAM,QAAA,CAAS,QAAA,GAAW,KAAA,GAAQ,KAAA,CAAM,CAAC,CAAC,CAAA;AAAA,IAC9C,CAAA,MAAO;AACH,MAAA,KAAA,CAAM,QAAA,CAAS,QAAA,GAAW,UAAA,GAAa,UAAA,CAAW,CAAC,CAAC,CAAA;AAAA,IACxD;AAAA,EACJ,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,YAAA,KAAyB;AAC1C,IAAA,IAAI,iBAAiB,OAAA,EAAS;AAC1B,MAAA,WAAA,CAAY,MAAM,IAAI,CAAA;AAAA,IAC1B,CAAA,MAAO;AACH,MAAA,QAAA,CAAS,MAAM,IAAA,EAAM,EAAC,MAAM,QAAA,EAAU,OAAA,EAAS,cAAa,CAAA;AAAA,IAChE;AAAA,EACJ,CAAA;AAGA,EAAA,uBACI,GAAA;AAAA,IAACA,UAAA;AAAA,IAAA;AAAA,MACG,IAAI,KAAA,CAAM,IAAA;AAAA,MACV,OAAO,KAAA,CAAM,KAAA;AAAA,MAEb,QAAA,EAAU,cAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MAGT,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,UAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MAGA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,aAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA,cAAc,YAAA,KAAiB,MAAA;AAAA,MAC/B,QAAA;AAAA,MACA,OAAO,YAAA,EAAc,KAAA;AAAA,MACrB,gBAAgB,YAAA,EAAc,SAAA;AAAA,MAC9B;AAAA;AAAA,GACJ;AAER;;;;"}

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

@@ -0,0 +1,189 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var index_native = require('../../../../form/helpers/FormContainer/index.cjs');
+var index_native$1 = require('../../FormRenderer/index.cjs');
+require('../../../../contexts/DialogContext.cjs');
+var useComponentDefaults = require('../../../../hooks/useComponentDefaults.cjs');
+var useResolvedElementStyles = require('../../../../hooks/useResolvedElementStyles.cjs');
+var helpers = require('../../../utils/helpers.cjs');
+require('yup');
+var index = require('../../../../layout/Flex/index.cjs');
+var index$1 = require('../../../../primitives/Box/index.cjs');
+
+const Group = ({
+  element,
+  control,
+  getValues,
+  groupField,
+  focusedField,
+  setFocusedField,
+  fieldLogic
+}) => {
+  const { isShown, label, elements, helperText: groupHelperText, fieldState, hideError, isRequired, slots } = fieldLogic;
+  const [_focusedField, _setFocusedField] = React.useState("");
+  const groupElement = element;
+  const { groupsSettings } = groupElement;
+  const resolvedGroupSlots = React.useMemo(() => {
+    const gs = groupElement.groupSlots;
+    if (!gs) return void 0;
+    if (typeof gs === "function") {
+      return gs(fieldLogic.watchedValues, fieldLogic.formContext.getValues(), fieldLogic.formContext, groupField);
+    }
+    return gs;
+  }, [groupElement.groupSlots, fieldLogic.watchedValues, fieldLogic.formContext, groupField]);
+  const { elementStyles: groupStyles } = useComponentDefaults.default("Group", {
+    slots: resolvedGroupSlots
+  });
+  const elStyles = useResolvedElementStyles.default(groupStyles);
+  const containerSlots = React.useMemo(() => helpers.flattenSlotStyles(slots), [slots]);
+  const fieldArray = reactHookForm.useFieldArray({
+    control,
+    name: element.id
+  });
+  const { fields, append, remove } = fieldArray;
+  const settings = React.useMemo(() => ({
+    grid: groupsSettings?.grid,
+    repeatable: {
+      minRepeats: groupsSettings?.repeatable?.minRepeats || 0,
+      maxRepeats: groupsSettings?.repeatable?.maxRepeats || Infinity,
+      plusButton: groupsSettings?.repeatable?.plusButton,
+      minusButton: groupsSettings?.repeatable?.minusButton
+    },
+    removeButtonRow: groupsSettings?.removeButtonRow
+  }), [groupsSettings]);
+  const createDefaultItem = () => {
+    const item = {};
+    elements?.forEach((el) => {
+      if ("displayOnly" in el && el.displayOnly) return;
+      if ("initialUri" in el) {
+        item[el.id] = el.initialUri;
+      } else if ("initialValue" in el && el.initialValue !== void 0) {
+        item[el.id] = el.initialValue;
+      }
+    });
+    return item;
+  };
+  const handleAppend = (count = 1) => {
+    const max = settings.repeatable.maxRepeats;
+    if (max && fields.length >= max) {
+      return;
+    }
+    const itemsToAdd = Array(count).fill(0).map(() => createDefaultItem());
+    append(itemsToAdd, { shouldFocus: true });
+  };
+  const handleRemove = (index) => {
+    if (fields.length > (settings.repeatable.minRepeats || 0)) {
+      remove(index);
+    }
+  };
+  React.useEffect(() => {
+    const generateGroupElements = () => {
+      const min = settings.repeatable.minRepeats || 0;
+      if (fields.length < min) {
+        const itemsToAppend = min - fields.length;
+        handleAppend(itemsToAppend);
+      }
+    };
+    const timer = setTimeout(generateGroupElements, 100);
+    return () => clearTimeout(timer);
+  }, [element.id, settings.repeatable.minRepeats]);
+  React.useImperativeHandle(groupsSettings?.ref, () => fieldArray, [fieldArray]);
+  const reBuildElements = React.useCallback((field, index) => {
+    return elements?.map((childElement) => {
+      const toArray = Object.entries(field);
+      const findField = toArray.find(([name]) => name == childElement.id);
+      return {
+        ...childElement,
+        initialValue: findField ? findField[1] : void 0
+      };
+    });
+  }, [element, elements]);
+  if (!isShown) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index_native.default,
+    {
+      id: element.id.toString(),
+      label,
+      helperText: groupHelperText,
+      errors: fieldState?.error?.message,
+      invalid: fieldState?.invalid,
+      hideError,
+      required: isRequired,
+      bare: true,
+      elementStyles: containerSlots,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        index.default,
+        {
+          w: "full",
+          flexDirection: "column",
+          gap: 6,
+          mb: 4,
+          style: elStyles.root || void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { style: elStyles.body || void 0, children: fields.map((field, index$2) => /* @__PURE__ */ jsxRuntime.jsxs(
+              index.default,
+              {
+                w: "full",
+                position: "relative",
+                flexDirection: "column",
+                rowGap: 6,
+                columnGap: 8,
+                style: elStyles.row || void 0,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    index_native$1.FormRenderer,
+                    {
+                      elements: reBuildElements(field, index$2),
+                      control,
+                      groupField: {
+                        index: index$2,
+                        name: element.id.toString(),
+                        // Use the path-arg form of getValues so a Group nested inside
+                        // an Object resolves correctly: the FormRenderer rewrites this
+                        // Group's id to a dotted path (e.g. "addressGroup.addresses"),
+                        // and getValues()[dottedKey] would be undefined (→ crash on
+                        // [index]). getValues(path) traverses the nesting instead.
+                        values: getValues(element.id)?.[index$2],
+                        append: handleAppend,
+                        remove: () => handleRemove(index$2)
+                      },
+                      getValues,
+                      parentPath: `${element.id.toString()}.${index$2}.`,
+                      focusedField: focusedField ?? _focusedField,
+                      setFocusedField: setFocusedField ?? _setFocusedField,
+                      grid: groupsSettings?.grid
+                    }
+                  ),
+                  settings.removeButtonRow && /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { style: { zIndex: 1, ...elStyles.removeButton || {} }, children: settings.removeButtonRow(fields.length, () => handleRemove(index$2), index$2) }),
+                  settings.repeatable.minusButton && fields.length > settings.repeatable.minRepeats && /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { style: { zIndex: 1, ...elStyles.removeButton || {} }, children: settings.repeatable.minusButton(fields.length, () => handleRemove(index$2)) })
+                ]
+              },
+              field.id
+            )) }),
+            settings.repeatable.plusButton && /* @__PURE__ */ jsxRuntime.jsx(
+              index.default,
+              {
+                justifyContent: "flex-start",
+                w: "full",
+                mt: 8,
+                style: elStyles.addButton || void 0,
+                children: settings.repeatable.plusButton(fields.length, handleAppend)
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+exports.Group = Group;
+exports.default = Group;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../../src/form-renderer/components/fields/Group/index.native.tsx"],"sourcesContent":["// components/fields/Group.tsx\n\nimport React, {useCallback, useEffect, useImperativeHandle, useMemo, useState} from 'react';\nimport {type FieldArrayWithId, type FieldValues, useFieldArray} from 'react-hook-form';\nimport type {IFormElement, IGroup, UseFieldLogicElementProps} from \"@lmb-it/kitsconcerto-types\";\nimport {Box, Flex} from \"../../../../_compat\";\nimport KitsContainer from \"../../../../form/helpers/FormContainer\";\nimport {FormRenderer} from \"../../FormRenderer\";\nimport {useComponentDefaults, useResolvedElementStyles} from \"../../../../hooks\";\nimport {flattenSlotStyles} from \"../../../utils\";\n\n/**\n * Renders a repeatable group of fields (a field array), preserving all the logic\n * for default values, min/max repeats, and custom action buttons.\n */\nexport const Group = <T extends FieldValues>({\n                                                 element,\n                                                 control,\n                                                 getValues,\n                                                 groupField,\n                                                 focusedField,\n                                                 setFocusedField,\n                                                 fieldLogic,\n                                             }: UseFieldLogicElementProps<T>) => { // Ensure UseFieldLogicProps is updated to pass focus props\n    // 1. Get the group's own dynamic state (visibility, layout, label) from the logic hook.\n    const {isShown, label, elements, helperText: groupHelperText, fieldState, hideError, isRequired, slots} = fieldLogic;\n\n    // Fallback focus state, used only when the parent form doesn't supply\n    // focusedField/setFocusedField — web passes the props straight through.\n    const [_focusedField, _setFocusedField] = useState<string>('');\n\n    const groupElement = element as IGroup<T>;\n    const {groupsSettings} = groupElement;\n\n    // Resolve groupSlots (dynamic or static) and merge with theme Group defaults\n    const resolvedGroupSlots = useMemo(() => {\n        const gs = groupElement.groupSlots;\n        if (!gs) return undefined;\n        if (typeof gs === 'function') {\n            return (gs as any)(fieldLogic.watchedValues, fieldLogic.formContext.getValues(), fieldLogic.formContext, groupField);\n        }\n        return gs;\n    }, [groupElement.groupSlots, fieldLogic.watchedValues, fieldLogic.formContext, groupField]);\n\n    const {elementStyles: groupStyles} = useComponentDefaults('Group', {\n        slots: resolvedGroupSlots,\n    } as any);\n    const elStyles = useResolvedElementStyles(groupStyles);\n\n    // Element-level `slots` (the outer KitsContainer's container/label/helperText/\n    // error) arrive in the nested IElementSlotConfig shape; flatten to the flat\n    // { [slot]: styleRecord } map KitsContainer expects. (groupSlots above drive\n    // the inner repeatable list — root/body/row — and are already flattened.)\n    const containerSlots = useMemo(() => flattenSlotStyles(slots), [slots]);\n\n    // 2. Initialize react-hook-form's field array management.\n    const fieldArray = useFieldArray({\n        control,\n        name: element.id as any,\n    });\n    const {fields, append, remove} = fieldArray;\n\n    // console.log('hitted', element, {fields}, element.id)\n    // 3. Process group settings with defaults, exactly like the original component.\n    const settings = useMemo(() => ({\n        grid: groupsSettings?.grid,\n        repeatable: {\n            minRepeats: groupsSettings?.repeatable?.minRepeats || 0,\n            maxRepeats: groupsSettings?.repeatable?.maxRepeats || Infinity,\n            plusButton: groupsSettings?.repeatable?.plusButton,\n            minusButton: groupsSettings?.repeatable?.minusButton,\n        },\n        removeButtonRow: groupsSettings?.removeButtonRow,\n    }), [groupsSettings]);\n\n    // 4. Replicate the logic to build a default item object for new rows.\n    const createDefaultItem = (): FieldValues => {\n        const item: FieldValues = {};\n        elements?.forEach(el => {\n            if (\"displayOnly\" in el && el.displayOnly) return;\n\n            if (\"initialUri\" in el) {\n                item[el.id as string] = (el as any).initialUri;\n            } else if (\"initialValue\" in el && el.initialValue !== undefined) {\n                item[el.id as string] = el.initialValue;\n            }\n        });\n        return item;\n    };\n\n    const handleAppend = (count = 1) => {\n        const max = settings.repeatable.maxRepeats;\n\n        if (max && fields.length >= max) {\n            return;\n        }\n        const itemsToAdd = Array(count).fill(0).map(() => createDefaultItem());\n        append(itemsToAdd as any, {shouldFocus: true});\n    };\n\n    const handleRemove = (index: number) => {\n        if (fields.length > (settings.repeatable.minRepeats || 0)) {\n            remove(index);\n        }\n    };\n    useEffect(() => {\n        const generateGroupElements = () => {\n            const min = settings.repeatable.minRepeats || 0;\n            if (fields.length < min) {\n                const itemsToAppend = min - fields.length;\n                // console.log({itemsToAppend, current: fields.length})\n\n                handleAppend(itemsToAppend);\n            }\n        };\n\n        // This pattern correctly avoids the infinite loop by not depending on `append` or `fields`.\n        // The timeout gives react-hook-form time to initialize before we check the length.\n        const timer = setTimeout(generateGroupElements, 100);\n        return () => clearTimeout(timer);\n\n    }, [element.id, settings.repeatable.minRepeats]); // Stable dependencies\n\n    // 6. Replicate the `useImperativeHandle` logic to expose the ref.\n    useImperativeHandle(groupsSettings?.ref, () => fieldArray, [fieldArray]);\n\n\n    const reBuildElements = useCallback((field: FieldArrayWithId, index: number) => {\n        return elements?.map((childElement) => {\n            const toArray = Object.entries(field);\n\n            const findField = toArray.find(([name]) => name == childElement.id);\n\n            return {\n                ...childElement,\n                initialValue: findField ? findField[1] : undefined,\n            };\n        }) as IFormElement<any>[];\n    }, [element, elements]);\n\n\n    if (!isShown) {\n        return null;\n    }\n\n    return (\n        <KitsContainer\n            id={element.id.toString()}\n            label={label}\n            helperText={groupHelperText}\n            errors={fieldState?.error?.message}\n            invalid={fieldState?.invalid}\n            hideError={hideError}\n            required={isRequired}\n            bare\n            elementStyles={containerSlots}\n        >\n            <Flex w=\"full\" flexDirection=\"column\" gap={6} mb={4}\n                  style={elStyles.root || undefined}>\n\n                <Box style={elStyles.body || undefined}>\n                    {fields.map((field, index) => (\n                        <Flex key={field.id} w=\"full\" position=\"relative\" flexDirection=\"column\"\n                              rowGap={6}\n                              columnGap={8}\n                              style={elStyles.row || undefined}>\n\n                            <FormRenderer\n                                elements={reBuildElements(field, index)}\n                                control={control}\n                                groupField={{\n                                    index,\n                                    name: element.id.toString(),\n                                    // Use the path-arg form of getValues so a Group nested inside\n                                    // an Object resolves correctly: the FormRenderer rewrites this\n                                    // Group's id to a dotted path (e.g. \"addressGroup.addresses\"),\n                                    // and getValues()[dottedKey] would be undefined (→ crash on\n                                    // [index]). getValues(path) traverses the nesting instead.\n                                    values: (getValues(element.id as any) as any)?.[index],\n                                    append: handleAppend,\n                                    remove: () => handleRemove(index),\n                                }}\n                                getValues={getValues}\n                                parentPath={`${element.id.toString()}.${index}.`}\n                                focusedField={(focusedField ?? _focusedField)!}\n                                setFocusedField={(setFocusedField ?? _setFocusedField)!}\n                                grid={groupsSettings?.grid}\n                            />\n\n                            {settings.removeButtonRow && (\n                                <Box style={{zIndex: 1, ...(elStyles.removeButton || {})}}>\n                                    {settings.removeButtonRow(fields.length, () => handleRemove(index), index)}\n                                </Box>\n                            )}\n\n\n                            {settings.repeatable.minusButton && fields.length > settings.repeatable.minRepeats && (\n                                <Box style={{zIndex: 1, ...(elStyles.removeButton || {})}}>\n                                    {settings.repeatable.minusButton(fields.length, () => handleRemove(index))}\n                                </Box>\n                            )}\n                        </Flex>\n                    ))}\n                </Box>\n\n                {settings.repeatable.plusButton && (\n                    <Flex justifyContent=\"flex-start\" w=\"full\" mt={8}\n                          style={elStyles.addButton || undefined}>\n                        {settings.repeatable.plusButton(fields.length, handleAppend)}\n                    </Flex>\n                )}\n            </Flex>\n        </KitsContainer>\n    );\n};\n\nexport default Group;\n"],"names":["useState","useMemo","useComponentDefaults","useResolvedElementStyles","flattenSlotStyles","useFieldArray","useEffect","useImperativeHandle","useCallback","jsx","KitsContainer","jsxs","Flex","Box","index","FormRenderer"],"mappings":"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"}

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

@@ -0,0 +1,184 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect, useImperativeHandle, useCallback } from 'react';
+import { useFieldArray } from 'react-hook-form';
+import KitsContainer from '../../../../form/helpers/FormContainer/index.js';
+import { FormRenderer } from '../../FormRenderer/index.js';
+import '../../../../contexts/DialogContext.js';
+import useComponentDefaults from '../../../../hooks/useComponentDefaults.js';
+import useResolvedElementStyles from '../../../../hooks/useResolvedElementStyles.js';
+import { flattenSlotStyles } from '../../../utils/helpers.js';
+import 'yup';
+import Flex from '../../../../layout/Flex/index.js';
+import Box from '../../../../primitives/Box/index.js';
+
+const Group = ({
+  element,
+  control,
+  getValues,
+  groupField,
+  focusedField,
+  setFocusedField,
+  fieldLogic
+}) => {
+  const { isShown, label, elements, helperText: groupHelperText, fieldState, hideError, isRequired, slots } = fieldLogic;
+  const [_focusedField, _setFocusedField] = useState("");
+  const groupElement = element;
+  const { groupsSettings } = groupElement;
+  const resolvedGroupSlots = useMemo(() => {
+    const gs = groupElement.groupSlots;
+    if (!gs) return void 0;
+    if (typeof gs === "function") {
+      return gs(fieldLogic.watchedValues, fieldLogic.formContext.getValues(), fieldLogic.formContext, groupField);
+    }
+    return gs;
+  }, [groupElement.groupSlots, fieldLogic.watchedValues, fieldLogic.formContext, groupField]);
+  const { elementStyles: groupStyles } = useComponentDefaults("Group", {
+    slots: resolvedGroupSlots
+  });
+  const elStyles = useResolvedElementStyles(groupStyles);
+  const containerSlots = useMemo(() => flattenSlotStyles(slots), [slots]);
+  const fieldArray = useFieldArray({
+    control,
+    name: element.id
+  });
+  const { fields, append, remove } = fieldArray;
+  const settings = useMemo(() => ({
+    grid: groupsSettings?.grid,
+    repeatable: {
+      minRepeats: groupsSettings?.repeatable?.minRepeats || 0,
+      maxRepeats: groupsSettings?.repeatable?.maxRepeats || Infinity,
+      plusButton: groupsSettings?.repeatable?.plusButton,
+      minusButton: groupsSettings?.repeatable?.minusButton
+    },
+    removeButtonRow: groupsSettings?.removeButtonRow
+  }), [groupsSettings]);
+  const createDefaultItem = () => {
+    const item = {};
+    elements?.forEach((el) => {
+      if ("displayOnly" in el && el.displayOnly) return;
+      if ("initialUri" in el) {
+        item[el.id] = el.initialUri;
+      } else if ("initialValue" in el && el.initialValue !== void 0) {
+        item[el.id] = el.initialValue;
+      }
+    });
+    return item;
+  };
+  const handleAppend = (count = 1) => {
+    const max = settings.repeatable.maxRepeats;
+    if (max && fields.length >= max) {
+      return;
+    }
+    const itemsToAdd = Array(count).fill(0).map(() => createDefaultItem());
+    append(itemsToAdd, { shouldFocus: true });
+  };
+  const handleRemove = (index) => {
+    if (fields.length > (settings.repeatable.minRepeats || 0)) {
+      remove(index);
+    }
+  };
+  useEffect(() => {
+    const generateGroupElements = () => {
+      const min = settings.repeatable.minRepeats || 0;
+      if (fields.length < min) {
+        const itemsToAppend = min - fields.length;
+        handleAppend(itemsToAppend);
+      }
+    };
+    const timer = setTimeout(generateGroupElements, 100);
+    return () => clearTimeout(timer);
+  }, [element.id, settings.repeatable.minRepeats]);
+  useImperativeHandle(groupsSettings?.ref, () => fieldArray, [fieldArray]);
+  const reBuildElements = useCallback((field, index) => {
+    return elements?.map((childElement) => {
+      const toArray = Object.entries(field);
+      const findField = toArray.find(([name]) => name == childElement.id);
+      return {
+        ...childElement,
+        initialValue: findField ? findField[1] : void 0
+      };
+    });
+  }, [element, elements]);
+  if (!isShown) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    KitsContainer,
+    {
+      id: element.id.toString(),
+      label,
+      helperText: groupHelperText,
+      errors: fieldState?.error?.message,
+      invalid: fieldState?.invalid,
+      hideError,
+      required: isRequired,
+      bare: true,
+      elementStyles: containerSlots,
+      children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          w: "full",
+          flexDirection: "column",
+          gap: 6,
+          mb: 4,
+          style: elStyles.root || void 0,
+          children: [
+            /* @__PURE__ */ jsx(Box, { style: elStyles.body || void 0, children: fields.map((field, index) => /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                w: "full",
+                position: "relative",
+                flexDirection: "column",
+                rowGap: 6,
+                columnGap: 8,
+                style: elStyles.row || void 0,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    FormRenderer,
+                    {
+                      elements: reBuildElements(field, index),
+                      control,
+                      groupField: {
+                        index,
+                        name: element.id.toString(),
+                        // Use the path-arg form of getValues so a Group nested inside
+                        // an Object resolves correctly: the FormRenderer rewrites this
+                        // Group's id to a dotted path (e.g. "addressGroup.addresses"),
+                        // and getValues()[dottedKey] would be undefined (→ crash on
+                        // [index]). getValues(path) traverses the nesting instead.
+                        values: getValues(element.id)?.[index],
+                        append: handleAppend,
+                        remove: () => handleRemove(index)
+                      },
+                      getValues,
+                      parentPath: `${element.id.toString()}.${index}.`,
+                      focusedField: focusedField ?? _focusedField,
+                      setFocusedField: setFocusedField ?? _setFocusedField,
+                      grid: groupsSettings?.grid
+                    }
+                  ),
+                  settings.removeButtonRow && /* @__PURE__ */ jsx(Box, { style: { zIndex: 1, ...elStyles.removeButton || {} }, children: settings.removeButtonRow(fields.length, () => handleRemove(index), index) }),
+                  settings.repeatable.minusButton && fields.length > settings.repeatable.minRepeats && /* @__PURE__ */ jsx(Box, { style: { zIndex: 1, ...elStyles.removeButton || {} }, children: settings.repeatable.minusButton(fields.length, () => handleRemove(index)) })
+                ]
+              },
+              field.id
+            )) }),
+            settings.repeatable.plusButton && /* @__PURE__ */ jsx(
+              Flex,
+              {
+                justifyContent: "flex-start",
+                w: "full",
+                mt: 8,
+                style: elStyles.addButton || void 0,
+                children: settings.repeatable.plusButton(fields.length, handleAppend)
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+export { Group, Group as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/form-renderer/components/fields/Group/index.native.tsx"],"sourcesContent":["// components/fields/Group.tsx\n\nimport React, {useCallback, useEffect, useImperativeHandle, useMemo, useState} from 'react';\nimport {type FieldArrayWithId, type FieldValues, useFieldArray} from 'react-hook-form';\nimport type {IFormElement, IGroup, UseFieldLogicElementProps} from \"@lmb-it/kitsconcerto-types\";\nimport {Box, Flex} from \"../../../../_compat\";\nimport KitsContainer from \"../../../../form/helpers/FormContainer\";\nimport {FormRenderer} from \"../../FormRenderer\";\nimport {useComponentDefaults, useResolvedElementStyles} from \"../../../../hooks\";\nimport {flattenSlotStyles} from \"../../../utils\";\n\n/**\n * Renders a repeatable group of fields (a field array), preserving all the logic\n * for default values, min/max repeats, and custom action buttons.\n */\nexport const Group = <T extends FieldValues>({\n                                                 element,\n                                                 control,\n                                                 getValues,\n                                                 groupField,\n                                                 focusedField,\n                                                 setFocusedField,\n                                                 fieldLogic,\n                                             }: UseFieldLogicElementProps<T>) => { // Ensure UseFieldLogicProps is updated to pass focus props\n    // 1. Get the group's own dynamic state (visibility, layout, label) from the logic hook.\n    const {isShown, label, elements, helperText: groupHelperText, fieldState, hideError, isRequired, slots} = fieldLogic;\n\n    // Fallback focus state, used only when the parent form doesn't supply\n    // focusedField/setFocusedField — web passes the props straight through.\n    const [_focusedField, _setFocusedField] = useState<string>('');\n\n    const groupElement = element as IGroup<T>;\n    const {groupsSettings} = groupElement;\n\n    // Resolve groupSlots (dynamic or static) and merge with theme Group defaults\n    const resolvedGroupSlots = useMemo(() => {\n        const gs = groupElement.groupSlots;\n        if (!gs) return undefined;\n        if (typeof gs === 'function') {\n            return (gs as any)(fieldLogic.watchedValues, fieldLogic.formContext.getValues(), fieldLogic.formContext, groupField);\n        }\n        return gs;\n    }, [groupElement.groupSlots, fieldLogic.watchedValues, fieldLogic.formContext, groupField]);\n\n    const {elementStyles: groupStyles} = useComponentDefaults('Group', {\n        slots: resolvedGroupSlots,\n    } as any);\n    const elStyles = useResolvedElementStyles(groupStyles);\n\n    // Element-level `slots` (the outer KitsContainer's container/label/helperText/\n    // error) arrive in the nested IElementSlotConfig shape; flatten to the flat\n    // { [slot]: styleRecord } map KitsContainer expects. (groupSlots above drive\n    // the inner repeatable list — root/body/row — and are already flattened.)\n    const containerSlots = useMemo(() => flattenSlotStyles(slots), [slots]);\n\n    // 2. Initialize react-hook-form's field array management.\n    const fieldArray = useFieldArray({\n        control,\n        name: element.id as any,\n    });\n    const {fields, append, remove} = fieldArray;\n\n    // console.log('hitted', element, {fields}, element.id)\n    // 3. Process group settings with defaults, exactly like the original component.\n    const settings = useMemo(() => ({\n        grid: groupsSettings?.grid,\n        repeatable: {\n            minRepeats: groupsSettings?.repeatable?.minRepeats || 0,\n            maxRepeats: groupsSettings?.repeatable?.maxRepeats || Infinity,\n            plusButton: groupsSettings?.repeatable?.plusButton,\n            minusButton: groupsSettings?.repeatable?.minusButton,\n        },\n        removeButtonRow: groupsSettings?.removeButtonRow,\n    }), [groupsSettings]);\n\n    // 4. Replicate the logic to build a default item object for new rows.\n    const createDefaultItem = (): FieldValues => {\n        const item: FieldValues = {};\n        elements?.forEach(el => {\n            if (\"displayOnly\" in el && el.displayOnly) return;\n\n            if (\"initialUri\" in el) {\n                item[el.id as string] = (el as any).initialUri;\n            } else if (\"initialValue\" in el && el.initialValue !== undefined) {\n                item[el.id as string] = el.initialValue;\n            }\n        });\n        return item;\n    };\n\n    const handleAppend = (count = 1) => {\n        const max = settings.repeatable.maxRepeats;\n\n        if (max && fields.length >= max) {\n            return;\n        }\n        const itemsToAdd = Array(count).fill(0).map(() => createDefaultItem());\n        append(itemsToAdd as any, {shouldFocus: true});\n    };\n\n    const handleRemove = (index: number) => {\n        if (fields.length > (settings.repeatable.minRepeats || 0)) {\n            remove(index);\n        }\n    };\n    useEffect(() => {\n        const generateGroupElements = () => {\n            const min = settings.repeatable.minRepeats || 0;\n            if (fields.length < min) {\n                const itemsToAppend = min - fields.length;\n                // console.log({itemsToAppend, current: fields.length})\n\n                handleAppend(itemsToAppend);\n            }\n        };\n\n        // This pattern correctly avoids the infinite loop by not depending on `append` or `fields`.\n        // The timeout gives react-hook-form time to initialize before we check the length.\n        const timer = setTimeout(generateGroupElements, 100);\n        return () => clearTimeout(timer);\n\n    }, [element.id, settings.repeatable.minRepeats]); // Stable dependencies\n\n    // 6. Replicate the `useImperativeHandle` logic to expose the ref.\n    useImperativeHandle(groupsSettings?.ref, () => fieldArray, [fieldArray]);\n\n\n    const reBuildElements = useCallback((field: FieldArrayWithId, index: number) => {\n        return elements?.map((childElement) => {\n            const toArray = Object.entries(field);\n\n            const findField = toArray.find(([name]) => name == childElement.id);\n\n            return {\n                ...childElement,\n                initialValue: findField ? findField[1] : undefined,\n            };\n        }) as IFormElement<any>[];\n    }, [element, elements]);\n\n\n    if (!isShown) {\n        return null;\n    }\n\n    return (\n        <KitsContainer\n            id={element.id.toString()}\n            label={label}\n            helperText={groupHelperText}\n            errors={fieldState?.error?.message}\n            invalid={fieldState?.invalid}\n            hideError={hideError}\n            required={isRequired}\n            bare\n            elementStyles={containerSlots}\n        >\n            <Flex w=\"full\" flexDirection=\"column\" gap={6} mb={4}\n                  style={elStyles.root || undefined}>\n\n                <Box style={elStyles.body || undefined}>\n                    {fields.map((field, index) => (\n                        <Flex key={field.id} w=\"full\" position=\"relative\" flexDirection=\"column\"\n                              rowGap={6}\n                              columnGap={8}\n                              style={elStyles.row || undefined}>\n\n                            <FormRenderer\n                                elements={reBuildElements(field, index)}\n                                control={control}\n                                groupField={{\n                                    index,\n                                    name: element.id.toString(),\n                                    // Use the path-arg form of getValues so a Group nested inside\n                                    // an Object resolves correctly: the FormRenderer rewrites this\n                                    // Group's id to a dotted path (e.g. \"addressGroup.addresses\"),\n                                    // and getValues()[dottedKey] would be undefined (→ crash on\n                                    // [index]). getValues(path) traverses the nesting instead.\n                                    values: (getValues(element.id as any) as any)?.[index],\n                                    append: handleAppend,\n                                    remove: () => handleRemove(index),\n                                }}\n                                getValues={getValues}\n                                parentPath={`${element.id.toString()}.${index}.`}\n                                focusedField={(focusedField ?? _focusedField)!}\n                                setFocusedField={(setFocusedField ?? _setFocusedField)!}\n                                grid={groupsSettings?.grid}\n                            />\n\n                            {settings.removeButtonRow && (\n                                <Box style={{zIndex: 1, ...(elStyles.removeButton || {})}}>\n                                    {settings.removeButtonRow(fields.length, () => handleRemove(index), index)}\n                                </Box>\n                            )}\n\n\n                            {settings.repeatable.minusButton && fields.length > settings.repeatable.minRepeats && (\n                                <Box style={{zIndex: 1, ...(elStyles.removeButton || {})}}>\n                                    {settings.repeatable.minusButton(fields.length, () => handleRemove(index))}\n                                </Box>\n                            )}\n                        </Flex>\n                    ))}\n                </Box>\n\n                {settings.repeatable.plusButton && (\n                    <Flex justifyContent=\"flex-start\" w=\"full\" mt={8}\n                          style={elStyles.addButton || undefined}>\n                        {settings.repeatable.plusButton(fields.length, handleAppend)}\n                    </Flex>\n                )}\n            </Flex>\n        </KitsContainer>\n    );\n};\n\nexport default Group;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var index_native = require('../../../../form/inputs/InputNumber/index.cjs');
+
+const InputNumber = ({
+  element,
+  control,
+  getValues,
+  fieldLogic
+}) => {
+  const {
+    field,
+    fieldState,
+    label,
+    placeholder,
+    isDisabled,
+    isRequired,
+    helperText,
+    keyFilter,
+    // The hook can resolve this dynamic prop
+    attached,
+    style: elementStyle,
+    slots
+  } = fieldLogic;
+  const numberElement = element;
+  const { localProps } = numberElement;
+  const {
+    locale,
+    useGrouping,
+    minFractionDigits,
+    maxFractionDigits,
+    mode,
+    currency,
+    prefix,
+    suffix,
+    min,
+    max,
+    ...restLocalProps
+  } = localProps ?? {};
+  const handleOnChange = (event) => {
+    field.onChange(event.value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index_native.default,
+    {
+      id: field.name,
+      name: field.name,
+      value: field.value,
+      onBlur: field.onBlur,
+      ref: field.ref,
+      onChange: handleOnChange,
+      label,
+      placeholder,
+      disabled: isDisabled,
+      required: isRequired,
+      invalid: fieldState.invalid,
+      errors: fieldState.error?.message,
+      helperText,
+      attached,
+      style: elementStyle?.input,
+      containerStyle: elementStyle?.container,
+      slots,
+      locale,
+      useGrouping,
+      minFractionDigits,
+      maxFractionDigits,
+      mode,
+      currency,
+      prefix,
+      suffix,
+      min,
+      max,
+      keyFilter,
+      localProps: restLocalProps
+    }
+  );
+};
+
+exports.InputNumber = InputNumber;
+exports.default = InputNumber;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../../src/form-renderer/components/fields/InputNumber/index.tsx"],"sourcesContent":["// components/fields/InputNumber.tsx\n\nimport React from 'react';\nimport type {FieldValues} from 'react-hook-form';\n\n// Using your specified import paths\nimport type {INumberInput, UseFieldLogicElementProps} from '@lmb-it/kitsconcerto-types';\nimport {KitsInputNumber} from \"../../../../_compat\";\n\n/**\n * Renders a number input component.\n * All logic is handled by the useFieldLogic hook, making this a simple, declarative component.\n */\nexport const InputNumber = <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        placeholder,\n        isDisabled,\n        isRequired,\n        helperText,\n        keyFilter, // The hook can resolve this dynamic prop\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 numberElement = element as INumberInput<T>;\n    const {localProps} = numberElement;\n\n    // 3. Split format props (belong top-level on KitsInputNumber) from\n    //    RN-specific native props (stay in localProps).\n    //    Form authors typically put everything into `localProps` as a bucket,\n    //    but KitsInputNumber's formatter reads these from top-level props.\n    const {\n        locale,\n        useGrouping,\n        minFractionDigits,\n        maxFractionDigits,\n        mode,\n        currency,\n        prefix,\n        suffix,\n        min,\n        max,\n        ...restLocalProps\n    } = (localProps ?? {}) as Record<string, any>;\n\n    // 4. Create a handler to adapt the component's onChange event for react-hook-form.\n    // The UI component's event is { originalEvent: Event, value: number, formattedValue: string }\n    // react-hook-form's field.onChange expects the raw value.\n    const handleOnChange = (event: { value: any }) => {\n        field.onChange(event.value);\n    };\n\n    // 5. The component is now only responsible for rendering the UI.\n    return (\n        <KitsInputNumber\n            // --- Core react-hook-form props ---\n            id={field.name}\n            name={field.name}\n            value={field.value}\n            onBlur={field.onBlur}\n            ref={field.ref}\n            onChange={handleOnChange} // Use the custom handler\n\n            // --- Resolved props from useFieldLogic ---\n            label={label}\n            placeholder={placeholder}\n            disabled={isDisabled}\n            required={isRequired}\n            invalid={fieldState.invalid}\n            errors={fieldState.error?.message}\n            helperText={helperText}\n            attached={attached}\n            style={elementStyle?.input}\n            containerStyle={elementStyle?.container}\n            slots={slots}\n\n            // --- Top-level format props (honored by KitsInputNumber) ---\n            locale={locale}\n            useGrouping={useGrouping}\n            minFractionDigits={minFractionDigits}\n            maxFractionDigits={maxFractionDigits}\n            mode={mode}\n            currency={currency}\n            prefix={prefix}\n            suffix={suffix}\n            min={min}\n            max={max}\n\n            // --- keyFilter from the element definition (PrimeReact-style) ---\n            keyFilter={keyFilter}\n\n            // --- Remaining native RN props (keyboardType, autoCapitalize, etc.) ---\n            localProps={restLocalProps as Record<string, any>}\n        />\n    );\n};\n\nexport default InputNumber;\n"],"names":["jsx","KitsInputNumber"],"mappings":";;;;;;;AAaO,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,WAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,YAAA;AAAA,IACP;AAAA,GACJ,GAAI,UAAA;AAGJ,EAAA,MAAM,aAAA,GAAgB,OAAA;AACtB,EAAA,MAAM,EAAC,YAAU,GAAI,aAAA;AAMrB,EAAA,MAAM;AAAA,IACF,MAAA;AAAA,IACA,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,iBAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACP,GAAK,cAAc,EAAC;AAKpB,EAAA,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA0B;AAC9C,IAAA,KAAA,CAAM,QAAA,CAAS,MAAM,KAAK,CAAA;AAAA,EAC9B,CAAA;AAGA,EAAA,uBACIA,cAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MAEG,IAAI,KAAA,CAAM,IAAA;AAAA,MACV,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,OAAO,KAAA,CAAM,KAAA;AAAA,MACb,QAAQ,KAAA,CAAM,MAAA;AAAA,MACd,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,QAAA,EAAU,cAAA;AAAA,MAGV,KAAA;AAAA,MACA,WAAA;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,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAO,YAAA,EAAc,KAAA;AAAA,MACrB,gBAAgB,YAAA,EAAc,SAAA;AAAA,MAC9B,KAAA;AAAA,MAGA,MAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MAGA,SAAA;AAAA,MAGA,UAAA,EAAY;AAAA;AAAA,GAChB;AAER;;;;;"}