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

package/css/_colorPicker.css

@@ -22,18 +22,48 @@
  */
 
 @layer components {
+  .fabric-colorPicker-container ~ svg {
+    fill: var(--color-selected);
+  }
+
   .fabric-colorPicker {
-    --color-shadow: var(--border-color-base);
+    --color-shadow: var(--border-color-bright);
+
+    outline: 2px solid var(--color-selected, var(--border-color-soft)) !important;
+
+    &.block-picker {
+      background-color: var(--bg-color-content) !important;
+      box-shadow: 0 0 4px 0 var(--color-shadow) !important;
+
+      input {
+        display: none;
+      }
+
+      & > div:first-child {
+        display: none;
+      }
+
+      & > div:last-child > div:first-child {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 5px;
+      }
+
+      & span > div {
+        margin: 0 !important;
+        box-shadow: 0 0 1px 1px var(--border-color-base) inset !important;
+      }
+    }
 
     & input {
       padding: 0 4px !important;
+      border: 1px solid var(--border-color-base);
+      border-radius: var(--rounded-sm);
 
       line-height: 2;
       color: var(--text-color-base);
 
-      background-color: var(--bg-color-base);
-      border: 1px solid var(--border-color-base);
-      border-radius: var(--rounded-sm);
+      background-color: var(--bg-color-content);
       box-shadow: none;
 
       &:focus {
@@ -47,7 +77,7 @@
 
     & .flexbox-fix {
       justify-content: center;
-      border-color: var(--border-color-muted);
+      border-color: var(--border-color-soft);
 
       & > div > div {
         text-align: center;

package/css/_file.css

@@ -28,13 +28,13 @@
 
       padding-block: 0;
       padding-inline: 4px;
+      border: 0;
+      border-radius: var(--rounded);
 
       color: var(--color-white);
 
       opacity: 0.8;
       background-color: var(--color-primary-500);
-      border: 0;
-      border-radius: var(--rounded);
 
       &:hover {
         opacity: 0.9;

package/dist/cjs/builder/FileField.js

@@ -31,16 +31,16 @@ var FileField = function FileField(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useFileUploader = useFileUploader.useFileUploader( /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
+  var _useFileUploader = useFileUploader.useFileUploader(/*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
+        return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              _context.next = 2;
+              _context.next = 1;
               return uploadHandler === null || uploadHandler === void 0 ? void 0 : uploadHandler(data, config);
-            case 2:
+            case 1:
               return _context.abrupt("return", _context.sent);
-            case 3:
+            case 2:
             case "end":
               return _context.stop();
           }

package/dist/cjs/builder/SchemaEditor.js

@@ -63,7 +63,7 @@ var SchemaEditor = function SchemaEditor(_ref) {
       acceptableTypes: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : Object.values(schema.DATA_TYPES)
     }), children && /*#__PURE__*/jsxRuntime.jsx(core.Footer, {
       flex: true,
-      className: "border-t bg-base px-6 py-2",
+      className: "border-t bg-default px-6 py-2",
       children: children
     })]
   });

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

@@ -58,9 +58,7 @@ var SchemaArrayForm = function SchemaArrayForm(_ref) {
       }
     });
   }, []);
-  var Wrapper = react.useCallback(
-  // eslint-disable-next-line @typescript-eslint/promise-function-async
-  function (_ref2) {
+  var Wrapper = react.useCallback(function (_ref2) {
     var children = _ref2.children;
     if (dynamic) {
       // pass id list to dnd context

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

@@ -104,7 +104,7 @@ var SchemaField = function SchemaField(_ref) {
         }), /*#__PURE__*/jsxRuntime.jsx(core.Footer, {
           flex: true,
           justify: "end",
-          className: "sticky bottom-0 border-t bg-base px-6 py-2",
+          className: "sticky bottom-0 border-t bg-default px-6 py-2",
           children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
             variant: "link",
             onClick: props.onClose,

package/dist/cjs/form/Controller.js

@@ -36,7 +36,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * to the child component, allowing for proper focus management and DOM access.
  *
  * @param {ControllerProps} props - The properties for the Controller component.
- * @returns {JSX.Element} The rendered Controller component.
+ * @returns {React.ReactElement} The rendered Controller component.
  *
  * @example
  * ```jsx

package/dist/cjs/form/Form.js

@@ -24,7 +24,7 @@ var DEFAULT_SUBMIT = function DEFAULT_SUBMIT() {
  * It supports nested form structures and allows for custom validation schemas using Yup.
  *
  * @param {FormProps<K>} props - The properties for the Form component.
- * @returns {JSX.Element} The rendered Form component.
+ * @returns {React.ReactElement} The rendered Form component.
  *
  * @example
  * ```jsx
@@ -62,15 +62,15 @@ var Form = function Form(_ref) {
     shouldFocusError: true,
     resolver: resolver,
     defaultValues: function () {
-      var _defaultValues2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
+      var _defaultValues2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              _context.next = 2;
+              _context.next = 1;
               return Promise.resolve(_defaultValues);
-            case 2:
+            case 1:
               return _context.abrupt("return", _context.sent);
-            case 3:
+            case 2:
             case "end":
               return _context.stop();
           }
@@ -121,15 +121,15 @@ var Form = function Form(_ref) {
         return form.handleSubmit(_onSubmit);
       },
       validate: function () {
-        var _validate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fields) {
-          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        var _validate = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fields) {
+          return _regeneratorRuntime.wrap(function (_context2) {
             while (1) switch (_context2.prev = _context2.next) {
               case 0:
-                _context2.next = 2;
+                _context2.next = 1;
                 return form.trigger(fields);
-              case 2:
+              case 1:
                 return _context2.abrupt("return", _context2.sent);
-              case 3:
+              case 2:
               case "end":
                 return _context2.stop();
             }
@@ -187,29 +187,5 @@ var Form = function Form(_ref) {
     }))
   }));
 };
-var useForm = function useForm() {
-  var _useFormContext = reactHookForm.useFormContext(),
-    formState = _useFormContext.formState,
-    getValues = _useFormContext.getValues,
-    setValue = _useFormContext.setValue,
-    watch = _useFormContext.watch,
-    reset = _useFormContext.reset,
-    resetField = _useFormContext.resetField,
-    setError = _useFormContext.setError,
-    setFocus = _useFormContext.setFocus;
-  var values = reactHookForm.useWatch();
-  return {
-    values: _objectSpread(_objectSpread({}, values), getValues()),
-    formState: formState,
-    getValues: getValues,
-    setValue: setValue,
-    watch: watch,
-    reset: reset,
-    resetField: resetField,
-    setError: setError,
-    setFocus: setFocus
-  };
-};
 
 exports.Form = Form;
-exports.useForm = useForm;

package/dist/cjs/form/useForm.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var reactHookForm = require('react-hook-form');
+
+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 useForm = function useForm() {
+  var _useFormContext = reactHookForm.useFormContext(),
+    formState = _useFormContext.formState,
+    getValues = _useFormContext.getValues,
+    setValue = _useFormContext.setValue,
+    watch = _useFormContext.watch,
+    reset = _useFormContext.reset,
+    resetField = _useFormContext.resetField,
+    setError = _useFormContext.setError,
+    setFocus = _useFormContext.setFocus;
+  var values = reactHookForm.useWatch();
+  return {
+    values: _objectSpread(_objectSpread({}, values), getValues()),
+    formState: formState,
+    getValues: getValues,
+    setValue: setValue,
+    watch: watch,
+    reset: reset,
+    resetField: resetField,
+    setError: setError,
+    setFocus: setFocus
+  };
+};
+
+exports.useForm = useForm;

package/dist/cjs/hooks/useFileUploader.js

@@ -136,10 +136,10 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
       initialList: initialList
     });
   }, [initialList]);
-  var doUpload = react.useCallback( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(key, file) {
+  var doUpload = react.useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(key, file) {
       var data, _abort2;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+      return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             data = new FormData();
@@ -160,7 +160,7 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
                 }
               }
             });
-            _context.next = 6;
+            _context.next = 1;
             return uploader(data, {
               signal: _abort2.signal,
               onUploadProgress: function onUploadProgress(progressEvent) {
@@ -191,7 +191,7 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
                 error: (_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : "form:fileUploadFailed"
               });
             });
-          case 6:
+          case 1:
           case "end":
             return _context.stop();
         }

package/dist/cjs/hooks/useFormBuilder.js

@@ -11,11 +11,11 @@ var jsxRuntime = require('react/jsx-runtime');
 
 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 makeYupField = function makeYupField(field) {
+var _makeYupField = function makeYupField(field) {
   var yupField = utilities.yup.string().trim();
   if (field.datatype === schema.DATA_TYPES.SCHEMA) {
     var child = Object.fromEntries(field.schema.map(function (field) {
-      return [field.id, makeYupField(field)];
+      return [field.id, _makeYupField(field)];
     }));
     yupField = utilities.yup.object(child);
   }
@@ -103,7 +103,7 @@ var useFormBuilder = function useFormBuilder(schema$1) {
   }, [schema$1]);
   var schemaDef = react.useMemo(function () {
     return utilities.yup.object(Object.fromEntries(filteredSchema.map(function (field) {
-      return [field.id, makeYupField(field)];
+      return [field.id, _makeYupField(field)];
     })));
   }, [filteredSchema]);
   var resolver = react.useMemo(function () {

package/dist/cjs/index.js

@@ -3,6 +3,7 @@
 require('./i18n/index.js');
 var Controller = require('./form/Controller.js');
 var Form = require('./form/Form.js');
+var useForm = require('./form/useForm.js');
 var SchemaEditor = require('./builder/SchemaEditor.js');
 var useFileUploader = require('./hooks/useFileUploader.js');
 var useFormBuilder = require('./hooks/useFormBuilder.js');
@@ -35,7 +36,7 @@ var Select = require('./select/Select.js');
 
 exports.Controller = Controller.Controller;
 exports.Form = Form.Form;
-exports.useForm = Form.useForm;
+exports.useForm = useForm.useForm;
 exports.SchemaEditor = SchemaEditor.SchemaEditor;
 exports.useFileUploader = useFileUploader.useFileUploader;
 exports.useFormBuilder = useFormBuilder.useFormBuilder;

package/dist/cjs/input/ArrayInput.js

@@ -1,8 +1,10 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var core$1 = require('@react-fabric/core');
@@ -31,7 +33,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It also supports drag-and-drop sorting using `@dnd-kit/core` and `@dnd-kit/sortable` for a better user experience when reordering items.
  *
  * @param {ArrayInputProps<T>} props - The properties for the ArrayInput component.
- * @returns {JSX.Element} The rendered ArrayInput component.
+ * @returns {React.ReactElement} The rendered ArrayInput component.
  *
  * @example
  * ```jsx
@@ -121,13 +123,36 @@ var ArrayInput = function ArrayInput(_ref) {
     }
     return true;
   }, [canRemove, initialList, fields]);
-  var handleAdd = react.useCallback(function (item) {
-    if (!item) return;
-    append(item);
-    setTimeout(function () {
-      form.setFocus("".concat(name, ".").concat(fields.length).concat(focusName ? "." + focusName : ""));
-    }, 100);
-  }, [name, fields, focusName]);
+  var handleAdd = react.useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(item) {
+      var _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (item) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            _t = append;
+            _context.next = 2;
+            return item;
+          case 2:
+            _t(_context.sent);
+            setTimeout(function () {
+              form.setFocus("".concat(name, ".").concat(fields.length).concat(focusName ? "." + focusName : ""));
+            }, 100);
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [name, fields, focusName]);
   var handleRemove = react.useCallback(function (item, index) {
     var ret = onBeforeRemove === null || onBeforeRemove === void 0 ? void 0 : onBeforeRemove(item, index);
     void Promise.resolve(ret).then(function (b) {
@@ -139,14 +164,14 @@ var ArrayInput = function ArrayInput(_ref) {
   }, [remove, onRemove, onBeforeRemove]);
   react.useImperativeHandle(arrayRef, function () {
     return {
-      addItem: handleAdd,
+      addItem: function addItem(t) {
+        return handleAdd(Promise.resolve(t));
+      },
       removeItem: remove
     };
   });
-  var Wrapper = react.useCallback(
-  // eslint-disable-next-line @typescript-eslint/promise-function-async
-  function (_ref2) {
-    var children = _ref2.children;
+  var Wrapper = react.useCallback(function (_ref3) {
+    var children = _ref3.children;
     if (enableSorting) {
       // pass id list to dnd context
       var idMap = fields.map(function (item) {
@@ -173,10 +198,10 @@ var ArrayInput = function ArrayInput(_ref) {
   }, [enableSorting, fields]);
   // @ts-expect-error ignore
   Wrapper.displayName = "SortableWrapper";
-  var SortableItem = react.useCallback(function (_ref3) {
-    var id = _ref3.id,
-      children = _ref3.children,
-      className = _ref3.className;
+  var SortableItem = react.useCallback(function (_ref4) {
+    var id = _ref4.id,
+      children = _ref4.children,
+      className = _ref4.className;
     if (enableSorting) {
       var _useSortable = sortable.useSortable({
           id: id
@@ -221,7 +246,7 @@ var ArrayInput = function ArrayInput(_ref) {
           "aria-label": "Add item",
           icon: "icon-[mdi--plus-circle-outline]",
           onClick: function onClick() {
-            return handleAdd(onAdd === null || onAdd === void 0 ? void 0 : onAdd());
+            return handleAdd(Promise.resolve(onAdd === null || onAdd === void 0 ? void 0 : onAdd()));
           },
           "data-invalid": !!error,
           disabled: !!disabled || readOnly || fields.length > maxItems,
@@ -246,7 +271,29 @@ var ArrayInput = function ArrayInput(_ref) {
             children: [typeof children === "function" ? children({
               index: index,
               item: item,
-              name: "".concat(name, ".").concat(index)
+              name: "".concat(name, ".").concat(index),
+              onChange: function () {
+                var _onChange = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(val) {
+                  var result;
+                  return _regeneratorRuntime.wrap(function (_context2) {
+                    while (1) switch (_context2.prev = _context2.next) {
+                      case 0:
+                        _context2.next = 1;
+                        return Promise.resolve(val);
+                      case 1:
+                        result = _context2.sent;
+                        result && form.setValue("".concat(name, ".").concat(index), result);
+                      case 2:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }, _callee2);
+                }));
+                function onChange(_x2) {
+                  return _onChange.apply(this, arguments);
+                }
+                return onChange;
+              }()
             }) : core$1.cloneChildren(children, function (child) {
               return /*#__PURE__*/react.cloneElement(child, Object.assign({
                 disabled: disabled,

package/dist/cjs/input/AvatarInput.js

@@ -21,7 +21,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It also provides a way to remove the uploaded file and shows upload progress.
  *
  * @param {Props} props - The properties for the AvatarInput component.
- * @returns {JSX.Element} - The rendered AvatarInput component.
+ * @returns {React.ReactElement} - The rendered AvatarInput component.
  */
 var AvatarInput = function AvatarInput(_ref) {
   var _files$2;
@@ -38,16 +38,16 @@ var AvatarInput = function AvatarInput(_ref) {
     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) {
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
+  var _useFileUploader = useFileUploader.useFileUploader(/*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
+        return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              _context.next = 2;
+              _context.next = 1;
               return uploadHandler === null || uploadHandler === void 0 ? void 0 : uploadHandler(data, config);
-            case 2:
+            case 1:
               return _context.abrupt("return", _context.sent);
-            case 3:
+            case 2:
             case "end":
               return _context.stop();
           }

package/dist/cjs/input/Checkbox.js

@@ -19,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It also provides an error icon to indicate validation errors.
  *
  * @param {CheckboxProps} props - The properties for the Checkbox component.
- * @returns {JSX.Element} The rendered Checkbox component.
+ * @returns {React.ReactElement} The rendered Checkbox component.
  */
 var Checkbox = function Checkbox(_ref) {
   var ref = _ref.ref,

package/dist/cjs/input/ColorInput.js

@@ -24,7 +24,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * and handling the color selection state.
  *
  * @param {ColorInputProps} props - The properties for the ColorInput component.
- * @returns {JSX.Element} - The rendered ColorInput component.
+ * @returns {React.ReactElement} - The rendered ColorInput component.
  */
 var ColorInput = function ColorInput(_ref) {
   _ref.ref;
@@ -123,24 +123,31 @@ var ColorInput = function ColorInput(_ref) {
           icon: "icon-[mdi--palette]"
         })
       })
-    })), isOpen && /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-      ref: refs.setFloating,
-      style: _objectSpread({
-        zIndex: "var(--z-popover)"
-      }, floatingStyles),
-      "data-ref": "dropdownBody"
-    }, getFloatingProps()), {}, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(ColorPicker.ColorPicker, _objectSpread(_objectSpread({}, rest), {}, {
-        onChange: handleChange,
-        defaultColor: defaultColor,
-        value: actualValue
-      })), /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingArrow, {
-        ref: arrowRef,
-        context: context,
-        strokeWidth: 0.5,
-        className: "fill-base stroke-muted"
-      })]
-    })), !disabled && showPicker && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+    })), isOpen && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
+      context: context,
+      closeOnFocusOut: true,
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+        ref: refs.setFloating,
+        style: _objectSpread({
+          zIndex: "var(--z-popover)"
+        }, floatingStyles),
+        "data-ref": "dropdownBody"
+      }, getFloatingProps()), {}, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(ColorPicker.ColorPicker, _objectSpread(_objectSpread({}, rest), {}, {
+          onChange: handleChange,
+          defaultColor: defaultColor,
+          value: actualValue
+        })), /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingArrow, {
+          ref: arrowRef,
+          context: context,
+          strokeWidth: 0.5,
+          className: "stroke-muted",
+          style: {
+            fill: actualValue || "var(--bg-color-base)"
+          }
+        })]
+      }))
+    }), !disabled && showPicker && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
       className: "flex-content p-1",
       icon: "icon-[mdi--eyedropper]",
       onClick: function onClick() {