dynamic-formik-form 1.0.0

package/dist/index.mjs

@@ -0,0 +1,3611 @@
+import React7, { createContext, useContext, useState, useCallback, useRef, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/DynamicForm.tsx
+var FormContext = createContext(null);
+var FormProvider = ({
+  children,
+  uiLibrary,
+  formik
+}) => {
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: { uiLibrary, formik }, children });
+};
+var useFormContext = () => {
+  const context = useContext(FormContext);
+  if (!context) {
+    throw new Error("useFormContext must be used within FormProvider");
+  }
+  return context;
+};
+var defaultAdapter = {
+  Input: ({ className, disabled, error, ...props }) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: `${className || ""} ${error ? "error" : ""}`,
+      disabled,
+      ...props
+    }
+  ),
+  Textarea: ({ className, disabled, error, ...props }) => /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: `${className || ""} ${error ? "error" : ""}`,
+      disabled,
+      ...props
+    }
+  ),
+  Select: ({ className, disabled, error, children, ...props }) => /* @__PURE__ */ jsx(
+    "select",
+    {
+      className: `${className || ""} ${error ? "error" : ""}`,
+      disabled,
+      ...props,
+      children
+    }
+  ),
+  Checkbox: ({ className, disabled, label, ...props }) => /* @__PURE__ */ jsxs("label", { className, children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", disabled, ...props }),
+    label
+  ] }),
+  Radio: ({ className, disabled, label, ...props }) => /* @__PURE__ */ jsxs("label", { className, children: [
+    /* @__PURE__ */ jsx("input", { type: "radio", disabled, ...props }),
+    label
+  ] }),
+  Switch: ({ className, disabled, ...props }) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "checkbox",
+      className: `switch ${className || ""}`,
+      disabled,
+      ...props
+    }
+  ),
+  Button: ({ className, disabled, children, ...props }) => /* @__PURE__ */ jsx("button", { className, disabled, ...props, children }),
+  FormControl: ({ className, children }) => /* @__PURE__ */ jsx("div", { className: `form-control ${className || ""}`, children }),
+  FormHelperText: ({ className, children }) => /* @__PURE__ */ jsx("small", { className: `form-helper-text ${className || ""}`, children }),
+  Label: ({ className, htmlFor, children }) => /* @__PURE__ */ jsx("label", { className, htmlFor, children }),
+  Box: ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", { className, ...props, children }),
+  Paper: ({ className, children }) => /* @__PURE__ */ jsx("div", { className: `paper ${className || ""}`, children }),
+  Popover: ({ open, anchorEl, onClose, children, anchorOrigin }) => {
+    if (!open || !anchorEl) return null;
+    const rect = anchorEl.getBoundingClientRect();
+    const style = {
+      position: "fixed",
+      top: `${rect.bottom}px`,
+      left: `${rect.left}px`,
+      zIndex: 1e3
+    };
+    return /* @__PURE__ */ jsx("div", { className: "popover", style, onClick: onClose, children });
+  },
+  MenuItem: ({ className, onClick, children }) => /* @__PURE__ */ jsx("div", { className: `menu-item ${className || ""}`, onClick, children }),
+  Typography: ({ className, variant, children }) => /* @__PURE__ */ jsx("div", { className: `typography typography-${variant || "body1"} ${className || ""}`, children }),
+  IconButton: ({ className, size, onClick, children, ...props }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `icon-button icon-button-${size || "medium"} ${className || ""}`,
+      onClick,
+      ...props,
+      children
+    }
+  )
+};
+var createMUIAdapter = (Box, Button, Checkbox, FormControl, FormControlLabel, FormHelperText, IconButton, MenuItem, Paper, Popover, Radio, RadioGroup, Switch, TextField2, Typography, DatePicker, DateTimePicker) => {
+  return {
+    Input: ({ className, disabled, error, type, ...props }) => /* @__PURE__ */ jsx(
+      TextField2,
+      {
+        ...props,
+        type,
+        disabled,
+        error: !!error,
+        className,
+        fullWidth: true,
+        variant: "outlined"
+      }
+    ),
+    Textarea: ({ className, disabled, error, rows, ...props }) => /* @__PURE__ */ jsx(
+      TextField2,
+      {
+        ...props,
+        multiline: true,
+        rows: rows || 4,
+        disabled,
+        error: !!error,
+        className,
+        fullWidth: true,
+        variant: "outlined"
+      }
+    ),
+    Select: ({ className, disabled, error, children, ...props }) => /* @__PURE__ */ jsx(
+      TextField2,
+      {
+        ...props,
+        select: true,
+        disabled,
+        error: !!error,
+        className,
+        fullWidth: true,
+        variant: "outlined",
+        children
+      }
+    ),
+    Checkbox: ({ className, disabled, label, ...props }) => /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            ...props,
+            disabled,
+            className,
+            color: "primary"
+          }
+        ),
+        label
+      }
+    ),
+    Radio: ({ className, disabled, label, ...props }) => /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ jsx(
+          Radio,
+          {
+            ...props,
+            disabled,
+            className,
+            color: "primary"
+          }
+        ),
+        label
+      }
+    ),
+    Switch: ({ className, disabled, ...props }) => /* @__PURE__ */ jsx(
+      Switch,
+      {
+        ...props,
+        disabled,
+        className,
+        color: "primary"
+      }
+    ),
+    Button: ({ className, disabled, children, variant, ...props }) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...props,
+        disabled,
+        className,
+        variant: variant || "contained",
+        color: "primary",
+        children
+      }
+    ),
+    FormControl: ({ className, required, error, children }) => /* @__PURE__ */ jsx(
+      FormControl,
+      {
+        className,
+        required,
+        error: !!error,
+        fullWidth: true,
+        children
+      }
+    ),
+    FormHelperText: ({ className, children }) => /* @__PURE__ */ jsx(FormHelperText, { className, children }),
+    Label: ({ className, htmlFor, children }) => /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "label",
+        htmlFor,
+        className,
+        variant: "body2",
+        fontWeight: "medium",
+        children
+      }
+    ),
+    Box: ({ className, sx, children, ...props }) => /* @__PURE__ */ jsx(Box, { className, sx, ...props, children }),
+    Paper: ({ className, elevation, children }) => /* @__PURE__ */ jsx(Paper, { className, elevation: elevation || 3, children }),
+    Popover: ({ open, anchorEl, onClose, anchorOrigin, children }) => /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open,
+        anchorEl,
+        onClose,
+        anchorOrigin: anchorOrigin || { vertical: "bottom", horizontal: "left" },
+        children
+      }
+    ),
+    MenuItem: ({ className, onClick, children }) => /* @__PURE__ */ jsx(MenuItem, { className, onClick, children }),
+    Typography: ({ className, variant, color, children }) => /* @__PURE__ */ jsx(Typography, { className, variant, color, children }),
+    IconButton: ({ className, size, onClick, children, ...props }) => /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className,
+        size,
+        onClick,
+        ...props,
+        children
+      }
+    ),
+    DatePicker: DatePicker ? ({ value, onChange, format, disabled, ...props }) => /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        value,
+        onChange,
+        format,
+        disabled,
+        ...props
+      }
+    ) : void 0,
+    DateTimePicker: DateTimePicker ? ({ value, onChange, format, disabled, views, ...props }) => /* @__PURE__ */ jsx(
+      DateTimePicker,
+      {
+        value,
+        onChange,
+        format,
+        disabled,
+        views,
+        ...props
+      }
+    ) : void 0,
+    TextField: TextField2 ? ({ inputRef, inputProps, label, id, error, helperText, ...props }) => /* @__PURE__ */ jsx(
+      TextField2,
+      {
+        inputRef,
+        inputProps,
+        label,
+        id,
+        error: !!error,
+        helperText,
+        ...props,
+        fullWidth: true,
+        variant: "outlined"
+      }
+    ) : void 0
+  };
+};
+var createBootstrapAdapter = (Form, FormControl, FormLabel, FormText, FormCheck, FormSelect, ButtonComponent, InputGroup, OverlayTrigger, Popover, ListGroup, ListGroupItem) => {
+  return {
+    Input: ({ className, disabled, error, type, ...props }) => /* @__PURE__ */ jsx(
+      FormControl,
+      {
+        ...props,
+        type,
+        disabled,
+        isInvalid: !!error,
+        className
+      }
+    ),
+    Textarea: ({ className, disabled, error, rows, ...props }) => /* @__PURE__ */ jsx(
+      FormControl,
+      {
+        ...props,
+        as: "textarea",
+        rows: rows || 4,
+        disabled,
+        isInvalid: !!error,
+        className
+      }
+    ),
+    Select: ({ className, disabled, error, children, ...props }) => /* @__PURE__ */ jsx(
+      FormSelect,
+      {
+        ...props,
+        disabled,
+        isInvalid: !!error,
+        className,
+        children
+      }
+    ),
+    Checkbox: ({ className, disabled, label, ...props }) => /* @__PURE__ */ jsx(
+      FormCheck,
+      {
+        ...props,
+        type: "checkbox",
+        disabled,
+        className,
+        label
+      }
+    ),
+    Radio: ({ className, disabled, label, ...props }) => /* @__PURE__ */ jsx(
+      FormCheck,
+      {
+        ...props,
+        type: "radio",
+        disabled,
+        className,
+        label
+      }
+    ),
+    Switch: ({ className, disabled, ...props }) => /* @__PURE__ */ jsx(
+      FormCheck,
+      {
+        ...props,
+        type: "switch",
+        disabled,
+        className
+      }
+    ),
+    Button: ({ className, disabled, children, variant, ...props }) => /* @__PURE__ */ jsx(
+      ButtonComponent,
+      {
+        ...props,
+        disabled,
+        className,
+        variant: variant || "primary",
+        children
+      }
+    ),
+    FormControl: ({ className, required, error, children }) => /* @__PURE__ */ jsx(Form, { className, children }),
+    FormHelperText: ({ className, children }) => /* @__PURE__ */ jsx(FormText, { className, children }),
+    Label: ({ className, htmlFor, children }) => /* @__PURE__ */ jsx(FormLabel, { htmlFor, className, children }),
+    Box: ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", { className, ...props, children }),
+    Paper: ({ className, children }) => /* @__PURE__ */ jsx("div", { className: `card ${className || ""}`, children }),
+    Popover: ({ open, anchorEl, onClose, children, anchorOrigin }) => {
+      if (!open || !anchorEl) return null;
+      const rect = anchorEl.getBoundingClientRect();
+      const style = {
+        position: "fixed",
+        top: `${rect.bottom}px`,
+        left: `${rect.left}px`,
+        zIndex: 1e3,
+        backgroundColor: "white",
+        border: "1px solid #ccc",
+        borderRadius: "4px",
+        padding: "8px",
+        boxShadow: "0 2px 8px rgba(0,0,0,0.15)"
+      };
+      return /* @__PURE__ */ jsx("div", { style, onClick: onClose, children });
+    },
+    MenuItem: ({ className, onClick, children }) => /* @__PURE__ */ jsx(
+      ListGroupItem,
+      {
+        className,
+        onClick,
+        action: true,
+        children
+      }
+    ),
+    Typography: ({ className, variant, children }) => {
+      const Tag = variant === "h6" ? "h6" : variant === "subtitle2" ? "h6" : "p";
+      return /* @__PURE__ */ jsx(Tag, { className, children });
+    },
+    IconButton: ({ className, size, onClick, children }) => /* @__PURE__ */ jsx(
+      ButtonComponent,
+      {
+        variant: "link",
+        className: `${className || ""} p-0`,
+        onClick,
+        size,
+        children
+      }
+    )
+  };
+};
+var createAntDesignAdapter = (Input, Button, Checkbox, Radio, Switch, Select, Form, Typography, Popover, DatePicker, DateTimePicker, Space, Card) => {
+  const TextArea = Input.TextArea || Input;
+  const { TextArea: AntDTextArea } = Input;
+  const { Text: TypographyText } = Typography;
+  const { Group: RadioGroup } = Radio;
+  const SpaceComponent = Space || (({ children, ...props }) => /* @__PURE__ */ jsx("div", { ...props, children }));
+  const CardComponent = Card || (({ children, className }) => /* @__PURE__ */ jsx("div", { className: `ant-card ${className || ""}`, children }));
+  return {
+    Input: ({ className, disabled, error, type, ...props }) => /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...props,
+        type,
+        disabled,
+        status: error ? "error" : void 0,
+        className
+      }
+    ),
+    Textarea: ({ className, disabled, error, rows, ...props }) => /* @__PURE__ */ jsx(
+      TextArea,
+      {
+        ...props,
+        rows: rows || 4,
+        disabled,
+        status: error ? "error" : void 0,
+        className
+      }
+    ),
+    Select: ({ className, disabled, error, children, ...props }) => /* @__PURE__ */ jsx(
+      Select,
+      {
+        ...props,
+        disabled,
+        status: error ? "error" : void 0,
+        className,
+        children
+      }
+    ),
+    Checkbox: ({ className, disabled, label, ...props }) => /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        ...props,
+        disabled,
+        className,
+        children: label
+      }
+    ),
+    Radio: ({ className, disabled, label, ...props }) => /* @__PURE__ */ jsx(
+      Radio,
+      {
+        ...props,
+        disabled,
+        className,
+        children: label
+      }
+    ),
+    Switch: ({ className, disabled, ...props }) => /* @__PURE__ */ jsx(
+      Switch,
+      {
+        ...props,
+        disabled,
+        className
+      }
+    ),
+    Button: ({ className, disabled, children, variant, type, onClick, ...props }) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...props,
+        disabled,
+        type: variant === "primary" ? "primary" : variant === "secondary" ? "default" : variant || "default",
+        htmlType: type,
+        onClick,
+        className,
+        children
+      }
+    ),
+    FormControl: ({ className, children }) => {
+      const FormComponent = Form;
+      const FormItem = FormComponent.Item || FormComponent;
+      return /* @__PURE__ */ jsx(FormItem, { className, children });
+    },
+    FormHelperText: ({ className, children }) => /* @__PURE__ */ jsx(TypographyText, { type: "secondary", className, children }),
+    Label: ({ className, htmlFor, children }) => /* @__PURE__ */ jsx("label", { className, htmlFor, children }),
+    Box: ({ className, children, ...props }) => /* @__PURE__ */ jsx(SpaceComponent, { className, ...props, children }),
+    Paper: ({ className, children }) => /* @__PURE__ */ jsx(CardComponent, { className, children }),
+    Popover: ({ open, anchorEl, onClose, children, anchorOrigin, ...props }) => {
+      if (!open) return null;
+      return /* @__PURE__ */ jsx(
+        Popover,
+        {
+          open,
+          onOpenChange: (visible) => !visible && onClose(),
+          placement: anchorOrigin?.vertical === "bottom" ? "bottom" : "top",
+          ...props,
+          children
+        }
+      );
+    },
+    MenuItem: ({ className, onClick, children }) => /* @__PURE__ */ jsx("div", { className: `ant-menu-item ${className || ""}`, onClick, children }),
+    Typography: ({ className, variant, children, ...props }) => {
+      const TypographyComponent = Typography;
+      return /* @__PURE__ */ jsx(TypographyComponent, { className, ...props, children });
+    },
+    IconButton: ({ className, size, onClick, children, ...props }) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "text",
+        size,
+        onClick,
+        className,
+        icon: children,
+        ...props
+      }
+    ),
+    DatePicker: DatePicker ? ({ value, onChange, format, disabled, ...props }) => /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        value,
+        onChange,
+        format,
+        disabled,
+        ...props
+      }
+    ) : void 0,
+    DateTimePicker: DateTimePicker ? ({ value, onChange, format, disabled, views, ...props }) => /* @__PURE__ */ jsx(
+      DateTimePicker,
+      {
+        value,
+        onChange,
+        format,
+        disabled,
+        showTime: true,
+        ...props
+      }
+    ) : void 0
+  };
+};
+var DefaultInfoIcon = ({
+  className,
+  size = 16
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className,
+    children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" })
+  }
+);
+var DefaultVisibilityIcon = ({ className, size = 16 }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className,
+    children: /* @__PURE__ */ jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" })
+  }
+);
+var DefaultVisibilityOffIcon = ({ className, size = 16 }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className,
+    children: /* @__PURE__ */ jsx("path", { d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" })
+  }
+);
+var DefaultCopyIcon = ({
+  className,
+  size = 16
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className,
+    children: /* @__PURE__ */ jsx("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" })
+  }
+);
+var DefaultAddIcon = ({
+  className,
+  size = 16
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className,
+    children: /* @__PURE__ */ jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })
+  }
+);
+var DefaultDeleteIcon = ({
+  className,
+  size = 16
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className,
+    children: /* @__PURE__ */ jsx("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" })
+  }
+);
+var defaultIcons = {
+  Info: DefaultInfoIcon,
+  Visibility: DefaultVisibilityIcon,
+  VisibilityOff: DefaultVisibilityOffIcon,
+  Copy: DefaultCopyIcon,
+  Add: DefaultAddIcon,
+  Delete: DefaultDeleteIcon
+};
+
+// src/utils/formik.utils.ts
+var getNestedProperty = (obj, path) => {
+  if (!path || !obj) {
+    return void 0;
+  }
+  const keys = path.split(/[.[\]]+/).filter(Boolean);
+  return keys.reduce((acc, key) => {
+    if (acc && typeof acc === "object" && key in acc) {
+      return acc[key];
+    }
+    return void 0;
+  }, obj);
+};
+var getNestedValueNew = (obj, path) => {
+  if (!obj || !path) {
+    return void 0;
+  }
+  return path.split(".").reduce(
+    (acc, key) => acc && typeof acc === "object" && key in acc ? acc[key] : void 0,
+    obj
+  );
+};
+var getFieldValue = (formik, name) => {
+  if (!name) return null;
+  if (name.includes(".")) {
+    if (name.includes("[")) {
+      return getNestedProperty(formik.values, name);
+    }
+    return name.split(".").reduce(
+      (acc, key) => acc && typeof acc === "object" && key in acc ? acc[key] : "",
+      formik.values
+    );
+  }
+  return formik.values[name];
+};
+var getFieldError = (formik, name) => {
+  if (!name) return void 0;
+  if (name.includes(".")) {
+    if (name.includes("[")) {
+      return getNestedProperty(formik.errors, name);
+    }
+    return name.split(".").reduce(
+      (acc, key) => acc && typeof acc === "object" && key in acc ? acc[key] : "",
+      formik.errors
+    );
+  }
+  return formik.errors[name];
+};
+var getFieldTouched = (formik, name) => {
+  if (!name) return false;
+  if (name.includes(".")) {
+    if (name.includes("[")) {
+      return !!getNestedProperty(formik.touched, name);
+    }
+    return !!name.split(".").reduce(
+      (acc, key) => acc && typeof acc === "object" && key in acc ? acc[key] : false,
+      formik.touched
+    );
+  }
+  return !!formik.touched[name];
+};
+var EmptyField = ({
+  name,
+  customHandleChange,
+  formik: formikProp
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter } = uiLibrary;
+  const Input = adapter.Input;
+  const activeFormik = formikProp || formik;
+  const fieldValue = getFieldValue(activeFormik, name) || "";
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      id: name,
+      type: "hidden",
+      name,
+      className: "d-none",
+      value: fieldValue,
+      onChange: (event) => {
+        if (customHandleChange) {
+          customHandleChange(event, "emptyField");
+        } else {
+          activeFormik.handleChange(event);
+        }
+      },
+      onBlur: activeFormik.handleBlur
+    }
+  );
+};
+var FieldWrapper = ({
+  children,
+  className,
+  customClass,
+  isChild,
+  noIndent,
+  hidden,
+  index
+}) => {
+  if (hidden) {
+    return /* @__PURE__ */ jsx("div", { className: "d-none", children });
+  }
+  const wrapperClasses = [
+    customClass || "mb-4",
+    isChild && !noIndent ? "ps-5" : "",
+    className || ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: wrapperClasses, children }, index);
+};
+var IconRenderer = ({
+  Icon,
+  size = 16,
+  className
+}) => {
+  if (!Icon) return null;
+  return React7.createElement(Icon, { size, className });
+};
+var FieldLabel = ({
+  name,
+  label,
+  required,
+  showOptional,
+  info,
+  htmlFor,
+  className,
+  customLabelClass
+}) => {
+  const { uiLibrary } = useFormContext();
+  const { adapter, icons } = uiLibrary;
+  const Label = adapter.Label;
+  const IconButton = adapter.IconButton;
+  if (!label) return null;
+  const InfoIcon = icons?.Info;
+  return /* @__PURE__ */ jsxs(
+    Label,
+    {
+      htmlFor: htmlFor || name,
+      className: `${customLabelClass || className || ""}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: label }),
+        required && /* @__PURE__ */ jsx("span", { className: "text-danger", children: " *" }),
+        showOptional && /* @__PURE__ */ jsx("span", { className: "text-12 ps-1 text-body-tertiary", children: " (Optional)" }),
+        info && InfoIcon && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            className: "p-0",
+            "aria-label": "show info",
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx(IconRenderer, { Icon: InfoIcon, size: 16 })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/utils/field.utils.ts
+var formatString = (inputStr, ignoreChar = false) => {
+  if (!inputStr) return "";
+  let result = inputStr.replace(/_/g, "-").toLowerCase();
+  result = result.replace(/\s+/g, "-");
+  result = result.replace(/([a-z])([A-Z])/g, "$1-$2");
+  if (!ignoreChar) {
+    result = result.replace(/\//g, "-");
+  }
+  return result;
+};
+var camelToKebabCase = (str) => {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+};
+var sanitizeLabelForCSS = (label) => {
+  return label?.replace(/\s+/g, "_") || "";
+};
+var isBlank = (value) => {
+  return value === null || value === void 0 || value === "";
+};
+var isNotBlank = (value) => {
+  return !isBlank(value);
+};
+var FieldError = ({
+  name,
+  error,
+  touched,
+  showCustomError,
+  dataTestId,
+  className
+}) => {
+  if (!showCustomError && (!error || !touched)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "small",
+    {
+      id: "error",
+      "data-testid": dataTestId || `${formatString(name)}-error`,
+      className: className || "d-flex text-danger mt-1 text-12",
+      children: error
+    }
+  );
+};
+var TextField = ({
+  name,
+  label,
+  required,
+  customClass,
+  isChild,
+  noIndent,
+  hidden,
+  dataTestId,
+  showCustomError,
+  error: customError,
+  index,
+  formik: formikProp
+}) => {
+  const { formik } = useFormContext();
+  const activeFormik = formikProp || formik;
+  const fieldValue = getFieldValue(activeFormik, name);
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  const isGroupHeading = typeof name === "string" && name.endsWith("__heading");
+  const groupKeyForHeading = isGroupHeading ? name.split("__")[0] : null;
+  const groupLevelError = groupKeyForHeading ? getFieldError(activeFormik, groupKeyForHeading) : null;
+  const resolvedTextError = showCustomError && customError ? customError : groupLevelError || fieldError;
+  const showErrorNow = !!resolvedTextError && (fieldTouched || activeFormik.submitCount > 0 || showCustomError);
+  return /* @__PURE__ */ jsxs(
+    FieldWrapper,
+    {
+      customClass,
+      isChild,
+      noIndent,
+      hidden,
+      index,
+      children: [
+        label && /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            name,
+            label,
+            required
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { onClick: () => {
+        }, children: fieldValue }) }),
+        (showCustomError || showErrorNow) && /* @__PURE__ */ jsx(
+          FieldError,
+          {
+            name,
+            error: resolvedTextError,
+            touched: fieldTouched,
+            showCustomError,
+            dataTestId
+          }
+        )
+      ]
+    }
+  );
+};
+var FieldDescription = ({
+  desc,
+  className,
+  customDescClass
+}) => {
+  const { uiLibrary } = useFormContext();
+  const { adapter } = uiLibrary;
+  const FormHelperText = adapter.FormHelperText;
+  if (!desc) return null;
+  return /* @__PURE__ */ jsx(FormHelperText, { className: customDescClass || className || "", children: desc });
+};
+var LinkField = ({
+  name,
+  label,
+  desc,
+  required,
+  customClass,
+  customComponentClass,
+  isChild,
+  noIndent,
+  hidden,
+  onClickLink,
+  component,
+  targetType,
+  index
+}) => {
+  const handleClick = () => {
+    if (onClickLink) {
+      onClickLink();
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        hidden,
+        index,
+        children: [
+          label && /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: targetType === "blank" ? "#" : void 0,
+              target: targetType === "blank" ? "_blank" : void 0,
+              onClick: (e) => {
+                e.preventDefault();
+                handleClick();
+              },
+              style: { cursor: "pointer" },
+              children: [
+                label,
+                required && /* @__PURE__ */ jsx("span", { className: "text-danger", children: " *" })
+              ]
+            }
+          ),
+          desc && /* @__PURE__ */ jsx(FieldDescription, { desc })
+        ]
+      }
+    ),
+    component && /* @__PURE__ */ jsx("div", { className: customComponentClass || "mb-1 mx-1", children: component })
+  ] });
+};
+var ComponentField = ({
+  customClass,
+  isChild,
+  noIndent,
+  component,
+  blockComponent,
+  index
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    component && /* @__PURE__ */ jsx(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        index,
+        children: component
+      }
+    ),
+    blockComponent && /* @__PURE__ */ jsx(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        index,
+        children: blockComponent
+      }
+    )
+  ] });
+};
+var CustomField = ({
+  name,
+  label,
+  desc,
+  required,
+  customClass,
+  isChild,
+  noIndent,
+  hidden,
+  component,
+  index
+}) => {
+  return /* @__PURE__ */ jsxs(
+    FieldWrapper,
+    {
+      customClass,
+      isChild,
+      noIndent,
+      hidden,
+      index,
+      children: [
+        label && /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            name,
+            label,
+            required
+          }
+        ),
+        desc && /* @__PURE__ */ jsx(FieldDescription, { desc }),
+        /* @__PURE__ */ jsx("div", { children: component })
+      ]
+    }
+  );
+};
+var InputField = ({
+  name,
+  type,
+  label,
+  placeholder,
+  desc,
+  info,
+  required,
+  disabled,
+  hidden,
+  readonly,
+  fieldType = "text",
+  autocomplete,
+  customClass,
+  customLabelClass,
+  dataTestId,
+  isVisibleEnable,
+  isCopyEnable,
+  customIcon,
+  customHandleChange,
+  customFormChange,
+  component,
+  blockComponent,
+  showCustomError,
+  ref: inputRef,
+  onBlur,
+  isChild,
+  noIndent,
+  index,
+  formik: formikProp
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter, icons } = uiLibrary;
+  const Input = adapter.Input;
+  adapter.IconButton;
+  const activeFormik = formikProp || formik;
+  const [showField, setShowField] = useState({});
+  const fieldValue = getFieldValue(activeFormik, name);
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  const showFieldHandler = useCallback((fieldName) => {
+    setShowField((prev) => ({
+      ...prev,
+      [fieldName]: !prev[fieldName]
+    }));
+  }, []);
+  const handleCopy = useCallback(() => {
+    if (typeof window !== "undefined" && document) {
+      const input = document.getElementById(name);
+      if (input) {
+        input.select();
+        document.execCommand("copy");
+      }
+    }
+  }, [name]);
+  const VisibilityIcon = icons?.Visibility;
+  const VisibilityOffIcon = icons?.VisibilityOff;
+  const CopyIcon = icons?.Copy;
+  const inputType = fieldType === "password" ? !showField[name] ? "password" : "text" : fieldType;
+  return /* @__PURE__ */ jsxs(
+    FieldWrapper,
+    {
+      customClass,
+      isChild,
+      noIndent,
+      hidden,
+      index,
+      children: [
+        label && /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            name,
+            label,
+            required,
+            info,
+            customLabelClass
+          }
+        ),
+        desc && /* @__PURE__ */ jsx(FieldDescription, { desc }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `input-group ${isCopyEnable || isVisibleEnable ? "" : "rounded"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  className: `form-control font-14 ${isCopyEnable || isVisibleEnable || customIcon ? "border border-end-0" : "rounded"} ${fieldError && fieldTouched ? "border-danger" : ""}`,
+                  id: name,
+                  "data-testid": dataTestId || `${formatString(name)}-input`,
+                  ref: inputRef,
+                  autoComplete: autocomplete || fieldType === "password" ? "new-password" : "off",
+                  type: inputType,
+                  disabled: disabled || false,
+                  name,
+                  placeholder,
+                  value: fieldValue || "",
+                  onChange: (event) => {
+                    if (customHandleChange) {
+                      customHandleChange(event, type);
+                    } else if (customFormChange) {
+                      customFormChange(event, type);
+                    } else {
+                      activeFormik.handleChange(event);
+                    }
+                  },
+                  onBlur: onBlur || activeFormik.handleBlur,
+                  readOnly: readonly || false,
+                  error: !!(fieldError && fieldTouched)
+                }
+              ),
+              customIcon && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `z-0 bg-transparent btn btn-outline-secondary border-0 border-top border-bottom px-3 ${!isCopyEnable && !isVisibleEnable ? "border-end rounded-end" : ""} ${fieldError && fieldTouched ? "border-danger" : ""}`,
+                  style: { cursor: "default" },
+                  children: customIcon
+                }
+              ),
+              isVisibleEnable && VisibilityIcon && VisibilityOffIcon && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: `z-0 btn btn-outline-secondary border-0 rounded-0 border-top border-bottom ${!isCopyEnable ? "border-end rounded-end" : ""} ${fieldError && fieldTouched ? "border-danger" : ""}`,
+                  type: "button",
+                  "data-testid": `${formatString(name)}-visible-btn`,
+                  onClick: () => showFieldHandler(name),
+                  children: !showField[name] ? /* @__PURE__ */ jsx(IconRenderer, { Icon: VisibilityOffIcon, size: 16 }) : /* @__PURE__ */ jsx(IconRenderer, { Icon: VisibilityIcon, size: 16 })
+                }
+              ),
+              isCopyEnable && CopyIcon && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: `z-0 btn btn-outline-secondary border border-start-0 border-end rounded-end ${fieldError && fieldTouched ? "border-danger" : ""}`,
+                  type: "button",
+                  "data-testid": `${formatString(name)}-copy-btn`,
+                  "aria-label": "copy",
+                  onClick: handleCopy,
+                  children: /* @__PURE__ */ jsx(IconRenderer, { Icon: CopyIcon, size: 16 })
+                }
+              ),
+              component && /* @__PURE__ */ jsx("div", { children: component })
+            ]
+          }
+        ),
+        blockComponent && /* @__PURE__ */ jsx("div", { children: blockComponent }),
+        (showCustomError || fieldError && fieldTouched) && /* @__PURE__ */ jsx(
+          FieldError,
+          {
+            name,
+            error: fieldError,
+            touched: fieldTouched,
+            showCustomError,
+            dataTestId
+          }
+        )
+      ]
+    }
+  );
+};
+var TextareaField = ({
+  name,
+  type,
+  label,
+  placeholder,
+  desc,
+  required,
+  customClass,
+  customComponentClass,
+  isChild,
+  noIndent,
+  hidden,
+  readonly,
+  rows = 4,
+  dataTestId,
+  customHandleChange,
+  customFormChange,
+  component,
+  formik: formikProp
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter } = uiLibrary;
+  const Textarea = adapter.Textarea;
+  const activeFormik = formikProp || formik;
+  const fieldValue = getFieldValue(activeFormik, name);
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        hidden,
+        children: [
+          label && /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              name,
+              label,
+              required
+            }
+          ),
+          desc && /* @__PURE__ */ jsx(FieldDescription, { desc }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              id: name,
+              className: `form-control text-14 ${required && fieldError && fieldTouched ? "border-danger" : ""}`,
+              name,
+              "data-testid": dataTestId || `${formatString(name)}-text-box`,
+              placeholder,
+              rows,
+              value: fieldValue || "",
+              autoComplete: "off",
+              onChange: (event) => {
+                if (customHandleChange) {
+                  customHandleChange(event, type);
+                } else if (customFormChange) {
+                  customFormChange(event, type);
+                } else {
+                  activeFormik.handleChange(event);
+                }
+              },
+              onBlur: activeFormik.handleBlur,
+              readOnly: readonly || false,
+              disabled: readonly || false,
+              error: !!(required && fieldError && fieldTouched)
+            }
+          ) }),
+          required && fieldError && fieldTouched && /* @__PURE__ */ jsx(
+            FieldError,
+            {
+              name,
+              error: fieldError,
+              touched: fieldTouched,
+              dataTestId
+            }
+          )
+        ]
+      }
+    ),
+    component && /* @__PURE__ */ jsx("div", { className: customComponentClass || "mb-1 mx-1", children: component })
+  ] });
+};
+var CheckboxField = ({
+  name,
+  type,
+  label,
+  desc,
+  info,
+  required,
+  disabled,
+  customClass,
+  customComponentClass,
+  isChild,
+  noIndent,
+  hidden,
+  dataTestId,
+  showCustomError,
+  customHandleChange,
+  customFormChange,
+  component,
+  child,
+  formik: formikProp
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter, icons } = uiLibrary;
+  const Checkbox = adapter.Checkbox;
+  const FormHelperText = adapter.FormHelperText;
+  const IconButton = adapter.IconButton;
+  const activeFormik = formikProp || formik;
+  const fieldValue = getFieldValue(activeFormik, name);
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  const InfoIcon = icons?.Info;
+  const setFieldValuesRecursive = (childFields) => {
+    if (childFields) {
+      childFields.forEach((c) => {
+        activeFormik.setFieldValue(c.name, "");
+        activeFormik.setFieldTouched(c.name, false);
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        hidden,
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              id: name,
+              name,
+              "data-testid": dataTestId || `${formatString(name)}-check-box`,
+              checked: !!fieldValue,
+              disabled: disabled || false,
+              onChange: (event) => {
+                if (customHandleChange) {
+                  customHandleChange(event, type);
+                } else if (customFormChange) {
+                  customFormChange(event, type);
+                } else {
+                  activeFormik.handleChange(event);
+                }
+                if (!event.target.checked) {
+                  setFieldValuesRecursive(child);
+                }
+              },
+              label: /* @__PURE__ */ jsx("div", { className: "d-flex flex-column align-items-start", children: /* @__PURE__ */ jsxs("p", { className: "text-14 text-dark fw-medium align-items-center", children: [
+                label,
+                required && /* @__PURE__ */ jsx("span", { className: "text-danger", children: " *" }),
+                info && InfoIcon && /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "small",
+                    className: "p-0",
+                    "aria-label": "show info",
+                    tabIndex: -1,
+                    children: /* @__PURE__ */ jsx(IconRenderer, { Icon: InfoIcon, size: 16 })
+                  }
+                )
+              ] }) }),
+              error: !!(fieldError && fieldTouched)
+            }
+          ),
+          desc && /* @__PURE__ */ jsx(FormHelperText, { className: "text-black-50 mt-0 mb-1", children: desc }),
+          (showCustomError || fieldError && fieldTouched) && /* @__PURE__ */ jsx(
+            FieldError,
+            {
+              name,
+              error: fieldError,
+              touched: fieldTouched,
+              showCustomError,
+              dataTestId
+            }
+          ),
+          component && /* @__PURE__ */ jsx("div", { className: customComponentClass || "mb-1 mx-1", children: component })
+        ]
+      }
+    ),
+    child && child.map((c, childIndex) => {
+      return fieldValue && // This would need to be handled by DynamicForm orchestrator
+      // For now, we'll just render the child if value is truthy
+      null;
+    })
+  ] });
+};
+var RadioField = ({
+  name,
+  type,
+  label,
+  desc,
+  required,
+  disabled,
+  customClass,
+  customComponentClass,
+  isChild,
+  noIndent,
+  hidden,
+  values = {},
+  dataTestId,
+  customHandleChange,
+  customFormChange,
+  component,
+  child,
+  formik: formikProp
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter } = uiLibrary;
+  const Radio = adapter.Radio;
+  const FormHelperText = adapter.FormHelperText;
+  const activeFormik = formikProp || formik;
+  const fieldValue = getFieldValue(activeFormik, name);
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        hidden,
+        children: [
+          label && /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              name,
+              label,
+              required
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: name,
+              "data-testid": dataTestId || `${formatString(name)}-btn`,
+              role: "radiogroup",
+              children: Object.entries(values).map(([key, value], index) => /* @__PURE__ */ jsx(
+                Radio,
+                {
+                  name,
+                  value: key,
+                  checked: fieldValue === key || fieldValue === value,
+                  disabled: disabled || false,
+                  onChange: (event) => {
+                    if (customHandleChange) {
+                      customHandleChange(event, type);
+                    } else if (customFormChange) {
+                      customFormChange(event, type);
+                    } else {
+                      activeFormik.handleChange(event);
+                    }
+                    if (!event.target.checked && child) {
+                      child.forEach((c) => {
+                        activeFormik.setFieldValue(c.name, "");
+                      });
+                    }
+                  },
+                  label: /* @__PURE__ */ jsx("p", { className: "font-14 text-secondary m-0", children: value })
+                },
+                key
+              ))
+            }
+          ),
+          desc && /* @__PURE__ */ jsx(FormHelperText, { className: "text-black-50 mb-1", children: desc }),
+          fieldError && fieldTouched && /* @__PURE__ */ jsx(
+            FieldError,
+            {
+              name,
+              error: fieldError,
+              touched: fieldTouched,
+              dataTestId
+            }
+          ),
+          component && /* @__PURE__ */ jsx("div", { className: customComponentClass || "mb-1 mx-1", children: component })
+        ]
+      }
+    ),
+    child && child.map((c, i) => {
+      return null;
+    })
+  ] });
+};
+var DropdownField = ({
+  name,
+  type,
+  label,
+  desc,
+  info,
+  required,
+  disabled,
+  customClass,
+  isChild,
+  noIndent,
+  hidden,
+  values = {},
+  headerKey,
+  dataTestId,
+  isCopyEnable,
+  resetChild = true,
+  ignoreChar,
+  customHandleChange,
+  customFormChange,
+  component,
+  child,
+  setFieldValuesRecursive,
+  formik: formikProp,
+  index
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter } = uiLibrary;
+  const Select = adapter.Select;
+  const FormControl = adapter.FormControl;
+  const activeFormik = formikProp || formik;
+  const fieldValue = getFieldValue(activeFormik, name);
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  const handleSetFieldValuesRecursive = (childFields, parentValue) => {
+    if (childFields && setFieldValuesRecursive) {
+      setFieldValuesRecursive(childFields, parentValue);
+    }
+  };
+  const options = Array.isArray(values) ? values : Object.entries(values).map(([key, value]) => ({
+    value: key,
+    label: value || key
+  }));
+  const sortedOptions = [...options].sort((a, b) => {
+    if (a.value === "") return -1;
+    return 0;
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        hidden,
+        index,
+        children: /* @__PURE__ */ jsxs(
+          FormControl,
+          {
+            className: "w-100",
+            required,
+            error: !!(fieldTouched && fieldError),
+            children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  name,
+                  label,
+                  required,
+                  info
+                }
+              ),
+              desc && /* @__PURE__ */ jsx(FieldDescription, { desc }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  className: `form-select text-14 ${isCopyEnable ? "border border-end-0" : ""} ${fieldError && fieldTouched ? "border-danger" : ""}`,
+                  id: name,
+                  name,
+                  "data-testid": dataTestId || `${formatString(name)}-dropdown`,
+                  disabled: disabled || false,
+                  value: fieldValue || "",
+                  onChange: (event) => {
+                    if (customHandleChange) {
+                      customHandleChange(event, type, typeof index === "number" ? index : void 0);
+                    } else if (customFormChange) {
+                      customFormChange(event, type);
+                    } else {
+                      activeFormik.handleChange(event);
+                    }
+                    if (resetChild) {
+                      handleSetFieldValuesRecursive(child, event.target.value);
+                    }
+                  },
+                  onBlur: activeFormik.handleBlur,
+                  error: !!(fieldError && fieldTouched),
+                  children: [
+                    headerKey && /* @__PURE__ */ jsx("option", { children: headerKey }),
+                    sortedOptions.map((option, i) => /* @__PURE__ */ jsx(
+                      "option",
+                      {
+                        "data-testid": `${formatString(String(option.value), ignoreChar)}-option`,
+                        value: option.value,
+                        children: option.label
+                      },
+                      i
+                    ))
+                  ]
+                }
+              ),
+              fieldError && fieldTouched && /* @__PURE__ */ jsx(
+                FieldError,
+                {
+                  name,
+                  error: fieldError,
+                  touched: fieldTouched,
+                  dataTestId
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    child && child.map((childField, childIndex) => {
+      return null;
+    }),
+    component && /* @__PURE__ */ jsx("div", { className: "mb-1 mx-1", children: component })
+  ] });
+};
+var ToggleField = ({
+  name,
+  type,
+  label,
+  required,
+  disabled,
+  customClass,
+  isChild,
+  noIndent,
+  dataTestId,
+  customHandleChange,
+  customFormChange,
+  formik: formikProp
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter } = uiLibrary;
+  const Switch = adapter.Switch;
+  const activeFormik = formikProp || formik;
+  const fieldValue = getFieldValue(activeFormik, name);
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `d-flex gap-2 align-items-center ${isChild && !noIndent ? "ps-5" : ""}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id: name,
+            name,
+            "data-testid": dataTestId || `${formatString(name)}-check-box`,
+            disabled: disabled || false,
+            checked: !!fieldValue,
+            onChange: (event) => {
+              const newValue = event.target.checked;
+              if (customHandleChange) {
+                customHandleChange(event, type);
+              } else if (customFormChange) {
+                customFormChange(event, type);
+              } else {
+                activeFormik.setFieldValue(name, newValue);
+              }
+            }
+          }
+        ),
+        label && /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            name,
+            label,
+            required,
+            htmlFor: name
+          }
+        ),
+        fieldError && fieldTouched && /* @__PURE__ */ jsx(
+          FieldError,
+          {
+            name,
+            error: fieldError,
+            touched: fieldTouched,
+            dataTestId
+          }
+        )
+      ]
+    }
+  );
+};
+var FileUploadField = ({
+  name,
+  type,
+  label,
+  info,
+  required,
+  customClass,
+  customComponentClass,
+  isChild,
+  noIndent,
+  dataTestId,
+  customHandleChange,
+  customFormChange,
+  component,
+  ref: inputRef,
+  formik: formikProp,
+  index
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter, icons } = uiLibrary;
+  adapter.Input;
+  const Button = adapter.Button;
+  adapter.IconButton;
+  const activeFormik = formikProp || formik;
+  const fieldValue = getFieldValue(activeFormik, name);
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  icons?.Info;
+  const DeleteIcon = icons?.Delete;
+  const handleRemoveFile = () => {
+    activeFormik.setFieldValue(name, null);
+  };
+  const fileValue = fieldValue;
+  const fileName = fileValue instanceof File ? fileValue.name : typeof fileValue === "string" ? fileValue.split("/").pop() : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        index,
+        children: [
+          label && /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              name,
+              label,
+              required,
+              info
+            }
+          ),
+          !fileValue && /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: `form-control ${required && fieldError && fieldTouched ? "border-danger" : ""}`,
+              type: "file",
+              id: name,
+              name,
+              "data-testid": dataTestId || `${formatString(name)}-file`,
+              ref: inputRef,
+              onChange: (event) => {
+                if (customHandleChange) {
+                  customHandleChange(event, type);
+                } else if (customFormChange) {
+                  customFormChange(event, type);
+                } else {
+                  activeFormik.handleChange(event);
+                }
+                if (event.currentTarget.files?.[0]) {
+                  activeFormik.setFieldValue(name, event.currentTarget.files[0]);
+                }
+              },
+              onBlur: activeFormik.handleBlur
+            }
+          ),
+          required && fieldError && fieldTouched && /* @__PURE__ */ jsx(
+            FieldError,
+            {
+              name,
+              error: fieldError,
+              touched: fieldTouched,
+              dataTestId
+            }
+          ),
+          fileValue && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                "File: ",
+                fileName
+              ] }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "text",
+                  "data-testid": `${formatString(name)}-remove-btn`,
+                  className: "text-14 text-capitalize p-1 text-danger gap-1 col-3",
+                  onClick: handleRemoveFile,
+                  children: [
+                    DeleteIcon && /* @__PURE__ */ jsx(IconRenderer, { Icon: DeleteIcon, size: 16 }),
+                    " Remove File"
+                  ]
+                }
+              )
+            ] }),
+            fieldError && /* @__PURE__ */ jsx(
+              FieldError,
+              {
+                name,
+                error: fieldError,
+                touched: fieldTouched,
+                dataTestId
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    component && /* @__PURE__ */ jsx("div", { className: customComponentClass || "mb-1 mx-1", children: component })
+  ] });
+};
+var SingleSelectField = ({
+  name,
+  type,
+  label,
+  desc,
+  info,
+  required,
+  disabled,
+  customClass,
+  customComponentClass,
+  isChild,
+  noIndent,
+  hidden,
+  values = [],
+  isSearchable,
+  isMulti = false,
+  optionsLabel,
+  dataTestId,
+  customHandleChange,
+  customFormChange,
+  component,
+  child,
+  setFieldValuesRecursive,
+  formik: formikProp,
+  index
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter } = uiLibrary;
+  const FormControl = adapter.FormControl;
+  const activeFormik = formikProp || formik;
+  const fieldValue = getFieldValue(activeFormik, name);
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  const options = Array.isArray(values) ? values : Object.entries(values).map(([value, label2]) => ({
+    value,
+    label: String(label2)
+  }));
+  const selectedOption = fieldValue ? options.find((opt) => opt.value === fieldValue) : null;
+  const handleSelectChange = (selected) => {
+    const event = {
+      target: {
+        name,
+        value: selected ? selected.value : ""
+      }
+    };
+    if (customHandleChange) {
+      customHandleChange(event, type);
+    } else if (customFormChange) {
+      customFormChange(event, type);
+    } else {
+      activeFormik.handleChange(event);
+    }
+    if (child && setFieldValuesRecursive) {
+      setFieldValuesRecursive(child);
+    }
+  };
+  const Select = adapter.Select;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        hidden,
+        index,
+        children: /* @__PURE__ */ jsxs(
+          FormControl,
+          {
+            className: "w-100",
+            required,
+            error: !!(fieldTouched && fieldError),
+            children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  name,
+                  label,
+                  required,
+                  info
+                }
+              ),
+              desc && /* @__PURE__ */ jsx(FieldDescription, { desc }),
+              /* @__PURE__ */ jsx("div", { "data-testid": dataTestId || `${formatString(name)}-single-select`, children: /* @__PURE__ */ jsx(
+                Select,
+                {
+                  className: `text-14 ${isMulti ? "" : ""} ${fieldError && fieldTouched ? "border-danger" : ""}`,
+                  name,
+                  disabled: disabled || false,
+                  value: selectedOption ? String(selectedOption.value) : "",
+                  onChange: (event) => {
+                    const selected = options.find(
+                      (opt) => String(opt.value) === event.target.value
+                    );
+                    handleSelectChange(selected || null);
+                  },
+                  onBlur: activeFormik.handleBlur,
+                  error: !!(fieldError && fieldTouched),
+                  children: options.map((option) => /* @__PURE__ */ jsx("option", { value: String(option.value), children: option.label }, option.value))
+                }
+              ) }),
+              fieldError && fieldTouched && /* @__PURE__ */ jsx(
+                FieldError,
+                {
+                  name,
+                  error: fieldError,
+                  touched: fieldTouched,
+                  dataTestId
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    child && child.map((childField, childIndex) => {
+      return null;
+    }),
+    component && /* @__PURE__ */ jsx("div", { className: customComponentClass || "mb-1 mx-1", children: component })
+  ] });
+};
+var MultiSelectField = ({
+  name,
+  type,
+  label,
+  desc,
+  info,
+  required,
+  customClass,
+  customDescClass,
+  customComponentClass,
+  isChild,
+  noIndent,
+  hidden,
+  values = [],
+  dataTestId,
+  customHandleChange,
+  component,
+  blockComponent,
+  formik: formikProp,
+  index
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter } = uiLibrary;
+  const FormControl = adapter.FormControl;
+  const activeFormik = formikProp || formik;
+  const fieldValue = getFieldValue(activeFormik, name);
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  const options = Array.isArray(values) ? values : Object.entries(values).map(([value, label2]) => ({
+    value,
+    label: String(label2)
+  }));
+  const selectedValues = Array.isArray(fieldValue) ? fieldValue : [];
+  const handleChange = (event) => {
+    const selectedOptions = Array.from(
+      event.target.selectedOptions,
+      (option) => option.value
+    );
+    const syntheticEvent = {
+      target: {
+        name,
+        value: selectedOptions
+      }
+    };
+    if (customHandleChange) {
+      customHandleChange(syntheticEvent, "multiSelect");
+    } else {
+      activeFormik.setFieldValue(name, selectedOptions);
+    }
+  };
+  adapter.Select;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        hidden,
+        index,
+        "data-testid": dataTestId || `${formatString(name)}-multi-select`,
+        children: [
+          blockComponent && /* @__PURE__ */ jsx("div", { children: blockComponent }),
+          /* @__PURE__ */ jsxs(FormControl, { className: "w-100", required, children: [
+            label && /* @__PURE__ */ jsx(
+              FieldLabel,
+              {
+                name,
+                label,
+                required,
+                info
+              }
+            ),
+            desc && /* @__PURE__ */ jsx(FieldDescription, { desc, customDescClass }),
+            /* @__PURE__ */ jsx("div", { "data-testid": dataTestId || `${formatString(name)}-select`, children: /* @__PURE__ */ jsx(
+              "select",
+              {
+                name,
+                multiple: true,
+                value: selectedValues.map(String),
+                onChange: handleChange,
+                onBlur: activeFormik.handleBlur,
+                className: `form-select text-14 ${fieldError && fieldTouched ? "border-danger" : ""}`,
+                children: options.map((option) => /* @__PURE__ */ jsx("option", { value: String(option.value), children: option.label }, option.value))
+              }
+            ) }),
+            fieldError && fieldTouched && /* @__PURE__ */ jsx(
+              FieldError,
+              {
+                name,
+                error: fieldError,
+                touched: fieldTouched,
+                dataTestId
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    component && /* @__PURE__ */ jsx("div", { className: customComponentClass || "mb-1 mx-1", children: component })
+  ] });
+};
+var AsyncSelectField = ({
+  name,
+  type,
+  label,
+  desc,
+  info,
+  required,
+  disabled,
+  customClass,
+  customComponentClass,
+  isChild,
+  noIndent,
+  hidden,
+  values = [],
+  isMulti = false,
+  loaderCall,
+  dataTestId,
+  customHandleChange,
+  customFormChange,
+  component,
+  child,
+  setFieldValuesRecursive,
+  formik: formikProp,
+  index
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter } = uiLibrary;
+  const FormControl = adapter.FormControl;
+  const activeFormik = formikProp || formik;
+  const [asyncLoading, setAsyncLoading] = useState(false);
+  const fieldValue = getFieldValue(activeFormik, name);
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  const handleChange = (event) => {
+    if (customHandleChange) {
+      customHandleChange(event, type);
+    } else if (customFormChange) {
+      customFormChange(event, type);
+    } else {
+      activeFormik.handleChange(event);
+    }
+    if (child && setFieldValuesRecursive) {
+      setFieldValuesRecursive(child);
+    }
+  };
+  const Select = adapter.Select;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        hidden,
+        index,
+        "data-testid": dataTestId || `${formatString(name)}-async-select`,
+        children: /* @__PURE__ */ jsxs(
+          FormControl,
+          {
+            className: "w-100",
+            required,
+            error: !!(fieldTouched && fieldError),
+            children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  name,
+                  label,
+                  required,
+                  info
+                }
+              ),
+              desc && /* @__PURE__ */ jsx(FieldDescription, { desc }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-testid": dataTestId || `${formatString(name)}-async-select`,
+                  children: /* @__PURE__ */ jsxs(
+                    Select,
+                    {
+                      name,
+                      disabled,
+                      value: fieldValue ? String(fieldValue) : "",
+                      onChange: handleChange,
+                      onBlur: activeFormik.handleBlur,
+                      error: !!(fieldError && fieldTouched),
+                      children: [
+                        asyncLoading && /* @__PURE__ */ jsx("option", { children: "Loading..." }),
+                        !asyncLoading && values && (Array.isArray(values) ? values : Object.entries(values).map(([value, label2]) => ({
+                          value,
+                          label: String(label2)
+                        }))).map((option) => /* @__PURE__ */ jsx("option", { value: String(option.value), children: option.label }, option.value))
+                      ]
+                    }
+                  )
+                }
+              ),
+              fieldError && fieldTouched && /* @__PURE__ */ jsx(
+                FieldError,
+                {
+                  name,
+                  error: fieldError,
+                  touched: fieldTouched,
+                  dataTestId
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    child && child.map((childField, childIndex) => {
+      return null;
+    }),
+    component && /* @__PURE__ */ jsx("div", { className: customComponentClass || "mb-1 mx-1", children: component })
+  ] });
+};
+var DatePickerField = ({
+  name,
+  type,
+  label,
+  info,
+  required,
+  disabled,
+  customClass,
+  isChild,
+  noIndent,
+  hidden,
+  dateFormat = "DD/MM/YYYY",
+  dataTestId,
+  component,
+  formik: formikProp,
+  index
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter } = uiLibrary;
+  const activeFormik = formikProp || formik;
+  const fieldValue = getFieldValue(activeFormik, name);
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  const DatePicker = adapter.DatePicker;
+  const Input = adapter.Input;
+  const handleDateChange = (date) => {
+    let formattedDate = "";
+    if (date) {
+      if (typeof date === "string") {
+        formattedDate = date;
+      } else if (date instanceof Date) {
+        const day = String(date.getDate()).padStart(2, "0");
+        const month = String(date.getMonth() + 1).padStart(2, "0");
+        const year = date.getFullYear();
+        formattedDate = `${day}/${month}/${year}`;
+      }
+    }
+    activeFormik.setFieldValue(name, formattedDate);
+  };
+  if (!DatePicker) {
+    return /* @__PURE__ */ jsxs(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        hidden,
+        index,
+        children: [
+          label && /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              name,
+              label,
+              required,
+              info
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "col-xs-12 col-md-5 col-sm-9 px-0", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "date",
+              name,
+              "data-testid": dataTestId || `${formatString(name)}-date-picker`,
+              value: fieldValue || "",
+              onChange: (event) => activeFormik.handleChange(event),
+              onBlur: activeFormik.handleBlur,
+              disabled: disabled || false,
+              error: !!(fieldError && fieldTouched)
+            }
+          ) }),
+          fieldError && fieldTouched && /* @__PURE__ */ jsx(
+            FieldError,
+            {
+              name,
+              error: fieldError,
+              touched: fieldTouched,
+              dataTestId
+            }
+          ),
+          component && /* @__PURE__ */ jsx("div", { className: "mt-3", children: component })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    FieldWrapper,
+    {
+      customClass,
+      isChild,
+      noIndent,
+      hidden,
+      index,
+      children: [
+        label && /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            name,
+            label,
+            required,
+            info
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "col-xs-12 col-md-5 col-sm-9 px-0", children: /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            value: fieldValue || null,
+            onChange: handleDateChange,
+            format: dateFormat,
+            disabled,
+            "data-testid": dataTestId || `${formatString(name)}-date-picker`
+          }
+        ) }),
+        fieldError && fieldTouched && /* @__PURE__ */ jsx(
+          FieldError,
+          {
+            name,
+            error: fieldError,
+            touched: fieldTouched,
+            dataTestId
+          }
+        ),
+        component && /* @__PURE__ */ jsx("div", { className: "mt-3", children: component })
+      ]
+    }
+  );
+};
+var DateTimePickerField = ({
+  name,
+  type,
+  label,
+  desc,
+  info,
+  required,
+  disabled,
+  customClass,
+  customComponentClass,
+  isChild,
+  noIndent,
+  hidden,
+  views,
+  disablePast,
+  dataTestId,
+  customHandleChange,
+  customFormChange,
+  component,
+  child,
+  formik: formikProp,
+  index
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter } = uiLibrary;
+  const FormControl = adapter.FormControl;
+  const activeFormik = formikProp || formik;
+  const fieldValue = getFieldValue(activeFormik, name);
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  const DateTimePicker = adapter.DateTimePicker;
+  const Input = adapter.Input;
+  const handleDateTimeChange = (date) => {
+    const event = {
+      name,
+      value: date
+    };
+    if (customHandleChange) {
+      customHandleChange(event, type);
+    } else if (customFormChange) {
+      customFormChange(event, type);
+    } else {
+      activeFormik.handleChange(event);
+    }
+  };
+  const format = Array.isArray(views) && views.length === 2 && views[0] === "day" && views[1] === "hours" ? "DD/MM/YYYY HH:mm:ss" : "DD/MM/YYYY HH:mm";
+  if (!DateTimePicker) {
+    return /* @__PURE__ */ jsx(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        hidden,
+        index,
+        children: /* @__PURE__ */ jsxs(
+          FormControl,
+          {
+            className: "w-100",
+            required,
+            error: !!(fieldTouched && fieldError),
+            children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  name,
+                  label,
+                  required,
+                  info
+                }
+              ),
+              desc && /* @__PURE__ */ jsx(FieldDescription, { desc }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "datetime-local",
+                  name,
+                  "data-testid": dataTestId || `${formatString(name)}-date-time-picker`,
+                  value: fieldValue || "",
+                  onChange: (event) => activeFormik.handleChange(event),
+                  onBlur: activeFormik.handleBlur,
+                  disabled: disabled || false,
+                  error: !!(fieldError && fieldTouched)
+                }
+              ),
+              fieldError && fieldTouched && /* @__PURE__ */ jsx(
+                FieldError,
+                {
+                  name,
+                  error: fieldError,
+                  touched: fieldTouched,
+                  dataTestId
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        hidden,
+        index,
+        children: /* @__PURE__ */ jsxs(
+          FormControl,
+          {
+            className: "w-100",
+            required,
+            error: !!(fieldTouched && fieldError),
+            children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  name,
+                  label,
+                  required,
+                  info
+                }
+              ),
+              desc && /* @__PURE__ */ jsx(FieldDescription, { desc }),
+              /* @__PURE__ */ jsx(
+                DateTimePicker,
+                {
+                  value: fieldValue || null,
+                  onChange: handleDateTimeChange,
+                  format,
+                  disabled,
+                  views,
+                  disablePast,
+                  "data-testid": dataTestId || `${formatString(name)}-date-time-picker`
+                }
+              ),
+              fieldError && fieldTouched && /* @__PURE__ */ jsx(
+                FieldError,
+                {
+                  name,
+                  error: fieldError,
+                  touched: fieldTouched,
+                  dataTestId
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    child && child.map((childField, childIndex) => {
+      return null;
+    }),
+    component && /* @__PURE__ */ jsx("div", { className: customComponentClass || "mb-1 mx-1", children: component })
+  ] });
+};
+var DeleteField = ({
+  name,
+  type,
+  handleDeleteAttribute,
+  index
+}) => {
+  const { uiLibrary } = useFormContext();
+  const { adapter, icons } = uiLibrary;
+  const IconButton = adapter.IconButton;
+  const DeleteIcon = icons?.Delete;
+  const handleClick = () => {
+    if (handleDeleteAttribute) {
+      handleDeleteAttribute(name);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "col-1", children: DeleteIcon && IconButton ? /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      role: "button",
+      "data-testid": `${formatString(name)}-delete-btn`,
+      onClick: handleClick,
+      className: "text-danger fs-4 mt-3",
+      children: /* @__PURE__ */ jsx(IconRenderer, { Icon: DeleteIcon, size: 20 })
+    }
+  ) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-testid": `${formatString(name)}-delete-btn`,
+      onClick: handleClick,
+      className: "text-danger fs-4 mt-3",
+      children: "\xD7"
+    }
+  ) }, index);
+};
+var CounterField = ({
+  name,
+  type,
+  label,
+  desc,
+  info,
+  required,
+  customClass,
+  customComponentClass,
+  isChild,
+  noIndent,
+  hidden,
+  min,
+  max,
+  suffix,
+  dataTestId,
+  customHandleChange,
+  customFormChange,
+  component,
+  child,
+  formik: formikProp,
+  index
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter } = uiLibrary;
+  const FormControl = adapter.FormControl;
+  const Button = adapter.Button;
+  const Input = adapter.Input;
+  const activeFormik = formikProp || formik;
+  const fieldValue = getFieldValue(activeFormik, name);
+  const numericValue = Number(fieldValue) || 0;
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  const handleIncrement = () => {
+    const newValue = max !== void 0 ? Math.min(numericValue + 1, max) : numericValue + 1;
+    const event = {
+      name,
+      value: newValue
+    };
+    if (customHandleChange) {
+      customHandleChange(event, type);
+    } else if (customFormChange) {
+      customFormChange(event, type);
+    } else {
+      activeFormik.handleChange(event);
+    }
+  };
+  const handleDecrement = () => {
+    const newValue = min !== void 0 ? Math.max(numericValue - 1, min) : numericValue - 1;
+    const event = {
+      name,
+      value: newValue
+    };
+    if (customHandleChange) {
+      customHandleChange(event, type);
+    } else if (customFormChange) {
+      customFormChange(event, type);
+    } else {
+      activeFormik.handleChange(event);
+    }
+  };
+  const handleInputChange = (event) => {
+    const value = Number(event.target.value);
+    if (isNaN(value)) return;
+    let newValue = value;
+    if (min !== void 0 && value < min) newValue = min;
+    if (max !== void 0 && value > max) newValue = max;
+    const syntheticEvent = {
+      target: {
+        name,
+        value: newValue
+      }
+    };
+    if (customHandleChange) {
+      customHandleChange(syntheticEvent, type);
+    } else if (customFormChange) {
+      customFormChange(syntheticEvent, type);
+    } else {
+      activeFormik.handleChange(syntheticEvent);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FieldWrapper,
+      {
+        customClass,
+        isChild,
+        noIndent,
+        hidden,
+        index,
+        children: /* @__PURE__ */ jsxs(
+          FormControl,
+          {
+            className: "w-100",
+            required,
+            error: !!(fieldTouched && fieldError),
+            children: [
+              label && /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  name,
+                  label,
+                  required,
+                  info
+                }
+              ),
+              desc && /* @__PURE__ */ jsx(FieldDescription, { desc }),
+              /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    onClick: handleDecrement,
+                    disabled: min !== void 0 && numericValue <= min,
+                    children: "\u2212"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "number",
+                    name,
+                    "data-testid": dataTestId || `${formatString(name)}-counter`,
+                    value: numericValue,
+                    onChange: handleInputChange,
+                    onBlur: activeFormik.handleBlur,
+                    min,
+                    max,
+                    className: "text-center",
+                    style: { width: "80px" },
+                    error: !!(fieldError && fieldTouched)
+                  }
+                ),
+                suffix && /* @__PURE__ */ jsx("span", { children: suffix }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    onClick: handleIncrement,
+                    disabled: max !== void 0 && numericValue >= max,
+                    children: "+"
+                  }
+                )
+              ] }),
+              fieldError && fieldTouched && /* @__PURE__ */ jsx(
+                FieldError,
+                {
+                  name,
+                  error: fieldError,
+                  touched: fieldTouched,
+                  dataTestId
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    child && child.map((childField, childIndex) => {
+      return null;
+    }),
+    component && /* @__PURE__ */ jsx("div", { className: customComponentClass || "mb-1 mx-1", children: component })
+  ] });
+};
+
+// src/hooks/useTranslation.ts
+var useTranslation = () => {
+  return {
+    t: (key) => {
+      const translations = {
+        "COMMON:add": "Add",
+        "COMMON:choose_attribute": "Choose Attribute",
+        "COMMON:attribute_mapping.no_attributes_added": "No attributes added"
+      };
+      return translations[key] || key;
+    }
+  };
+};
+var FieldArrayField = ({
+  name,
+  type,
+  label,
+  desc,
+  info,
+  required,
+  showOptional,
+  customClass,
+  customComponentClass,
+  isButtonVisible = true,
+  buttonLabel,
+  properties,
+  component,
+  formik: formikProp,
+  index
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter, icons } = uiLibrary;
+  const Input = adapter.Input;
+  const Button = adapter.Button;
+  const IconButton = adapter.IconButton;
+  const activeFormik = formikProp || formik;
+  const { t } = useTranslation();
+  const fieldValue = getFieldValue(activeFormik, name);
+  const arrayValue = Array.isArray(fieldValue) ? fieldValue : [];
+  const AddIcon = icons?.Add;
+  const DeleteIcon = icons?.Delete;
+  const deleteRow = (indexToDelete) => {
+    const updatedArray = arrayValue.filter((_, i) => i !== indexToDelete);
+    activeFormik.setFieldValue(name, updatedArray);
+  };
+  const addRow = () => {
+    if (properties?.isKeyValue) {
+      activeFormik.setFieldValue(name, [...arrayValue, { key: "", value: "" }]);
+    } else {
+      activeFormik.setFieldValue(name, [...arrayValue, ""]);
+    }
+  };
+  const isKeyValue = properties?.isKeyValue || false;
+  return /* @__PURE__ */ jsxs(FieldWrapper, { customClass, index, children: [
+    label && /* @__PURE__ */ jsx(
+      FieldLabel,
+      {
+        name,
+        label,
+        required,
+        showOptional,
+        info
+      }
+    ),
+    desc && /* @__PURE__ */ jsx(FieldDescription, { desc }),
+    component && /* @__PURE__ */ jsx("div", { className: customComponentClass || "mb-2", children: component }),
+    isKeyValue ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      arrayValue.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", { className: "d-flex mb-2 gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "col", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              name: `${name}[${itemIndex}].key`,
+              "data-testid": formatString(name) + "-key-field",
+              className: `form-control font-14 ${activeFormik.touched[name]?.[itemIndex] && activeFormik.errors[name]?.[itemIndex]?.key ? "border-danger" : ""}`,
+              value: item.key || "",
+              onChange: (event) => {
+                const newValue = [...arrayValue];
+                newValue[itemIndex] = {
+                  ...newValue[itemIndex],
+                  key: event.target.value
+                };
+                activeFormik.setFieldValue(name, newValue);
+              },
+              onBlur: activeFormik.handleBlur,
+              placeholder: properties?.keyPlaceholder || "Enter key",
+              autoComplete: "off"
+            }
+          ),
+          (() => {
+            const errorKey = activeFormik.errors[name]?.[itemIndex]?.key;
+            const isTouched = activeFormik.touched[name]?.[itemIndex];
+            return isTouched && errorKey ? /* @__PURE__ */ jsx(
+              "small",
+              {
+                "data-testid": `${formatString(name)}-key-error`,
+                className: "d-flex text-danger mt-1 text-12",
+                children: String(errorKey)
+              }
+            ) : null;
+          })()
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "col", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              name: `${name}[${itemIndex}].value`,
+              "data-testid": formatString(name) + "-value-field",
+              className: `form-control font-14 ${activeFormik.touched[name]?.[itemIndex] && activeFormik.errors[name]?.[itemIndex]?.value ? "border-danger" : ""}`,
+              value: item.value || "",
+              onChange: (event) => {
+                const newValue = [...arrayValue];
+                newValue[itemIndex] = {
+                  ...newValue[itemIndex],
+                  value: event.target.value
+                };
+                activeFormik.setFieldValue(name, newValue);
+              },
+              onBlur: activeFormik.handleBlur,
+              placeholder: properties?.valuePlaceholder || "Enter value",
+              autoComplete: "off"
+            }
+          ),
+          (() => {
+            const errorValue = activeFormik.errors[name]?.[itemIndex]?.value;
+            const isTouched = activeFormik.touched[name]?.[itemIndex];
+            return isTouched && errorValue ? /* @__PURE__ */ jsx(
+              "small",
+              {
+                "data-testid": `${formatString(name)}-value-error`,
+                className: "d-flex text-danger mt-1 text-12",
+                children: String(errorValue)
+              }
+            ) : null;
+          })()
+        ] }),
+        arrayValue.length !== 1 && /* @__PURE__ */ jsx("div", { children: IconButton && DeleteIcon ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            "data-testid": `${formatString(name)}-del-btn`,
+            onClick: () => deleteRow(itemIndex),
+            children: /* @__PURE__ */ jsx(IconRenderer, { Icon: DeleteIcon, size: 20, className: "text-danger" })
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-testid": `${formatString(name)}-del-btn`,
+            onClick: () => deleteRow(itemIndex),
+            children: "\xD7"
+          }
+        ) })
+      ] }, itemIndex)),
+      isButtonVisible && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "text",
+          className: "text-primary text-capitalize text-start",
+          startIcon: AddIcon ? /* @__PURE__ */ jsx(IconRenderer, { Icon: AddIcon, size: 16 }) : "+",
+          "data-testid": `${formatString(name)}-add-btn`,
+          onClick: addRow,
+          children: buttonLabel || t("COMMON:add")
+        }
+      ) })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      arrayValue.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", { className: "d-flex mb-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "col", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              name: `${name}[${itemIndex}]`,
+              "data-testid": formatString(name) + "-field",
+              className: `form-control font-14 ${activeFormik.touched[name]?.[itemIndex] && activeFormik.errors[name]?.[itemIndex] ? "border-danger" : ""}`,
+              value: item,
+              onChange: (event) => {
+                const newValue = [...arrayValue];
+                newValue[itemIndex] = event.target.value;
+                activeFormik.setFieldValue(name, newValue);
+              },
+              onBlur: activeFormik.handleBlur,
+              autoComplete: "off"
+            }
+          ),
+          (() => {
+            const error = activeFormik.errors[name]?.[itemIndex];
+            const isTouched = activeFormik.touched[name]?.[itemIndex];
+            return isTouched && error ? /* @__PURE__ */ jsx(
+              "small",
+              {
+                "data-testid": `${formatString(name)}-error`,
+                className: "d-flex text-danger mt-1 text-12",
+                children: String(error)
+              }
+            ) : null;
+          })()
+        ] }),
+        arrayValue.length !== 1 && /* @__PURE__ */ jsx("div", { children: IconButton && DeleteIcon ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            "data-testid": `${formatString(name)}-del-btn`,
+            onClick: () => deleteRow(itemIndex),
+            children: /* @__PURE__ */ jsx(IconRenderer, { Icon: DeleteIcon, size: 20, className: "text-danger" })
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-testid": `${formatString(name)}-del-btn`,
+            onClick: () => deleteRow(itemIndex),
+            children: "\xD7"
+          }
+        ) })
+      ] }, itemIndex)),
+      isButtonVisible && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "text",
+          className: "text-primary text-capitalize text-start",
+          startIcon: AddIcon ? /* @__PURE__ */ jsx(IconRenderer, { Icon: AddIcon, size: 16 }) : "+",
+          "data-testid": `${formatString(name)}-add-btn`,
+          onClick: addRow,
+          children: buttonLabel || t("COMMON:add")
+        }
+      ) })
+    ] })
+  ] });
+};
+var PROPERTY_FIELD_MAP = {
+  inputfield: InputField,
+  dropdown: DropdownField,
+  checkbox: CheckboxField,
+  radiobtn: RadioField,
+  textarea: TextareaField,
+  fileupload: FileUploadField,
+  multiSelect: MultiSelectField,
+  singleSelect: SingleSelectField,
+  component: ComponentField,
+  link: LinkField
+};
+var AttributeField = ({
+  name,
+  type,
+  label,
+  desc,
+  required,
+  customClass,
+  customAttrClass,
+  showIllustration = true,
+  showAddNewFieldBtn = true,
+  addNewFieldBtnLabel,
+  properties = [],
+  addNewField = {},
+  component,
+  formik: formikProp,
+  minimumValuePresent = false,
+  index,
+  setFieldValuesRecursive,
+  customFormChange
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter, icons } = uiLibrary;
+  const Button = adapter.Button;
+  const IconButton = adapter.IconButton;
+  const activeFormik = formikProp || formik;
+  const { t } = useTranslation();
+  const AddIcon = icons?.Add;
+  const DeleteIcon = icons?.Delete;
+  const attributeValues = getNestedValueNew(activeFormik.values, name);
+  const attributeValuesAlt = getNestedProperty(activeFormik.values, name);
+  const valuesArray = Array.isArray(attributeValues) ? attributeValues : Array.isArray(attributeValuesAlt) ? attributeValuesAlt : [];
+  const deleteRow = (indexToDelete) => {
+    const currentValues = getNestedProperty(activeFormik.values, name);
+    const valuesArray2 = Array.isArray(currentValues) ? currentValues : [];
+    const updatedArray = valuesArray2.filter((_, i) => i !== indexToDelete);
+    activeFormik.setFieldValue(name, updatedArray);
+  };
+  const addNewAttribute = () => {
+    const currentValues = getNestedProperty(activeFormik.values, name);
+    const valuesArray2 = Array.isArray(currentValues) ? currentValues : [];
+    activeFormik.setFieldValue(name, [...valuesArray2, addNewField]);
+  };
+  const hasNoAttributes = valuesArray.length === 0 || typeof valuesArray === "object" && Object.keys(valuesArray).length === 0;
+  const renderPropertyField = (property, propIndex) => {
+    const PropertyComponent = PROPERTY_FIELD_MAP[property.type];
+    if (!PropertyComponent) {
+      console.warn(`Unknown property type in AttributeField: ${property.type}`);
+      return null;
+    }
+    const propertyProps = {
+      ...property,
+      formik: activeFormik,
+      index: propIndex,
+      setFieldValuesRecursive,
+      customFormChange
+    };
+    return /* @__PURE__ */ jsx(PropertyComponent, { ...propertyProps }, propIndex);
+  };
+  return /* @__PURE__ */ jsxs(FieldWrapper, { customClass, index, children: [
+    label && /* @__PURE__ */ jsx(
+      FieldLabel,
+      {
+        name,
+        label,
+        required
+      }
+    ),
+    desc && /* @__PURE__ */ jsx(FieldDescription, { desc }),
+    component && /* @__PURE__ */ jsx("div", { className: "mt-3", children: component }),
+    showIllustration && hasNoAttributes ? /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column justify-content-center align-items-center gap-4 pt-4", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-testid": "no-attr-img",
+          style: {
+            width: "200px",
+            height: "200px",
+            backgroundColor: "#f0f0f0",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: "No Image"
+        }
+      ),
+      /* @__PURE__ */ jsx("h6", { "data-testid": "no-attr-text", className: "mb-4", children: t("COMMON:attribute_mapping.no_attributes_added") })
+    ] }) : valuesArray.map((item, itemIndex) => {
+      const transformedProperties = properties.map((property) => ({
+        ...property,
+        name: `${name}[${itemIndex}].${property.name}`,
+        child: property.child?.map((childItem) => ({
+          ...childItem,
+          name: `${name}[${itemIndex}].${childItem.name}`
+        }))
+      }));
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: customAttrClass || "d-flex flex-row gap-3 mb-3",
+          children: [
+            transformedProperties.map((property, propIndex) => {
+              return /* @__PURE__ */ jsx(React7.Fragment, { children: renderPropertyField(property, propIndex) }, propIndex);
+            }),
+            (minimumValuePresent ? valuesArray.length > 1 : true) && /* @__PURE__ */ jsx("div", { className: "col-1 mt-4 pt-1", children: /* @__PURE__ */ jsx("div", { className: minimumValuePresent ? "mt-0" : "", children: IconButton && DeleteIcon ? /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                onClick: () => deleteRow(itemIndex),
+                "data-testid": `${formatString(name)}-delete-icon`,
+                children: /* @__PURE__ */ jsx(IconRenderer, { Icon: DeleteIcon, size: 20, className: "text-danger" })
+              }
+            ) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => deleteRow(itemIndex),
+                "data-testid": `${formatString(name)}-delete-icon`,
+                children: "\xD7"
+              }
+            ) }) })
+          ]
+        },
+        itemIndex
+      );
+    }),
+    showAddNewFieldBtn && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: valuesArray.length ? "" : `d-flex ${showIllustration ? "justify-content-center" : "justify-content-start"} align-items-center`,
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "text",
+            className: "text-primary text-capitalize text-start",
+            startIcon: AddIcon ? /* @__PURE__ */ jsx(IconRenderer, { Icon: AddIcon, size: 16 }) : "+",
+            "data-testid": "add-attr-btn",
+            onClick: addNewAttribute,
+            children: addNewFieldBtnLabel ?? "Add"
+          }
+        )
+      }
+    )
+  ] });
+};
+var EditableDivField = ({
+  name,
+  type,
+  label,
+  placeholder,
+  desc,
+  info,
+  required,
+  readonly,
+  customClass,
+  isCopyEnable,
+  isVisibleEnable,
+  dataTestId,
+  availableFields = [],
+  customHandleChange,
+  customFormChange,
+  component,
+  showCustomError,
+  formik: formikProp,
+  index
+}) => {
+  const { uiLibrary, formik } = useFormContext();
+  const { adapter, icons } = uiLibrary;
+  const Box = adapter.Box;
+  const Popover = adapter.Popover;
+  const Paper = adapter.Paper;
+  const MenuItem = adapter.MenuItem;
+  const Typography = adapter.Typography;
+  adapter.IconButton;
+  const activeFormik = formikProp || formik;
+  const { t } = useTranslation();
+  const [showPlaceholder, setShowPlaceholder] = useState({});
+  const [anchorElEditableDiv, setAnchorElEditableDiv] = useState(null);
+  const [activeSpan, setActiveSpan] = useState(null);
+  const [prevKey, setPrevKey] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
+  const editorRefEditableDiv = useRef(null);
+  const fieldTimeoutRef = useRef(null);
+  const isFieldFocusedRef = useRef(false);
+  getFieldValue(activeFormik, name);
+  const fieldError = getFieldError(activeFormik, name);
+  const fieldTouched = getFieldTouched(activeFormik, name);
+  const CopyIcon = icons?.Copy;
+  const VisibilityIcon = icons?.Visibility;
+  const VisibilityOffIcon = icons?.VisibilityOff;
+  const checkPlaceholderVisibility = useCallback((content, fieldName) => {
+    const isEmpty = !content || content.trim() === "" || content === "\u200B";
+    setShowPlaceholder((prev) => ({
+      ...prev,
+      [fieldName]: isEmpty
+    }));
+  }, []);
+  const setCursorToEnd = useCallback(() => {
+    if (editorRefEditableDiv.current) {
+      const editor = editorRefEditableDiv.current;
+      if (editor.childNodes.length > 0) {
+        const range = document.createRange();
+        const selection = window.getSelection();
+        if (selection) {
+          range.selectNodeContents(editor);
+          range.collapse(false);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+        editor.focus();
+      } else {
+        editor.focus();
+      }
+    }
+  }, []);
+  const setEditorContentWithSpans = useCallback((expression, fields) => {
+    if (!editorRefEditableDiv.current) return;
+    const editor = editorRefEditableDiv.current;
+    editor.innerHTML = "";
+    const parts = expression.split(/(\{\{[^}]+\}\}|\$\{[^}]+\})/);
+    parts.forEach((part) => {
+      let key = null;
+      if (part.startsWith("{{") && part.endsWith("}}")) {
+        key = part.slice(2, -2);
+      }
+      if (key) {
+        const field = fields.find((f) => f.key === key);
+        if (field) {
+          const span = document.createElement("span");
+          span.className = "field-span";
+          span.contentEditable = "false";
+          span.style.cursor = "pointer";
+          span.innerText = `{{${field.key}}}`;
+          editor.appendChild(span);
+        } else {
+          editor.appendChild(document.createTextNode(part));
+        }
+      } else if (part) {
+        editor.appendChild(document.createTextNode(part));
+      }
+    });
+  }, [availableFields]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "{" && prevKey === "{") {
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "Backspace") {
+      const sel = window.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        const range = sel.getRangeAt(0);
+        const { startContainer, startOffset } = range;
+        if (startContainer.nodeType === Node.TEXT_NODE && startOffset === 0 && startContainer.previousSibling && startContainer.previousSibling.classList?.contains("field-span")) {
+          e.preventDefault();
+          const prevSibling = startContainer.previousSibling;
+          if (prevSibling.parentNode) {
+            prevSibling.parentNode.removeChild(prevSibling);
+          }
+          return;
+        }
+        if (startContainer.nodeType === Node.ELEMENT_NODE && startContainer.classList?.contains("field-span")) {
+          e.preventDefault();
+          if (startContainer.parentNode) {
+            startContainer.parentNode.removeChild(startContainer);
+          }
+        }
+      }
+    }
+  }, [prevKey]);
+  const handleKeyUp = useCallback((e) => {
+    const currentKey = e.key;
+    if (currentKey === "{" && prevKey === "{" && !e.defaultPrevented) {
+      const selection = window.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        const { startContainer, startOffset } = range;
+        if (startContainer.nodeType === Node.TEXT_NODE) {
+          const textContent = startContainer.textContent || "";
+          const beforeCursor = textContent.substring(0, startOffset);
+          if (beforeCursor.endsWith("{")) {
+            if (editorRefEditableDiv.current) {
+              setAnchorElEditableDiv(editorRefEditableDiv.current);
+            }
+          }
+        }
+      }
+    }
+    setPrevKey(currentKey);
+  }, [prevKey]);
+  const handleFieldSelect = useCallback((item) => {
+    if (!editorRefEditableDiv.current) return;
+    const newSpan = document.createElement("span");
+    newSpan.className = "field-span";
+    newSpan.contentEditable = "false";
+    newSpan.style.cursor = "pointer";
+    newSpan.innerText = `{{${item.key}}}`;
+    if (activeSpan) {
+      activeSpan.replaceWith(newSpan);
+      const spaceNode = document.createTextNode("\u200B");
+      newSpan.after(spaceNode);
+      if (spaceNode.parentNode) {
+        const range = document.createRange();
+        range.setStartAfter(spaceNode);
+        range.setEndAfter(spaceNode);
+        const sel = window.getSelection();
+        if (sel) {
+          sel.removeAllRanges();
+          sel.addRange(range);
+        }
+      }
+      setActiveSpan(null);
+    } else {
+      const selection = window.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        range.deleteContents();
+        range.insertNode(newSpan);
+        const spaceNode = document.createTextNode("\u200B");
+        newSpan.after(spaceNode);
+        const newRange = document.createRange();
+        newRange.setStartAfter(spaceNode);
+        newRange.setEndAfter(spaceNode);
+        const sel = window.getSelection();
+        if (sel) {
+          sel.removeAllRanges();
+          sel.addRange(newRange);
+        }
+      }
+    }
+    const content = editorRefEditableDiv.current.innerText;
+    if (customHandleChange) {
+      customHandleChange(
+        { target: { name, value: content } },
+        "editablediv"
+      );
+    } else if (customFormChange) {
+      customFormChange(
+        { target: { name, value: content } },
+        "editablediv"
+      );
+    } else {
+      activeFormik.setFieldValue(name, content);
+    }
+    setAnchorElEditableDiv(null);
+    setTimeout(() => {
+      setCursorToEnd();
+    }, 0);
+  }, [activeSpan, name, customHandleChange, customFormChange, activeFormik, setCursorToEnd]);
+  useEffect(() => {
+    if (editorRefEditableDiv.current && activeFormik.values && !isTyping && availableFields.length > 0) {
+      const fieldValue2 = getNestedProperty(activeFormik.values, name);
+      checkPlaceholderVisibility(String(fieldValue2 || ""), name);
+      setTimeout(() => {
+        setEditorContentWithSpans(String(fieldValue2 || ""), availableFields);
+      }, 0);
+    }
+  }, [activeFormik.values, name, isTyping, availableFields, checkPlaceholderVisibility, setEditorContentWithSpans]);
+  useEffect(() => {
+    return () => {
+      if (fieldTimeoutRef.current) {
+        clearTimeout(fieldTimeoutRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(FieldWrapper, { customClass, index, children: [
+    label && /* @__PURE__ */ jsx(
+      FieldLabel,
+      {
+        name,
+        label,
+        required,
+        info
+      }
+    ),
+    desc && /* @__PURE__ */ jsx(FieldDescription, { desc }),
+    /* @__PURE__ */ jsxs("div", { className: `input-group ${isCopyEnable || isVisibleEnable ? "" : "rounded"}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "d-flex w-100 flex-wrap", children: [
+        /* @__PURE__ */ jsxs(Box, { className: "w-100 d-flex flex-column align-items-start position-relative", children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              contentEditable: !readonly,
+              ref: editorRefEditableDiv,
+              id: name,
+              onKeyDown: handleKeyDown,
+              onKeyUp: handleKeyUp,
+              onInput: (event) => {
+                const content = event.target.innerText;
+                setIsTyping(true);
+                checkPlaceholderVisibility(content, name);
+                if (fieldTimeoutRef.current) {
+                  clearTimeout(fieldTimeoutRef.current);
+                }
+                if (isFieldFocusedRef.current) {
+                  fieldTimeoutRef.current = setTimeout(() => {
+                    setIsTyping(false);
+                  }, 9e3);
+                }
+                if (customHandleChange) {
+                  customHandleChange(
+                    { target: { name, value: content } },
+                    type
+                  );
+                } else if (customFormChange) {
+                  customFormChange(
+                    { target: { name, value: content } },
+                    type
+                  );
+                } else {
+                  activeFormik.setFieldValue(name, content);
+                }
+              },
+              onPaste: (e) => {
+                e.preventDefault();
+                const text = (e.clipboardData || window.clipboardData)?.getData("text/plain") || "";
+                const selection = window.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                  const range = selection.getRangeAt(0);
+                  range.deleteContents();
+                  range.insertNode(document.createTextNode(text));
+                  range.collapse(false);
+                  selection.removeAllRanges();
+                  selection.addRange(range);
+                }
+                const editor = e.target;
+                const content = editor.innerText;
+                checkPlaceholderVisibility(content, name);
+                if (availableFields.length > 0) {
+                  setTimeout(() => {
+                    setEditorContentWithSpans(content, availableFields);
+                    setCursorToEnd();
+                  }, 0);
+                }
+                if (customHandleChange) {
+                  customHandleChange(
+                    { target: { name, value: content } },
+                    type
+                  );
+                } else if (customFormChange) {
+                  customFormChange(
+                    { target: { name, value: content } },
+                    type
+                  );
+                } else {
+                  activeFormik.setFieldValue(name, content);
+                }
+              },
+              onClick: (e) => {
+                const target = e.target;
+                if (target.classList?.contains("field-span")) {
+                  setActiveSpan(target);
+                  setAnchorElEditableDiv(target);
+                  setIsTyping(true);
+                }
+              },
+              suppressContentEditableWarning: true,
+              "data-testid": dataTestId || `${formatString(name)}-editable-div`,
+              className: `form-control ${isCopyEnable || isVisibleEnable ? "border border-end-0" : "rounded"} ${fieldError && fieldTouched ? "border-danger" : ""}`,
+              style: {
+                borderRadius: "8px",
+                border: "1px solid #dee2e6",
+                padding: "6px 12px",
+                display: "inline-block",
+                flexGrow: 1,
+                minHeight: "37px"
+              },
+              onFocus: () => {
+                isFieldFocusedRef.current = true;
+                setIsTyping(true);
+                const content = editorRefEditableDiv.current?.innerText || "";
+                checkPlaceholderVisibility(content, name);
+              },
+              onBlur: (event) => {
+                isFieldFocusedRef.current = false;
+                if (fieldTimeoutRef.current) {
+                  clearTimeout(fieldTimeoutRef.current);
+                  fieldTimeoutRef.current = null;
+                }
+                const content = event.target.innerText;
+                checkPlaceholderVisibility(content, name);
+                activeFormik.setFieldValue(name, content);
+                const syntheticEvent = {
+                  ...event,
+                  target: { name, value: content }
+                };
+                activeFormik.handleBlur(syntheticEvent);
+              },
+              readOnly: readonly || false
+            }
+          ),
+          showPlaceholder[name] && placeholder && /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                position: "absolute",
+                top: "8px",
+                left: "12px",
+                color: "#acadaf",
+                pointerEvents: "none",
+                fontSize: "14px",
+                zIndex: 1
+              },
+              children: placeholder
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            open: Boolean(anchorElEditableDiv),
+            anchorEl: anchorElEditableDiv,
+            onClose: () => setAnchorElEditableDiv(null),
+            anchorOrigin: { vertical: "bottom", horizontal: "left" },
+            "data-testid": `${formatString(name)}-attribute-popover`,
+            children: /* @__PURE__ */ jsxs(
+              Paper,
+              {
+                elevation: 3,
+                className: "attribute-popover",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      style: {
+                        padding: "12px 16px",
+                        backgroundColor: "#f8f9fa",
+                        borderBottom: "1px solid #e0e0e0"
+                      },
+                      children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", color: "text.secondary", children: t("COMMON:choose_attribute") })
+                    }
+                  ),
+                  availableFields.map((item) => /* @__PURE__ */ jsxs(
+                    MenuItem,
+                    {
+                      "data-testid": `${formatString(name)}-attribute-${item.key}`,
+                      onClick: () => handleFieldSelect(item),
+                      className: "d-flex justify-content-between align-items-center",
+                      children: [
+                        /* @__PURE__ */ jsx(Typography, { children: item.label }),
+                        /* @__PURE__ */ jsx(Typography, { color: "text.secondary", className: "text-12", children: item.key })
+                      ]
+                    },
+                    item.key
+                  ))
+                ]
+              }
+            )
+          }
+        )
+      ] }),
+      isVisibleEnable && VisibilityIcon && VisibilityOffIcon && /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `z-0 btn btn-outline-secondary border-0 rounded-0 border-top border-bottom ${!isCopyEnable ? "border-end rounded-end" : ""} ${fieldError && fieldTouched ? "border-danger" : ""}`,
+          type: "button",
+          "data-testid": `${formatString(name)}-visible-btn`,
+          onClick: () => {
+          },
+          children: /* @__PURE__ */ jsx(IconRenderer, { Icon: VisibilityIcon, size: 16 })
+        }
+      ),
+      isCopyEnable && CopyIcon && /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `z-0 btn btn-outline-secondary border border-start-0 border-end rounded-end ${fieldError && fieldTouched ? "border-danger" : ""}`,
+          type: "button",
+          "data-testid": `${formatString(name)}-copy-btn`,
+          "aria-label": "copy",
+          onClick: () => {
+            if (editorRefEditableDiv.current) {
+              const text = editorRefEditableDiv.current.innerText;
+              navigator.clipboard.writeText(text);
+            }
+          },
+          children: /* @__PURE__ */ jsx(IconRenderer, { Icon: CopyIcon, size: 16 })
+        }
+      ),
+      component && /* @__PURE__ */ jsx("div", { children: component })
+    ] }),
+    (showCustomError || fieldError && fieldTouched) && /* @__PURE__ */ jsx(
+      FieldError,
+      {
+        name,
+        error: fieldError,
+        touched: fieldTouched,
+        showCustomError,
+        dataTestId
+      }
+    )
+  ] });
+};
+var FIELD_COMPONENT_MAP = {
+  emptyField: EmptyField,
+  text: TextField,
+  link: LinkField,
+  component: ComponentField,
+  custom: CustomField,
+  inputfield: InputField,
+  textarea: TextareaField,
+  checkbox: CheckboxField,
+  radiobtn: RadioField,
+  dropdown: DropdownField,
+  toggle: ToggleField,
+  fileupload: FileUploadField,
+  singleSelect: SingleSelectField,
+  multiSelect: MultiSelectField,
+  asyncSelect: AsyncSelectField,
+  datePicker: DatePickerField,
+  dateTimePicker: DateTimePickerField,
+  delete: DeleteField,
+  counter: CounterField,
+  fieldArray: FieldArrayField,
+  attribute: AttributeField,
+  editablediv: EditableDivField
+};
+var DynamicForm = ({
+  fields,
+  formik,
+  firstInitialValues,
+  fieldCount,
+  attributeFields,
+  customFormChange,
+  RadiusTab = false,
+  uiLibrary
+}) => {
+  const [formFields, setFormFields] = useState([]);
+  const activeUILibrary = uiLibrary || {
+    adapter: defaultAdapter,
+    icons: defaultIcons,
+    name: "default"
+  };
+  useEffect(() => {
+    const newFormFields = fields?.filter((item) => item !== false);
+    setFormFields(newFormFields);
+  }, [fields]);
+  const setFieldValuesRecursive = useCallback(
+    (child, parentValue = null) => {
+      if (!child) return;
+      child.forEach((c) => {
+        if (RadiusTab) {
+          if (!c.hidden || parentValue === c.hiddenlabel) {
+            const hasValues = "values" in c && c.values;
+            const fieldValue = hasValues && typeof c.values === "object" && !Array.isArray(c.values) && Object.keys(c.values).length > 0 ? Object.keys(c.values)[0] : firstInitialValues ? getNestedProperty(firstInitialValues, c.name) : "";
+            formik.setFieldValue(c.name, fieldValue);
+          }
+        } else {
+          const value = firstInitialValues ? getNestedProperty(firstInitialValues, c.name) : void 0;
+          formik.setFieldValue(c.name, value === void 0 ? "" : value);
+          formik.setFieldTouched(c.name, false);
+        }
+        if (c.child) {
+          setFieldValuesRecursive(c.child, parentValue);
+        }
+      });
+    },
+    [formik, firstInitialValues, RadiusTab]
+  );
+  const renderField = (field, index, isChild = false) => {
+    if (!field) return null;
+    if (field.shouldHide && field.shouldHide({
+      formik,
+      name: field.name,
+      index: typeof index === "number" ? index : void 0
+    })) {
+      return null;
+    }
+    const FieldComponent = FIELD_COMPONENT_MAP[field.type];
+    if (!FieldComponent) {
+      console.warn(`Unknown field type: ${field.type}`);
+      return null;
+    }
+    const fieldProps = {
+      ...field,
+      formik,
+      index,
+      isChild,
+      setFieldValuesRecursive,
+      customFormChange
+    };
+    const fieldElement = /* @__PURE__ */ jsx(FieldComponent, { ...fieldProps }, `${field.name}-${index}`);
+    if (field.child && field.child.length > 0) {
+      const fieldValue = getFieldValue(formik, field.name);
+      const valuePath = getNestedProperty(formik.values, field.name);
+      return /* @__PURE__ */ jsxs(React7.Fragment, { children: [
+        fieldElement,
+        field.child.map((childField, childIndex) => {
+          const shouldShowChild = fieldValue === childField.hiddenlabel || valuePath === childField.hiddenlabel || field.type === "checkbox" && fieldValue || field.type === "radiobtn" && (fieldValue === childField.targetType || String(fieldValue) === String(childField.targetType)) || field.type === "attribute" && true;
+          if (shouldShowChild) {
+            return renderField(
+              childField,
+              `child-${childField.name}-${childIndex}`,
+              true
+            );
+          }
+          return null;
+        })
+      ] }, `${field.name}-${index}`);
+    }
+    return fieldElement;
+  };
+  const groupFormFieldsIntoRows = () => {
+    if (!fieldCount) return [];
+    const rows = [];
+    for (let i = 0; i < fieldCount; i += 1) {
+      const startIdx = i * 3;
+      const endIdx = startIdx + 3;
+      const rowFields = formFields.slice(startIdx, endIdx);
+      rows.push(rowFields);
+    }
+    return rows;
+  };
+  if (attributeFields !== void 0) {
+    return /* @__PURE__ */ jsx(FormProvider, { uiLibrary: activeUILibrary, formik, children: /* @__PURE__ */ jsx("div", { className: "row", children: groupFormFieldsIntoRows().map((rowFields, rowIndex) => /* @__PURE__ */ jsx("div", { className: "row", children: rowFields.map((fieldValue, index) => {
+      const uniqueKey = `${fieldValue?.label || fieldValue?.name}-${index}`;
+      return /* @__PURE__ */ jsx(React7.Fragment, { children: renderField(fieldValue, uniqueKey) }, uniqueKey);
+    }) }, rowIndex)) }) });
+  }
+  return /* @__PURE__ */ jsx(FormProvider, { uiLibrary: activeUILibrary, formik, children: /* @__PURE__ */ jsx("div", { className: "row mx-0", children: formFields.map((fieldValue, index) => {
+    const uniqueKey = `${fieldValue?.label || fieldValue?.name}-${index}`;
+    return renderField(fieldValue, uniqueKey);
+  }) }) });
+};
+
+// src/icons/mui.icons.tsx
+var createMUIIcons = (Info, Visibility, VisibilityOff, Copy, Add, Delete) => {
+  return {
+    Info,
+    Visibility,
+    VisibilityOff,
+    Copy,
+    Add,
+    Delete
+  };
+};
+
+// src/icons/bootstrap.icons.tsx
+var createBootstrapIcons = (Info, Visibility, VisibilityOff, Copy, Add, Delete) => {
+  return {
+    Info,
+    Visibility,
+    VisibilityOff,
+    Copy,
+    Add,
+    Delete
+  };
+};
+
+// src/icons/antd.icons.tsx
+var createAntDesignIcons = (Info, Visibility, VisibilityOff, Copy, Add, Delete) => {
+  return {
+    Info,
+    Visibility,
+    VisibilityOff,
+    Copy,
+    Add,
+    Delete
+  };
+};
+
+// src/utils/validation.utils.ts
+var validateEmail = (email) => {
+  if (!email) return false;
+  const value = email.trim().toLowerCase();
+  const strictRegex = /^[a-z0-9]+([._-]?[a-z0-9]+)*@[a-z0-9]+([.-]?[a-z0-9]+)*\.[a-z]{2,}$/;
+  return strictRegex.test(value);
+};
+var isValidUrl = (url) => {
+  if (!url) return false;
+  try {
+    const urlObj = new URL(url);
+    return urlObj.protocol === "http:" || urlObj.protocol === "https:";
+  } catch {
+    return false;
+  }
+};
+var checkValidUsername = (username, minLength, maxLength) => {
+  const regex = new RegExp(`^[a-zA-Z0-9-_\\.]{${minLength},${maxLength}}$`);
+  return regex.test(String(username));
+};
+
+export { AsyncSelectField, AttributeField, CheckboxField, ComponentField, CounterField, CustomField, DatePickerField, DateTimePickerField, DeleteField, DropdownField, DynamicForm, EditableDivField, EmptyField, FieldArrayField, FieldDescription, FieldError, FieldLabel, FieldWrapper, FileUploadField, FormProvider, InputField, LinkField, MultiSelectField, RadioField, SingleSelectField, TextField, TextareaField, ToggleField, camelToKebabCase, checkValidUsername, createAntDesignAdapter, createAntDesignIcons, createBootstrapAdapter, createBootstrapIcons, createMUIAdapter, createMUIIcons, defaultAdapter, defaultIcons, formatString, getFieldError, getFieldTouched, getFieldValue, getNestedProperty, getNestedValueNew, isBlank, isNotBlank, isValidUrl, sanitizeLabelForCSS, useFormContext, validateEmail };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map