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

package/dist/cjs/builder/FileField.js

@@ -13,7 +13,7 @@ var Field = require('../input/Field.js');
 var Hidden = require('../input/Hidden.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "multiple", "invalid", "error"];
+var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "onChange", "multiple", "invalid", "error"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FileField = function FileField(_ref) {
@@ -24,7 +24,8 @@ var FileField = function FileField(_ref) {
     accept = _ref.accept,
     value = _ref.value;
     _ref.fileUrl;
-    var multiple = _ref.multiple;
+    var onChange = _ref.onChange,
+    multiple = _ref.multiple;
     _ref.invalid;
     var error = _ref.error,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -48,10 +49,12 @@ var FileField = function FileField(_ref) {
       return function (_x, _x2) {
         return _ref2.apply(this, arguments);
       };
-    }(), value, multiple),
+    }(), value, {
+      multiple: multiple,
+      onChange: onChange
+    }),
     pending = _useFileUploader.pending,
     files = _useFileUploader.files,
-    list = _useFileUploader.list,
     upload = _useFileUploader.upload,
     remove = _useFileUploader.remove;
   return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
@@ -60,7 +63,7 @@ var FileField = function FileField(_ref) {
       inline: inline,
       label: label,
       children: /*#__PURE__*/jsxRuntime.jsx(Hidden.HiddenInput, _objectSpread({
-        hiddenValue: multiple ? list : list === null || list === void 0 ? void 0 : list[0]
+        value: multiple ? files : files === null || files === void 0 ? void 0 : files[0]
       }, rest))
     }), /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
       color: "danger-200",
@@ -110,7 +113,7 @@ var FileField = function FileField(_ref) {
                 children: file.error
               })
             }), file.progress && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-              icon: core.CoreIcons.stop,
+              icon: "icon-[mdi--stop]",
               bg: "danger",
               color: "white",
               size: "sm",
@@ -121,7 +124,7 @@ var FileField = function FileField(_ref) {
                 return (_file$abort = file.abort) === null || _file$abort === void 0 ? void 0 : _file$abort.call(file);
               }
             }), !file.progress && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-              icon: core.CoreIcons.trash,
+              icon: "icon-[mdi--trash-can-outline]",
               color: "danger",
               size: "sm",
               "aria-label": "remove",

package/dist/cjs/builder/components/AddSchemaFields.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var yup = require('@hookform/resolvers/yup');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var react = require('react');
@@ -25,7 +26,7 @@ var AddSchemaFields = function AddSchemaFields(props) {
   }, []);
   return /*#__PURE__*/jsxRuntime.jsx(core.Modal, _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs(Form.Form, {
-      schema: fieldSchema,
+      resolver: yup.yupResolver(fieldSchema),
       defaultValues: {
         fields: [" "]
       },

package/dist/cjs/builder/components/SchemaArrayForm.js

@@ -96,13 +96,13 @@ var SchemaArrayForm = function SchemaArrayForm(_ref) {
       children: [dynamic && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
         size: "sm",
         variant: "link",
-        icon: core.CoreIcons.insert,
+        icon: "icon-[mdi--plus-circle-outline]",
         "aria-label": "add field",
         onClick: handleAdd
       }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
         size: "sm",
         variant: "link",
-        icon: core.CoreIcons.colapseAllVar,
+        icon: "icon-[mdi--arrow-collapse-vertical]",
         "aria-label": "collapse all",
         onClick: function onClick() {
           return setDefaultOpen(false);
@@ -110,7 +110,7 @@ var SchemaArrayForm = function SchemaArrayForm(_ref) {
       }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
         size: "sm",
         variant: "link",
-        icon: core.CoreIcons.expandAllVar,
+        icon: "icon-[mdi--arrow-expand-vertical]",
         "aria-label": "expand all",
         onClick: function onClick() {
           return setDefaultOpen(true);
@@ -138,7 +138,7 @@ var SchemaArrayForm = function SchemaArrayForm(_ref) {
           acceptableTypes: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : Object.values(schema.DATA_TYPES)
         }, index);
       })
-    }), AddModal]
+    }), /*#__PURE__*/jsxRuntime.jsx(AddModal, {})]
   });
 };
 

package/dist/cjs/builder/components/SchemaField.js

@@ -180,7 +180,7 @@ var SchemaField = function SchemaField(_ref) {
           variant: "link",
           "aria-label": "Delete",
           stopPropagation: true,
-          icon: core.CoreIcons.trash,
+          icon: "icon-[mdi--trash-can-outline]",
           onClick: onRemove,
           className: "invisible group-hover/field:visible"
         })]
@@ -189,7 +189,7 @@ var SchemaField = function SchemaField(_ref) {
         children: [/*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
           name: "".concat(field, ".id"),
           children: /*#__PURE__*/jsxRuntime.jsx(Hidden.HiddenInput, {
-            hiddenValue: id
+            value: id
           })
         }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
           name: "".concat(field, ".datatype"),
@@ -242,7 +242,7 @@ var SchemaField = function SchemaField(_ref) {
                 }
               })
             }), customOptions && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-              icon: core.CoreIcons.list,
+              icon: "icon-[mdi--list-box-outline]",
               "aria-label": "Custom options",
               onClick: function onClick() {
                 void openOptionModal({
@@ -250,7 +250,7 @@ var SchemaField = function SchemaField(_ref) {
                 });
               }
             })]
-          }), OptionModal]
+          }), /*#__PURE__*/jsxRuntime.jsx(OptionModal, {})]
         }), type === schema.DATA_TYPES.FILE && /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
           children: /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
             name: "".concat(field, ".accept"),

package/dist/cjs/form/Form.js

@@ -1,18 +1,17 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
-var yup = require('@hookform/resolvers/yup');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var reactHookForm = require('react-hook-form');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["formRef", "schema", "children", "defaultValues", "onSubmit", "onChange"];
+var _excluded = ["formRef", "resolver", "children", "resetOnChange", "defaultValues", "onSubmit", "onChange"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DEFAULT_SUBMIT = function DEFAULT_SUBMIT() {
@@ -31,10 +30,7 @@ var DEFAULT_SUBMIT = function DEFAULT_SUBMIT() {
  * ```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);
@@ -52,10 +48,11 @@ var DEFAULT_SUBMIT = function DEFAULT_SUBMIT() {
  */
 var Form = function Form(_ref) {
   var formRef = _ref.formRef,
-    schema = _ref.schema,
+    resolver = _ref.resolver,
     children = _ref.children,
+    resetOnChange = _ref.resetOnChange,
     _ref$defaultValues = _ref.defaultValues,
-    defaultValues = _ref$defaultValues === void 0 ? utilities.EMPTY_OBJECT : _ref$defaultValues,
+    _defaultValues = _ref$defaultValues === void 0 ? utilities.EMPTY_OBJECT : _ref$defaultValues,
     _ref$onSubmit = _ref.onSubmit,
     _onSubmit = _ref$onSubmit === void 0 ? DEFAULT_SUBMIT : _ref$onSubmit,
     onChange = _ref.onChange,
@@ -63,8 +60,27 @@ var Form = function Form(_ref) {
   var ref = react.useRef(null);
   var form = reactHookForm.useForm({
     shouldFocusError: true,
-    resolver: schema && yup.yupResolver(schema),
-    defaultValues: defaultValues
+    resolver: resolver,
+    defaultValues: function () {
+      var _defaultValues2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return Promise.resolve(_defaultValues);
+            case 2:
+              return _context.abrupt("return", _context.sent);
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function defaultValues() {
+        return _defaultValues2.apply(this, arguments);
+      }
+      return defaultValues;
+    }()
   });
   var _useTransition = react.useTransition(),
     _useTransition2 = _slicedToArray(_useTransition, 2),
@@ -86,12 +102,17 @@ var Form = function Form(_ref) {
     form.reset(reset);
     form.clearErrors();
     (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.querySelector("[auto-focus], input, textarea")) === null || _ref$current === void 0 || _ref$current.focus();
-  }, [defaultValues]);
+  }, []);
+  react.useEffect(function () {
+    if (resetOnChange) {
+      handleReset(_defaultValues);
+    }
+  }, [_defaultValues, resetOnChange]);
   react.useImperativeHandle(formRef, function () {
     return {
       state: form.formState,
       reset: function reset() {
-        return handleReset(defaultValues);
+        return handleReset(_defaultValues);
       },
       clear: function clear() {
         return handleReset();
@@ -100,19 +121,19 @@ var Form = function Form(_ref) {
         return form.handleSubmit(_onSubmit);
       },
       validate: function () {
-        var _validate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(fields) {
-          return _regeneratorRuntime.wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
+        var _validate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fields) {
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
               case 0:
-                _context.next = 2;
+                _context2.next = 2;
                 return form.trigger(fields);
               case 2:
-                return _context.abrupt("return", _context.sent);
+                return _context2.abrupt("return", _context2.sent);
               case 3:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
-          }, _callee);
+          }, _callee2);
         }));
         function validate(_x) {
           return _validate.apply(this, arguments);
@@ -136,9 +157,10 @@ var Form = function Form(_ref) {
         }, 50);
       }
     };
-  }, [_onSubmit, form, form.formState, defaultValues]);
+  }, [_onSubmit, form, form.formState, _defaultValues]);
   var onInvalid = react.useCallback(function (_, e) {
     var el = e.target;
+    console.log("Invalid:", _, e);
     setTimeout(function () {
       var _el$querySelector;
       return (_el$querySelector = el.querySelector("input[aria-invalid='true'],textarea[aria-invalid='true']")) === null || _el$querySelector === void 0 ? void 0 : _el$querySelector.focus();
@@ -148,7 +170,7 @@ var Form = function Form(_ref) {
     children: /*#__PURE__*/jsxRuntime.jsxs("form", _objectSpread(_objectSpread({
       ref: ref,
       onReset: function onReset() {
-        return handleReset(defaultValues);
+        return handleReset(_defaultValues);
       },
       onSubmit: function onSubmit(e) {
         e.stopPropagation();

package/dist/cjs/hooks/useFileUploader.js

@@ -29,7 +29,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * ```
  */
 var useFileUploader = function useFileUploader(uploader, initialList) {
-  var multiple = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? true : _ref$multiple,
+    onChange = _ref.onChange;
   var _useReducer = react.useReducer(function (state, action) {
       if (action.type === "start") {
         if (!multiple) state.files.clear();
@@ -76,40 +79,26 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
       if (action.type === "remove") {
         state.files["delete"](action.key);
       }
-      state.list = Array.from(state.files.values()).map(function (file) {
-        return !file.progress && !file.error && {
-          key: file.key,
-          path: file.path,
-          mime: file.mime,
-          size: file.size,
-          uploaded: file.uploaded,
-          filename: file.filename
-        };
-      }).filter(Boolean);
-      return _objectSpread({}, state);
-    }, {
-      files: new Map(),
-      count: 0
-    }, function (state) {
-      if (initialList) {
-        if (utilities.isString(initialList)) {
+      if (action.type === "init") {
+        state.files = new Map();
+        if (utilities.isString(action.initialList)) {
           var key = utilities.uuid();
           state.files.set(key, {
             key: key,
-            path: initialList,
+            path: action.initialList,
             filename: "",
             size: 0,
             mime: ""
           });
         }
-        if (utilities.isObject(initialList)) {
+        if (utilities.isObject(action.initialList)) {
           var _key = utilities.uuid();
-          state.files.set(_key, _objectSpread(_objectSpread({}, initialList), {}, {
+          state.files.set(_key, _objectSpread(_objectSpread({}, action.initialList), {}, {
             key: _key
           }));
         }
-        if (utilities.isArray(initialList)) {
-          initialList.forEach(function (file) {
+        if (utilities.isArray(action.initialList)) {
+          action.initialList.forEach(function (file) {
             var key = utilities.uuid();
             state.files.set(key, _objectSpread(_objectSpread({}, file), {}, {
               key: key
@@ -117,14 +106,38 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
           });
         }
       }
-      state.list = Array.from(state.files.values());
-      return state;
+      state.list = Array.from(state.files.values()).map(function (file) {
+        return !file.progress && !file.error && {
+          key: file.key,
+          path: file.path,
+          mime: file.mime,
+          size: file.size,
+          uploaded: file.uploaded,
+          filename: file.filename
+        };
+      }).filter(Boolean);
+      if (action.type === "remove" || action.type === "stop") {
+        setTimeout(function () {
+          var _state$list$;
+          onChange === null || onChange === void 0 || onChange(multiple ? state.list : (_state$list$ = state.list[0]) !== null && _state$list$ !== void 0 ? _state$list$ : null);
+        }, 100);
+      }
+      return _objectSpread({}, state);
+    }, {
+      files: new Map(),
+      count: 0
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
+  react.useEffect(function () {
+    dispatch({
+      type: "init",
+      initialList: initialList
+    });
+  }, [initialList]);
   var doUpload = react.useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(key, file) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(key, file) {
       var data, _abort2;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -185,7 +198,7 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
       }, _callee);
     }));
     return function (_x, _x2) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }(), []);
   var upload = react.useCallback(function (files) {
@@ -212,7 +225,6 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
     remove: remove,
     retry: retry,
     pending: state.count,
-    list: state.list,
     files: Array.from(state.files.values())
   };
 };

package/dist/cjs/hooks/useFormBuilder.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var yup = require('@hookform/resolvers/yup');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var react = require('react');
@@ -100,9 +101,14 @@ var useFormBuilder = function useFormBuilder(schema$1) {
       return !!schm.id;
     })) !== null && _schema$filter !== void 0 ? _schema$filter : [];
   }, [schema$1]);
-  var schemaDef = utilities.yup.object(Object.fromEntries(filteredSchema.map(function (field) {
-    return [field.id, makeYupField(field)];
-  })));
+  var schemaDef = react.useMemo(function () {
+    return utilities.yup.object(Object.fromEntries(filteredSchema.map(function (field) {
+      return [field.id, makeYupField(field)];
+    })));
+  }, [filteredSchema]);
+  var resolver = react.useMemo(function () {
+    return yup.yupResolver(schemaDef);
+  }, [schemaDef]);
   var formDef = /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
     children: [filteredSchema.map(function (field, idx) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -122,6 +128,7 @@ var useFormBuilder = function useFormBuilder(schema$1) {
   });
   return {
     formDef: formDef,
+    resolver: resolver,
     schemaDef: schemaDef
   };
 };

package/dist/cjs/i18n/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var core = require('@react-fabric/core');
-var ar = require('./ar.json.js');
-var en = require('./en.json.js');
+var form$1 = require('./ar/form.json.js');
+var form = require('./en/form.json.js');
 
 /*
  * React Fabric
@@ -28,6 +28,6 @@ var en = require('./en.json.js');
  */
 
 core.addTranslationBundle("form", {
-  en: en.default,
-  ar: ar.default
+  en: form.default,
+  ar: form$1.default
 });

package/dist/cjs/input/ArrayInput.js

@@ -196,7 +196,7 @@ var ArrayInput = function ArrayInput(_ref) {
         },
         children: [/*#__PURE__*/jsxRuntime.jsx(core$1.Icon, _objectSpread(_objectSpread({
           className: isDragging ? "cursor-grabbing" : "cursor-grab",
-          icon: core$1.CoreIcons.dragHandle
+          icon: "icon-[mdi--drag-vertical]"
         }, attributes), listeners)), children]
       });
     }
@@ -219,7 +219,7 @@ var ArrayInput = function ArrayInput(_ref) {
         children: /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
           size: "sm",
           "aria-label": "Add item",
-          icon: core$1.CoreIcons.insert,
+          icon: "icon-[mdi--plus-circle-outline]",
           onClick: function onClick() {
             return handleAdd(onAdd === null || onAdd === void 0 ? void 0 : onAdd());
           },
@@ -260,7 +260,7 @@ var ArrayInput = function ArrayInput(_ref) {
               }));
             }), canRemove !== false && /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
               "aria-label": "Remove item",
-              icon: core$1.CoreIcons.remove,
+              icon: "icon-[mdi--minus-circle-outline]",
               color: "danger",
               variant: "link",
               className: "self-end",

package/dist/cjs/input/AvatarInput.js

@@ -6,13 +6,13 @@ var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var core = require('@react-fabric/core');
+var classNames = require('classnames');
 var react = require('react');
 var useFileUploader = require('../hooks/useFileUploader.js');
 var Hidden = require('./Hidden.js');
-var classNames = require('classnames');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["size", "avatarName", "avatarClassName", "value", "rounded", "defaultValue", "fallbackIcon", "variant", "fileUrl", "uploadHandler"];
+var _excluded = ["size", "avatarName", "avatarClassName", "value", "rounded", "defaultValue", "fallbackIcon", "variant", "fileUrl", "uploadHandler", "onChange"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -24,7 +24,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @returns {JSX.Element} - The rendered AvatarInput component.
  */
 var AvatarInput = function AvatarInput(_ref) {
-  var _list$;
+  var _files$2;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "6rem" : _ref$size,
     avatarName = _ref.avatarName,
@@ -36,6 +36,7 @@ var AvatarInput = function AvatarInput(_ref) {
     variant = _ref.variant,
     fileUrl = _ref.fileUrl,
     uploadHandler = _ref.uploadHandler,
+    _onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useFileUploader = useFileUploader.useFileUploader( /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
@@ -55,9 +56,14 @@ var AvatarInput = function AvatarInput(_ref) {
       return function (_x, _x2) {
         return _ref2.apply(this, arguments);
       };
-    }(), value, false),
+    }(), value !== null && value !== void 0 ? value : defaultValue, {
+      multiple: false,
+      onChange: function onChange(files) {
+        var _files$path;
+        return _onChange === null || _onChange === void 0 ? void 0 : _onChange((_files$path = files === null || files === void 0 ? void 0 : files.path) !== null && _files$path !== void 0 ? _files$path : null);
+      }
+    }),
     files = _useFileUploader.files,
-    list = _useFileUploader.list,
     upload = _useFileUploader.upload,
     remove = _useFileUploader.remove;
   var _useState = react.useState(""),
@@ -65,7 +71,7 @@ var AvatarInput = function AvatarInput(_ref) {
     base64 = _useState2[0],
     setBase64 = _useState2[1];
   react.useEffect(function () {
-    if (list !== null && list !== void 0 && list.length) {
+    if (files !== null && files !== void 0 && files.length) {
       var _files$;
       var file = files === null || files === void 0 || (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.file;
       void (file && new Response(file).blob().then(function (blob) {
@@ -82,14 +88,14 @@ var AvatarInput = function AvatarInput(_ref) {
       var _ref3, _fileUrl;
       setBase64((_ref3 = (_fileUrl = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "")) !== null && _fileUrl !== void 0 ? _fileUrl : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : "");
     }
-  }, [files, list, defaultValue]);
+  }, [files, defaultValue]);
   react.useEffect(function () {
     var _fileUrl2, _fileUrl3;
     !value && defaultValue && setBase64((_fileUrl2 = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(defaultValue)) !== null && _fileUrl2 !== void 0 ? _fileUrl2 : defaultValue);
     value && setBase64((_fileUrl3 = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(value)) !== null && _fileUrl3 !== void 0 ? _fileUrl3 : value);
   }, [value, defaultValue]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-nowrap items-end overflow-hidden",
+    className: "flex flex-nowrap items-end overflow-hidden p-px",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames("inline-block leading-none relative outline overflow-hidden", rounded && "rounded-full", !rounded && "rounded"),
       children: [/*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
@@ -114,8 +120,7 @@ var AvatarInput = function AvatarInput(_ref) {
         })]
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Hidden.HiddenInput, _objectSpread({
-      hiddenValue: list === null || list === void 0 || (_list$ = list[0]) === null || _list$ === void 0 ? void 0 : _list$.path,
-      defaultValue: defaultValue
+      value: files === null || files === void 0 || (_files$2 = files[0]) === null || _files$2 === void 0 ? void 0 : _files$2.path
     }, rest)), files.map(function (file, idx) {
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "px-2 py-1 flex-1 overflow-hidden",
@@ -128,7 +133,7 @@ var AvatarInput = function AvatarInput(_ref) {
               children: file.error
             })
           }), file.progress && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-            icon: core.CoreIcons.stop,
+            icon: "icon-[mdi--stop]",
             bg: "danger",
             color: "white",
             size: "sm",
@@ -139,7 +144,7 @@ var AvatarInput = function AvatarInput(_ref) {
               return (_file$abort = file.abort) === null || _file$abort === void 0 ? void 0 : _file$abort.call(file);
             }
           }), !file.progress && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-            icon: core.CoreIcons.trash,
+            icon: "icon-[mdi--trash-can-outline]",
             color: "danger",
             size: "sm",
             className: "flex-content",

package/dist/cjs/input/Checkbox.js

@@ -43,10 +43,10 @@ var Checkbox = function Checkbox(_ref) {
   var deferred = react.useDeferredValue(!!checked);
   var iconOn = react.useMemo(function () {
     var _ref2;
-    return (_ref2 = iconChecked !== null && iconChecked !== void 0 ? iconChecked : icon) !== null && _ref2 !== void 0 ? _ref2 : core.CoreIcons.checkboxOn;
+    return (_ref2 = iconChecked !== null && iconChecked !== void 0 ? iconChecked : icon) !== null && _ref2 !== void 0 ? _ref2 : "icon-[mdi--checkbox-marked]";
   }, [icon, iconChecked]);
   var iconOff = react.useMemo(function () {
-    return icon !== null && icon !== void 0 ? icon : core.CoreIcons.checkboxOff;
+    return icon !== null && icon !== void 0 ? icon : "icon-[mdi--checkbox-blank-outline]";
   }, [icon]);
   react.useEffect(function () {
     setActualValue(deferred);

package/dist/cjs/input/ColorInput.js

@@ -120,7 +120,7 @@ var ColorInput = function ColorInput(_ref) {
         children: !actualValue && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
           size: "md",
           className: "text-muted",
-          icon: core.CoreIcons.colorSwatch
+          icon: "icon-[mdi--palette]"
         })
       })
     })), isOpen && /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
@@ -142,7 +142,7 @@ var ColorInput = function ColorInput(_ref) {
       })]
     })), !disabled && showPicker && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
       className: "flex-content p-1",
-      icon: core.CoreIcons.colorPicker,
+      icon: "icon-[mdi--eyedropper]",
       onClick: function onClick() {
         return window.EyeDropper && new window.EyeDropper().open().then(function (resp) {
           return handleChange(resp.sRGBHex);

package/dist/cjs/input/File.js

@@ -132,7 +132,7 @@ var FileInput = function FileInput(_ref) {
             children: utilities.Format.bytes(file.size)
           }), /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
             className: "cursor-pointer opacity-30 hover:opacity-80",
-            icon: core.CoreIcons.close,
+            icon: "icon-[mdi--close]",
             onClick: function onClick() {
               removeFile(idx);
             }