@react-fabric/form 1.0.0-beta.60 → 1.0.0-beta.62

package/dist/esm/select/List.js

@@ -1,9 +1,7 @@
 'use client';
 
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { useFloating, autoUpdate, useListNavigation, useTypeahead, useInteractions, FloatingFocusManager } from '@floating-ui/react';
 import { Chip } from '@react-fabric/core';
 import { isArray, isEmpty } from '@react-fabric/utilities';
@@ -31,8 +29,10 @@ var List = function List(_ref) {
     options = _ref.options,
     height = _ref.height,
     groupProperty = _ref.groupProperty,
-    labelProperty = _ref.labelProperty,
-    valueProperty = _ref.valueProperty,
+    _ref$labelProperty = _ref.labelProperty,
+    labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
+    _ref$valueProperty = _ref.valueProperty,
+    valueProperty = _ref$valueProperty === void 0 ? "value" : _ref$valueProperty,
     infoProperty = _ref.infoProperty,
     sortProperty = _ref.sortProperty,
     multiple = _ref.multiple,
@@ -259,26 +259,10 @@ var List = function List(_ref) {
         itemProps: makeItemProps,
         empty: emptyDisplay,
         info: (_state$activeItem = state.activeItem) === null || _state$activeItem === void 0 ? void 0 : _state$activeItem[infoProperty !== null && infoProperty !== void 0 ? infoProperty : "info"],
-        children: ( /*#__PURE__*/function () {
-          var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item, label) {
-            var _renderer3;
-            return _regeneratorRuntime.wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  _context.next = 2;
-                  return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
-                case 2:
-                  return _context.abrupt("return", _context.sent);
-                case 3:
-                case "end":
-                  return _context.stop();
-              }
-            }, _callee);
-          }));
-          return function (_x, _x2) {
-            return _ref4.apply(this, arguments);
-          };
-        }())
+        children: function children(item, label) {
+          var _renderer3;
+          return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
+        }
       }))
     })]
   }));

package/dist/esm/select/Select.js

@@ -1,11 +1,9 @@
 'use client';
 
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { useFloating, autoUpdate, shift, flip, offset, useClick, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
-import { Chip, Icon, CoreIcons } from '@react-fabric/core';
+import { Chip, Icon } from '@react-fabric/core';
 import { isArray, isEmpty } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useId, useMemo, useCallback, useLayoutEffect } from 'react';
@@ -36,7 +34,7 @@ var Select = function Select(_ref) {
     _ref$labelProperty = _ref.labelProperty,
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
     _ref$valueProperty = _ref.valueProperty,
-    valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
+    valueProperty = _ref$valueProperty === void 0 ? "value" : _ref$valueProperty,
     sortProperty = _ref.sortProperty,
     infoProperty = _ref.infoProperty,
     multiple = _ref.multiple,
@@ -200,7 +198,7 @@ var Select = function Select(_ref) {
     } else if (!isEmpty(state.value) && !state.query) {
       var _ref3, _renderer2;
       return /*#__PURE__*/jsx("span", {
-        className: "self-center pointer-events-none select-none",
+        className: "self-center pointer-events-none select-none truncate leading-tight",
         children: (_ref3 = (_renderer2 = renderer === null || renderer === void 0 ? void 0 : renderer(state.value)) !== null && _renderer2 !== void 0 ? _renderer2 : state.value[labelProperty]) !== null && _ref3 !== void 0 ? _ref3 : state.value
       });
     }
@@ -248,7 +246,7 @@ var Select = function Select(_ref) {
         size: 1,
         ref: ref,
         autoFocus: autoFocus,
-        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
+        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer", disabled && "cursor-not-allowed pointer-events-none", multiple ? "min-w-24" : "min-w-2"),
         placeholder: isEmpty(state.value) ? placeholder : "",
         onChange: function onChange(evt) {
           return handleQuery(evt.target.value);
@@ -259,11 +257,10 @@ var Select = function Select(_ref) {
       onClick: function onClick() {
         return !disabled && openDropdown();
       },
-      icon: CoreIcons.chevronDown
+      icon: "icon-[mdi--chevron-down]"
     }), state.loading && /*#__PURE__*/jsx(Icon, {
-      animate: "spin",
       className: classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
-      icon: CoreIcons.spinner
+      icon: "icon-[svg-spinners--eclipse]"
     }), state.open && !state.loading && /*#__PURE__*/jsx(FloatingPortal, {
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
@@ -284,26 +281,10 @@ var Select = function Select(_ref) {
           itemProps: makeItemProps,
           empty: emptyDisplay,
           info: (_state$activeItem = state.activeItem) === null || _state$activeItem === void 0 ? void 0 : _state$activeItem[infoProperty !== null && infoProperty !== void 0 ? infoProperty : "info"],
-          children: ( /*#__PURE__*/function () {
-            var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item, label) {
-              var _renderer3;
-              return _regeneratorRuntime.wrap(function _callee$(_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    _context.next = 2;
-                    return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
-                  case 2:
-                    return _context.abrupt("return", _context.sent);
-                  case 3:
-                  case "end":
-                    return _context.stop();
-                }
-              }, _callee);
-            }));
-            return function (_x, _x2) {
-              return _ref4.apply(this, arguments);
-            };
-          }())
+          children: function children(item, label) {
+            var _renderer3;
+            return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
+          }
         }))
       })
     })]

package/dist/types/builder/FileField.d.ts

@@ -1,10 +1,11 @@
 import { type UploadHandler } from "../hooks/useFileUploader";
 import { type FileSchema, type ValueType } from "../types/schema";
-export declare const FileField: ({ uploadHandler, inline, label, accept, value, fileUrl, multiple, invalid, error, ...rest }: Partial<FileSchema & ValueType> & {
+export declare const FileField: ({ uploadHandler, inline, label, accept, value, fileUrl, onChange, multiple, invalid, error, ...rest }: Partial<FileSchema & ValueType> & {
     value?: AnyObject;
     inline?: boolean;
     invalid?: boolean;
     error?: AnyObject;
+    onChange?: (value: any) => void;
     fileUrl?: (path: string) => string;
     uploadHandler: UploadHandler;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/form/Form.d.ts

@@ -1,6 +1,5 @@
-import { type yup } from "@react-fabric/utilities";
 import { type PropsWithChildren, type Ref } from "react";
-import { type FormState } from "react-hook-form";
+import { type FormState, type Resolver } from "react-hook-form";
 type NestedKeyOf<T extends object> = {
     [K in keyof T & (string | number)]: T[K] extends object ? `${K}` | `${K}.${NestedKeyOf<T[K]>}` : K;
 }[keyof T & (string | number)];
@@ -17,13 +16,18 @@ export interface FormRef<K extends KeyValue> {
 export interface FormProps<K extends KeyValue = KeyValue> {
     formRef?: Ref<FormRef<K>>;
     /**
-     * form data schema
+     * react-hook-form resolver for validation
+     * @see {@link https://react-hook-form.com/ts#Resolver}
      */
-    schema?: yup.ObjectSchema<K>;
+    resolver?: Resolver<K>;
     /**
      * default data values
      */
-    defaultValues?: K;
+    defaultValues?: K | Promise<K>;
+    /**
+     * reset values on defaultValues change (workaround for using fetch result)
+     */
+    resetOnChange?: boolean;
     /**
      * change callback
      */
@@ -45,10 +49,7 @@ export interface FormProps<K extends KeyValue = KeyValue> {
  * ```jsx
  * <Form
  *   formRef={formRef}
- *   schema={yup.object().shape({
- *     name: yup.string().required("Name is required"),
- *     email: yup.string().email("Invalid email").required("Email is required"),
- *   })}
+ *   resolver={hookformResolver(schema)}
  *   defaultValues={{ name: "", email: "" }}
  *   onSubmit={(values) => {
  *     console.log("Form submitted with values:", values);
@@ -64,7 +65,7 @@ export interface FormProps<K extends KeyValue = KeyValue> {
  * @see {@link https://react-hook-form.com/docs/useform} for more details on the properties.
  * @see {@link https://github.com/jquense/yup} for more details on the Yup validation schema.
  */
-export declare const Form: <K extends KeyValue>({ formRef, schema, children, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: <K extends KeyValue>({ formRef, resolver, children, resetOnChange, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
 export declare const useForm: <K extends KeyValue = KeyValue>() => {
     values: import("react-hook-form").DeepPartialSkipArrayKey<K> & K;
     formState: FormState<K>;

package/dist/types/hooks/useFileUploader.d.ts

@@ -28,12 +28,14 @@ interface FileInfo {
  * const { upload, remove, retry, state } = useFileUploader(uploader, initialList, multiple);
  * ```
  */
-export declare const useFileUploader: (uploader: UploadHandler, initialList?: string | FileInfo | FileInfo[], multiple?: boolean) => {
+export declare const useFileUploader: (uploader: UploadHandler, initialList?: string | FileInfo | FileInfo[], { multiple, onChange, }?: {
+    multiple?: boolean;
+    onChange?: (files: FileInfo[] | FileInfo | null) => void;
+}) => {
     upload: (files: FileList | null) => void;
     remove: (key: string) => void;
     retry: (key: string) => void;
     pending: number;
-    list: FileInfo[];
     files: FileInfo[];
 };
 export {};

package/dist/types/hooks/useFormBuilder.d.ts

@@ -39,6 +39,12 @@ export declare const useFormBuilder: <T extends AnyObject = string>(schema: Form
     optionLists?: KeyValue<BaseSelectProps<T>>;
 }) => {
     formDef: import("react/jsx-runtime").JSX.Element;
+    resolver: import("react-hook-form").Resolver<{
+        [x: string]: any;
+    }, unknown, {
+        [x: string]: any;
+        [x: number]: any;
+    }>;
     schemaDef: yup.ObjectSchema<{
         [x: string]: any;
     }, yup.AnyObject, {

package/dist/types/input/AvatarInput.d.ts

@@ -1,6 +1,6 @@
+import { type AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { type UploadHandler } from "../hooks/useFileUploader";
-import { type AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
 export interface Props extends RefProp {
     /**
      * field name
@@ -48,4 +48,4 @@ export interface Props extends RefProp {
  * @param {Props} props - The properties for the AvatarInput component.
  * @returns {JSX.Element} - The rendered AvatarInput component.
  */
-export declare const AvatarInput: ({ size, avatarName, avatarClassName, value, rounded, defaultValue, fallbackIcon, variant, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarInput: ({ size, avatarName, avatarClassName, value, rounded, defaultValue, fallbackIcon, variant, fileUrl, uploadHandler, onChange, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Hidden.d.ts

@@ -4,17 +4,9 @@ interface Props {
      */
     name?: string;
     /**
-     * hidden value will fire change for form update
+     * hidden input value
      */
-    hiddenValue?: AnyObject;
-    /**
-     * default avatar image
-     */
-    defaultValue?: string;
-    /**
-     * form onChange handler
-     */
-    onChange?: (value: AnyObject) => void;
+    value?: AnyObject;
 }
 /**
  * Hidden input component to handle hidden values in forms.
@@ -24,5 +16,5 @@ interface Props {
  * @param {Object} props - Component properties.
  * @returns {JSX.Element} The rendered hidden input field and error icon.
  */
-export declare const HiddenInput: ({ hiddenValue, defaultValue, onChange, invalid, error, value, name, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const HiddenInput: ({ invalid, error, value, name, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/input/RadioGroup.d.ts

@@ -37,6 +37,10 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
      * vertical orientation
      */
     vertical?: boolean;
+    /**
+     * value
+     */
+    value?: string | number;
     /**
      * change handler
      */
@@ -50,4 +54,4 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
  * @param {RadioGroupProps} props - The properties for the RadioGroup component.
  * @returns {JSX.Element} The rendered RadioGroup component.
  */
-export declare const RadioGroup: ({ children, name, className, optionWidth, onChange, ...rest }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: ({ children, name, className, optionWidth, value, onChange, ...rest }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/DualList.d.ts

@@ -1,5 +1,4 @@
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { type ReactElement } from "react";
+import { type NestedKeys, type ReactElement, type RefProp } from "@react-fabric/core/dist/types/types";
 import { type FieldProps } from "../input/Field";
 export interface DualListProps<T> extends Omit<FieldProps, "children">, RefProp<HTMLInputElement> {
     /**
@@ -17,15 +16,15 @@ export interface DualListProps<T> extends Omit<FieldProps, "children">, RefProp<
     /**
      * group by property name
      */
-    groupProperty?: keyof T;
+    groupProperty?: NestedKeys<T>;
     /**
      * label property name
      */
-    labelProperty?: keyof T;
+    labelProperty?: NestedKeys<T>;
     /**
      * value property name
      */
-    valueProperty?: keyof T;
+    valueProperty?: NestedKeys<T>;
     /**
      * empty list display
      */
@@ -33,7 +32,7 @@ export interface DualListProps<T> extends Omit<FieldProps, "children">, RefProp<
     /**
      * item renderer
      */
-    renderer?: (option: T) => React.ReactNode;
+    renderer?: (option: T) => ReactElement;
     /**
      * change handler
      */

package/dist/types/select/Options.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement } from "react";
+import { type ReactElement } from "@react-fabric/core/dist/types/types";
 export declare const Options: ({ ref, style, items, active, className, itemRef, empty, info, valueProperty, labelProperty, itemProps, children, ...rest }: {
     ref: AnyObject;
     info?: AnyObject;

package/dist/types/types/index.d.ts

@@ -1,5 +1,4 @@
-import { type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
-import { type ReactElement } from "react";
+import { type NestedKeys, type ReactElement, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
 export interface InputProps<V = string> extends TestProps {
     /**
      * value
@@ -113,23 +112,23 @@ export interface BaseSelectProps<T extends AnyObject = string> {
     /**
      * group by property name
      */
-    groupProperty?: keyof T;
+    groupProperty?: NestedKeys<T>;
     /**
      * label property name
      */
-    labelProperty?: keyof T;
+    labelProperty?: NestedKeys<T>;
     /**
      * value property name
      */
-    valueProperty?: keyof T;
+    valueProperty?: NestedKeys<T>;
     /**
      * value property name
      */
-    infoProperty?: keyof T;
+    infoProperty?: NestedKeys<T>;
     /**
      * value property name
      */
-    sortProperty?: keyof T | true;
+    sortProperty?: NestedKeys<T> | true;
     /**
      * searchable list
      */
@@ -153,7 +152,7 @@ export interface BaseSelectProps<T extends AnyObject = string> {
     /**
      * item renderer
      */
-    renderer?: (option: T) => React.ReactNode;
+    renderer?: (option: T) => ReactElement;
     /**
      * item matcher
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.60",
+  "version": "1.0.0-beta.62",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -41,9 +41,9 @@
     "@dnd-kit/utilities": "~3.2.2",
     "@floating-ui/react": "~0.27.16",
     "@hookform/resolvers": "~5.2.2",
-    "@react-fabric/core": "^1.0.0-beta.60",
-    "@react-fabric/date": "^1.0.0-beta.60",
-    "@react-fabric/utilities": "^1.0.0-beta.60",
+    "@react-fabric/core": "^1.0.0-beta.62",
+    "@react-fabric/date": "^1.0.0-beta.62",
+    "@react-fabric/utilities": "^1.0.0-beta.62",
     "classnames": "~2.5.1",
     "color": "~5.0.2",
     "react-color": "~2.19.3",
@@ -62,5 +62,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "a79f053ee7e13422c06d7d9c35d4f0c2610cdf5d"
+  "gitHead": "9dce2fd9bb753d67e3f8adbf50be257b4bc64242"
 }

package/src/builder/FileField.tsx

@@ -21,13 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  Button,
-  CoreIcons,
-  Icon,
-  ProgressBar,
-  Tooltip,
-} from "@react-fabric/core";
+import { Button, Icon, ProgressBar, Tooltip } from "@react-fabric/core";
 import { FileUtil, Format, isString } from "@react-fabric/utilities";
 import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
@@ -43,6 +37,7 @@ export const FileField = ({
   accept,
   value,
   fileUrl,
+  onChange,
   multiple,
   invalid,
   error,
@@ -52,20 +47,21 @@ export const FileField = ({
   inline?: boolean;
   invalid?: boolean;
   error?: AnyObject;
+  onChange?: (value: any) => void;
   fileUrl?: (path: string) => string;
   uploadHandler: UploadHandler;
 }) => {
   const { t } = useTranslation();
-  const { pending, files, list, upload, remove } = useFileUploader(
+  const { pending, files, upload, remove } = useFileUploader(
     async (data, config) => await uploadHandler?.(data, config),
     value,
-    multiple,
+    { multiple, onChange },
   );
 
   return (
     <Fragment>
       <Field plain inline={inline} label={label}>
-        <HiddenInput hiddenValue={multiple ? list : list?.[0]} {...rest} />
+        <HiddenInput value={multiple ? files : files?.[0]} {...rest} />
       </Field>
       <Tooltip
         color="danger-200"
@@ -124,7 +120,7 @@ export const FileField = ({
               </div>
               {file.progress && (
                 <Icon
-                  icon={CoreIcons.stop}
+                  icon="icon-[mdi--stop]"
                   bg="danger"
                   color="white"
                   size="sm"
@@ -135,7 +131,7 @@ export const FileField = ({
               )}
               {!file.progress && (
                 <Icon
-                  icon={CoreIcons.trash}
+                  icon="icon-[mdi--trash-can-outline]"
                   color="danger"
                   size="sm"
                   aria-label="remove"

package/src/builder/components/AddSchemaFields.tsx

@@ -21,6 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { yupResolver } from "@hookform/resolvers/yup";
 import {
   Button,
   Content,
@@ -51,7 +52,7 @@ export const AddSchemaFields = (props: ModalProps) => {
   return (
     <Modal {...props}>
       <Form
-        schema={fieldSchema}
+        resolver={yupResolver(fieldSchema)}
         defaultValues={{ fields: [" "] }}
         onSubmit={handleSubmit}
       >

package/src/builder/components/SchemaArrayForm.tsx

@@ -24,13 +24,7 @@
 import { DndContext, type DragEndEvent } from "@dnd-kit/core";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext } from "@dnd-kit/sortable";
-import {
-  Button,
-  Content,
-  CoreIcons,
-  Header,
-  useOverlayService,
-} from "@react-fabric/core";
+import { Button, Content, Header, useOverlayService } from "@react-fabric/core";
 import { isArray } from "@react-fabric/utilities";
 import { useCallback, useState } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
@@ -118,7 +112,7 @@ export const SchemaArrayForm = ({
           <Button
             size="sm"
             variant="link"
-            icon={CoreIcons.insert}
+            icon="icon-[mdi--plus-circle-outline]"
             aria-label="add field"
             onClick={handleAdd}
           />
@@ -126,14 +120,14 @@ export const SchemaArrayForm = ({
         <Button
           size="sm"
           variant="link"
-          icon={CoreIcons.colapseAllVar}
+          icon="icon-[mdi--arrow-collapse-vertical]"
           aria-label="collapse all"
           onClick={() => setDefaultOpen(false)}
         />
         <Button
           size="sm"
           variant="link"
-          icon={CoreIcons.expandAllVar}
+          icon="icon-[mdi--arrow-expand-vertical]"
           aria-label="expand all"
           onClick={() => setDefaultOpen(true)}
         />
@@ -155,7 +149,7 @@ export const SchemaArrayForm = ({
           />
         ))}
       </Content>
-      {AddModal}
+      <AddModal />
     </Wrapper>
   );
 };

package/src/builder/components/SchemaField.tsx

@@ -27,7 +27,6 @@ import {
   Button,
   Collapsable,
   Content,
-  CoreIcons,
   Footer,
   Modal,
   type ModalProps,
@@ -222,7 +221,7 @@ export const SchemaField = ({
               variant="link"
               aria-label="Delete"
               stopPropagation
-              icon={CoreIcons.trash}
+              icon="icon-[mdi--trash-can-outline]"
               onClick={onRemove}
               className="invisible group-hover/field:visible"
             />
@@ -230,7 +229,7 @@ export const SchemaField = ({
         </div>
         <div className="flex flex-col gap-1 pb-4">
           <Controller name={`${field}.id`}>
-            <HiddenInput hiddenValue={id} />
+            <HiddenInput value={id} />
           </Controller>
           <Controller name={`${field}.datatype`}>
             <Select
@@ -277,7 +276,7 @@ export const SchemaField = ({
                 </Controller>
                 {customOptions && (
                   <Button
-                    icon={CoreIcons.list}
+                    icon="icon-[mdi--list-box-outline]"
                     aria-label="Custom options"
                     onClick={() => {
                       void openOptionModal({ title: `${id} Options` });
@@ -285,7 +284,7 @@ export const SchemaField = ({
                   />
                 )}
               </Field>
-              {OptionModal}
+              <OptionModal />
             </Fragment>
           )}
           {type === DATA_TYPES.FILE && (