@algolia/satellite 1.4.1 → 1.6.0

package/dist/cjs/Actions/Button/Button.tailwind.js

@@ -47,10 +47,6 @@ var buttonPlugin = plugin(function (_ref) {
         backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
         borderColor: theme("colors.grey.200")
       },
-      "&:focus": {
-        backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
-        boxShadow: "0 2px 0 1px ".concat(theme("colors.shadow.5"))
-      },
       "&:active, &.btn-active": {
         borderColor: theme("colors.grey.200"),
         boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.grey.500"), 0.4), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
@@ -73,10 +69,6 @@ var buttonPlugin = plugin(function (_ref) {
         backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.accent.800"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
         boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n        ")
       },
-      "&:focus": {
-        backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.accent.600"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
-        boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 2px 0 1px ").concat(theme("colors.shadow.10"), "\n        ")
-      },
       "&:active, &.btn-active": {
         backgroundColor: theme("colors.accent.700"),
         borderColor: theme("colors.accent.800"),
@@ -100,10 +92,6 @@ var buttonPlugin = plugin(function (_ref) {
         borderColor: theme("colors.red.800"),
         boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n        ")
       },
-      "&:focus": {
-        backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.red.600"), " 0%, ").concat(theme("colors.red.700"), " 100%)"),
-        boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 2px 0 1px ").concat(theme("colors.shadow.10"), "\n        ")
-      },
       "&:active, &.btn-active": {
         borderColor: theme("colors.red.800"),
         boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.red.900"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.red.900"), 0.6), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")

package/dist/cjs/Fields/AutoComplete/AutoComplete.js

@@ -280,11 +280,9 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     },
     // We need to make sure to define event handlers here so that they can be composed properly
     onFocus: function onFocus(evt) {
-      var _menuPopper$update2;
       _onFocus === null || _onFocus === void 0 || _onFocus(evt);
       if (evt.defaultPrevented) return;
       setInputFocused(true);
-      (_menuPopper$update2 = menuPopper.update) === null || _menuPopper$update2 === void 0 || _menuPopper$update2.call(menuPopper);
     },
     onBlur: function onBlur(evt) {
       _onBlur === null || _onBlur === void 0 || _onBlur(evt);
@@ -326,6 +324,12 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
       inputValue: inputValue
     });
   }, [inputRef, internalsRef, inputValue]);
+  var oldHideMenu = (0, _react.useRef)(hideMenu);
+  if (oldHideMenu.current !== hideMenu) {
+    var _menuPopper$update2;
+    oldHideMenu.current = hideMenu;
+    (_menuPopper$update2 = menuPopper.update) === null || _menuPopper$update2 === void 0 || _menuPopper$update2.call(menuPopper);
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoCompleteContext.AutoCompleteProvider, {
     locale: locale,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/dist/cjs/Fields/Field/Field.d.ts

@@ -3,18 +3,22 @@ import type { FieldState } from "./FieldContext";
 export interface FieldProps {
     /** @ignore */
     className?: string;
-    /** Label to display above the nested input */
+    /** Define a label to display above the nested input. */
     label?: ReactChild;
+    /** Define the `id` of the label. */
     labelId?: string;
+    /** Define the `id` of the input used by the label. */
     labelFor?: string;
-    /** Helpful description to show below the `Field` */
+    /** Define an helpful description to show below the `Field`. */
     description?: ReactNode;
-    /**
-     * An object to handle state
-     */
+    /** Define the state of the `Field`. */
     state?: FieldState;
+    /** Define if the `Field` should be displayed inline. */
     inline?: boolean;
+    /** Define if the `Field` is required. */
     required?: boolean;
+    /** Define the visibility of the required indicator. */
+    hideRequiredIndicator?: boolean;
     children: ReactNode;
 }
 /**

package/dist/cjs/Fields/Field/Field.js

@@ -33,6 +33,8 @@ var Field = exports.Field = function Field(_ref) {
     _ref$inline = _ref.inline,
     inline = _ref$inline === void 0 ? false : _ref$inline,
     requiredProp = _ref.required,
+    _ref$hideRequiredIndi = _ref.hideRequiredIndicator,
+    hideRequiredIndicator = _ref$hideRequiredIndi === void 0 ? false : _ref$hideRequiredIndi,
     children = _ref.children;
   var hasLabel = !!label;
   var labelId = (0, _react.useMemo)(
@@ -93,8 +95,8 @@ var Field = exports.Field = function Field(_ref) {
         children: [hasLabel && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           id: labelId,
           className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
-          children: [label, (requiredProp || requiredContext) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-red-700 ml-0.5"]))),
+          children: [label, !hideRequiredIndicator && (requiredProp || requiredContext) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-red-700 ml-0.5 align-top"]))),
             "aria-hidden": true,
             children: "*"
           })]

package/dist/cjs/Fields/Form/stories/AsynchronousValidation.js

@@ -189,7 +189,7 @@ var RHFAsyncValidationComponent = exports.RHFAsyncValidationComponent = function
       onReset: function onReset() {
         return setFormData(initialFormData);
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
         name: "username",
         control: control,
@@ -245,7 +245,7 @@ var RHFAsyncValidationComponent = exports.RHFAsyncValidationComponent = function
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
       className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });
@@ -347,7 +347,7 @@ var FormikAsyncValidationComponent = exports.FormikAsyncValidationComponent = fu
         setRevalidationEnabled(false);
         formik.handleReset(e);
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
         label: "Username",
         labelFor: "username",
@@ -389,7 +389,7 @@ var FormikAsyncValidationComponent = exports.FormikAsyncValidationComponent = fu
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
       className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });

package/dist/cjs/Fields/Form/stories/Complex.js

@@ -209,7 +209,7 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
       onReset: function onReset() {
         return setFormData(initialFormData);
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
         name: "firstName",
         control: control,
@@ -564,7 +564,7 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
       className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });
@@ -647,7 +647,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
         setRevalidationEnabled(false);
         formik.handleReset(e);
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
         label: "First Name",
         labelFor: "firstName",
@@ -918,7 +918,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
       className: (0, _satellitePrefixer["default"])(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });

package/dist/cjs/Fields/Form/stories/DependentFieldsValidation.js

@@ -85,7 +85,7 @@ var RHFDependentFieldsValidationComponent = exports.RHFDependentFieldsValidation
       onReset: function onReset() {
         return setFormData(initialFormData);
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
         name: "password",
         control: control,
@@ -141,7 +141,7 @@ var RHFDependentFieldsValidationComponent = exports.RHFDependentFieldsValidation
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
       className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });
@@ -200,7 +200,7 @@ var FormikDependentFieldsValidationComponent = exports.FormikDependentFieldsVali
         setRevalidationEnabled(false);
         formik.handleReset(e);
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
         label: "Password",
         labelFor: "password",
@@ -242,7 +242,7 @@ var FormikDependentFieldsValidationComponent = exports.FormikDependentFieldsVali
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
       className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });

package/dist/cjs/Fields/Form/stories/DirtyFields.js

@@ -95,7 +95,7 @@ var RHFDirtyFieldsComponent = exports.RHFDirtyFieldsComponent = function RHFDirt
       onReset: function onReset() {
         return setFormData(initialFormData);
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
         name: "name",
         control: control,
@@ -192,7 +192,7 @@ var RHFDirtyFieldsComponent = exports.RHFDirtyFieldsComponent = function RHFDirt
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
       className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });
@@ -263,7 +263,7 @@ var FormikDirtyFieldsComponent = exports.FormikDirtyFieldsComponent = function F
         setRevalidationEnabled(false);
         formik.handleReset(e);
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
         label: "Name",
         labelFor: "name",
@@ -332,7 +332,7 @@ var FormikDirtyFieldsComponent = exports.FormikDirtyFieldsComponent = function F
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
       className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });

package/dist/cjs/Fields/Form/stories/DynamicFieldsValidation.js

@@ -115,7 +115,7 @@ var RHFDynamicFieldsValidationComponent = exports.RHFDynamicFieldsValidationComp
       onReset: function onReset() {
         return setFormData(initialFormData);
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
         name: "name",
         control: control,
@@ -247,7 +247,7 @@ var RHFDynamicFieldsValidationComponent = exports.RHFDynamicFieldsValidationComp
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
       className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });
@@ -328,7 +328,7 @@ var FormikDynamicFieldsValidationComponent = exports.FormikDynamicFieldsValidati
         setRevalidationEnabled(false);
         formik.handleReset(e);
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
         label: "Name",
         labelFor: "name",
@@ -418,7 +418,7 @@ var FormikDynamicFieldsValidationComponent = exports.FormikDynamicFieldsValidati
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
       className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });

package/dist/cjs/Fields/Form/stories/FieldArrays.js

@@ -119,7 +119,7 @@ var RHFFieldsArraysComponent = exports.RHFFieldsArraysComponent = function RHFFi
         onReset: function onReset() {
           return setFormData(initialFormData);
         },
-        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), fields.map(function (field, index) {
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full flex flex-col gap-2"]))),
@@ -171,7 +171,7 @@ var RHFFieldsArraysComponent = exports.RHFFieldsArraysComponent = function RHFFi
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
         className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
         children: JSON.stringify(formData, null, 2)
       })]
     }))
@@ -212,7 +212,7 @@ var RHFFilter = function RHFFilter(_ref) {
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-full flex flex-col items-start gap-4 bg-grey-100 border border-grey-200 rounded p-4"]))),
+    className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-full flex flex-col items-start gap-6 bg-grey-100 border border-grey-200 rounded p-4"]))),
     children: [fields.map(function (field, index) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["w-full flex items-stretch gap-2"]))),
@@ -367,7 +367,7 @@ var FormikFieldArraysComponent = exports.FormikFieldArraysComponent = function F
             setRevalidationEnabled(false);
             handleReset(e);
           },
-          className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_formik.FieldArray, {
             name: "filterGroups",
             render: function render(_ref6) {
@@ -427,7 +427,7 @@ var FormikFieldArraysComponent = exports.FormikFieldArraysComponent = function F
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
       className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
       children: JSON.stringify(formData, null, 2)
     })]
   });
@@ -460,7 +460,7 @@ var FormikFilter = function FormikFilter(_ref7) {
         remove = _ref8.remove,
         form = _ref8.form;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["w-full flex flex-col items-start gap-4 bg-grey-100 border border-grey-200 rounded p-4"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["w-full flex flex-col items-start gap-6 bg-grey-100 border border-grey-200 rounded p-4"]))),
         children: [formik.values.filterGroups[parentIndex].map(function (_, index) {
           var _form$values$filterGr;
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {