@algolia/satellite 2.10.0 → 2.11.0

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56;
 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; }
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -314,7 +314,7 @@ export var RHFComplexComponent = function RHFComplexComponent() {
               labelFor: "gender",
               description: "Please specify your gender",
               state: getFieldState("gender"),
-              className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
                 id: "gender",
                 required: true
@@ -338,7 +338,7 @@ export var RHFComplexComponent = function RHFComplexComponent() {
               labelFor: "jobPositions",
               description: "Please specify the job positions you are interested in",
               state: getFieldState("jobPositions"),
-              className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(AutoComplete, _objectSpread({
                 id: "jobPositions",
                 options: jobPositions,
@@ -359,7 +359,7 @@ export var RHFComplexComponent = function RHFComplexComponent() {
               labelFor: "employmentStatus",
               description: "Please specify your employment status",
               state: getFieldState("employmentStatus"),
-              className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(RadioGroup, _objectSpread(_objectSpread({
                 id: "employmentStatus",
                 required: true
@@ -383,7 +383,7 @@ export var RHFComplexComponent = function RHFComplexComponent() {
               labelFor: "birthday",
               description: "Please specify your birthday",
               state: getFieldState("birthday"),
-              className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(DateInput, _objectSpread({
                 id: "birthday",
                 required: true,
@@ -407,7 +407,7 @@ export var RHFComplexComponent = function RHFComplexComponent() {
               labelFor: "age",
               description: "Please specify your age",
               state: getFieldState("age"),
-              className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(Input, _objectSpread({
                 id: "age",
                 type: "number",
@@ -420,28 +420,28 @@ export var RHFComplexComponent = function RHFComplexComponent() {
         }), /*#__PURE__*/_jsx(Controller, {
           name: "hobbies",
           control: control,
-          render: function render(_ref10) {
-            var field = _ref10.field;
+          render: function render(_ref0) {
+            var field = _ref0.field;
             return /*#__PURE__*/_jsx(Field, {
               label: "Hobbies",
               labelFor: hobbies[0],
               description: "Please specify your hobbies",
               state: getFieldState("hobbies"),
-              className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(SelectableCardGroup, {
                 type: "multiple",
-                className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex gap-2"]))),
+                className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["flex gap-2"]))),
                 value: field.value,
                 onValueChange: field.onChange,
                 required: true,
                 children: hobbies.map(function (hobby) {
                   return /*#__PURE__*/_jsx("label", {
                     htmlFor: hobby,
-                    className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-1 cursor-pointer"]))),
+                    className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["flex-1 cursor-pointer"]))),
                     children: /*#__PURE__*/_jsx(SelectableCard, {
                       id: hobby,
                       value: hobby,
-                      className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["p-4"]))),
+                      className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["p-4"]))),
                       children: capitalize(hobby)
                     })
                   }, hobby);
@@ -452,16 +452,16 @@ export var RHFComplexComponent = function RHFComplexComponent() {
         }), /*#__PURE__*/_jsx(Controller, {
           name: "interest",
           control: control,
-          render: function render(_ref11) {
-            var field = _ref11.field;
+          render: function render(_ref1) {
+            var field = _ref1.field;
             return /*#__PURE__*/_jsxs(Field, {
               label: "Interest",
               labelFor: "interest",
               description: "Please specify your interest",
               state: getFieldState("interest"),
-              className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["w-full"]))),
               children: [/*#__PURE__*/_jsxs("p", {
-                className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
+                className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
                 children: [/*#__PURE__*/_jsx("span", {
                   children: "0"
                 }), /*#__PURE__*/_jsx("span", {
@@ -480,16 +480,16 @@ export var RHFComplexComponent = function RHFComplexComponent() {
         }), /*#__PURE__*/_jsx(Controller, {
           name: "idealLocation",
           control: control,
-          render: function render(_ref12) {
-            var field = _ref12.field;
+          render: function render(_ref10) {
+            var field = _ref10.field;
             return /*#__PURE__*/_jsxs(Field, {
               label: "Ideal Location",
               labelFor: "idealLocation",
               description: "Please specify your ideal location",
               state: getFieldState("idealLocation"),
-              className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["w-full"]))),
               children: [/*#__PURE__*/_jsxs("p", {
-                className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
+                className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
                 children: [/*#__PURE__*/_jsx("span", {
                   children: "0 km"
                 }), /*#__PURE__*/_jsx("span", {
@@ -515,14 +515,14 @@ export var RHFComplexComponent = function RHFComplexComponent() {
         }), /*#__PURE__*/_jsx(Controller, {
           name: "profilePicture",
           control: control,
-          render: function render(_ref13) {
-            var field = _ref13.field;
+          render: function render(_ref11) {
+            var field = _ref11.field;
             return /*#__PURE__*/_jsx(Field, {
               label: "Profile Picture",
               labelFor: "profilePicture",
               description: "Please upload your profile picture, 1 MB minimum",
               state: getFieldState("profilePicture"),
-              className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(Dropzone, _objectSpread(_objectSpread({
                 id: "profilePicture",
                 minSize: 1024 * 1024 * 1,
@@ -538,14 +538,14 @@ export var RHFComplexComponent = function RHFComplexComponent() {
         }), /*#__PURE__*/_jsx(Controller, {
           name: "bio",
           control: control,
-          render: function render(_ref14) {
-            var field = _ref14.field;
+          render: function render(_ref12) {
+            var field = _ref12.field;
             return /*#__PURE__*/_jsx(Field, {
               label: "Bio",
               labelFor: "bio",
               description: "Please write a short bio",
               state: getFieldState("bio"),
-              className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(TextArea, _objectSpread({
                 id: "bio",
                 required: true
@@ -555,14 +555,14 @@ export var RHFComplexComponent = function RHFComplexComponent() {
         }), /*#__PURE__*/_jsx(Controller, {
           name: "acceptTerms",
           control: control,
-          render: function render(_ref15) {
-            var field = _ref15.field;
+          render: function render(_ref13) {
+            var field = _ref13.field;
             return /*#__PURE__*/_jsx(Field, {
               label: "Accept Terms",
               labelFor: "acceptTerms",
               description: "Please accept the terms",
               state: getFieldState("acceptTerms"),
-              className: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["w-full"]))),
               inline: true,
               children: /*#__PURE__*/_jsx(Checkbox, _objectSpread({
                 id: "acceptTerms",
@@ -574,14 +574,14 @@ export var RHFComplexComponent = function RHFComplexComponent() {
         }), /*#__PURE__*/_jsx(Controller, {
           name: "newsletter",
           control: control,
-          render: function render(_ref16) {
-            var field = _ref16.field;
+          render: function render(_ref14) {
+            var field = _ref14.field;
             return /*#__PURE__*/_jsx(Field, {
               label: "Receive Newsletter",
               labelFor: "newsletter",
               description: "Do you want to receive our newsletter?",
               state: getFieldState("newsletter"),
-              className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["w-full"]))),
               inline: true,
               children: /*#__PURE__*/_jsx(Switch, _objectSpread({
                 id: "newsletter",
@@ -591,7 +591,7 @@ export var RHFComplexComponent = function RHFComplexComponent() {
             });
           }
         }), /*#__PURE__*/_jsxs("div", {
-          className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["flex gap-2"]))),
+          className: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["flex gap-2"]))),
           children: [/*#__PURE__*/_jsx(FormSubmit, {
             variant: "primary",
             "aria-label": "Save the form",
@@ -605,9 +605,9 @@ export var RHFComplexComponent = function RHFComplexComponent() {
           })]
         })]
       }), /*#__PURE__*/_jsx("hr", {
-        className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["text-grey-500"])))
+        className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["text-grey-500"])))
       }), /*#__PURE__*/_jsx("code", {
-        className: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
         children: JSON.stringify(formData, null, 2)
       })]
     })
@@ -631,8 +631,8 @@ var yupSchema = yup.object({
   hobbies: yup.array(yup.string().oneOf(hobbies)).min(1, "You must specify at least one hobby"),
   interest: yup.number().min(5, "Your level of interest must be at least 5").required(),
   idealLocation: yup.array(yup.number().min(10, "Your minimum ideal location must be 10 km").max(40, "Your maximum ideal location must be 40 km").required()).required(),
-  profilePicture: yup.mixed().nullable().test("profilePicture", function (_ref17) {
-    var value = _ref17.value;
+  profilePicture: yup.mixed().nullable().test("profilePicture", function (_ref15) {
+    var value = _ref15.value;
     return value.errors.map(function (error) {
       return error.message;
     }).join(", ");
@@ -684,9 +684,9 @@ export var FormikComplexComponent = function FormikComplexComponent() {
   };
   useFormikAutoFocusOnError(formik);
   return /*#__PURE__*/_jsx("div", {
-    className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
     children: /*#__PURE__*/_jsxs("div", {
-      className: stl(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      className: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
       children: [/*#__PURE__*/_jsxs(Form, {
         onSubmit: function onSubmit(e) {
           setRevalidationEnabled(true);
@@ -696,13 +696,13 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           setRevalidationEnabled(false);
           formik.handleReset(e);
         },
-        className: stl(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
         children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
           label: "First Name",
           labelFor: "firstName",
           description: "Please enter your first name",
           state: getFieldState("firstName"),
-          className: stl(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Input, _objectSpread({
             id: "firstName",
             placeholder: "John",
@@ -713,7 +713,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "lastName",
           description: "Please enter your last name",
           state: getFieldState("lastName"),
-          className: stl(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Input, _objectSpread({
             id: "lastName",
             placeholder: "Doe",
@@ -724,7 +724,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "password",
           description: "Please enter your password",
           state: getFieldState("password"),
-          className: stl(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Input, _objectSpread({
             id: "password",
             placeholder: "Password",
@@ -736,14 +736,14 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: civilities[0],
           description: "Please enter your civility",
           state: getFieldState("civility"),
-          className: stl(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["flex gap-4 display-body"]))),
+            className: stl(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["flex gap-4 display-body"]))),
             children: civilities.map(function (civility, index) {
               return /*#__PURE__*/_jsxs("label", {
                 id: index === 0 ? "civility" : undefined,
                 htmlFor: civility,
-                className: stl(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["flex items-center gap-1"]))),
+                className: stl(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["flex items-center gap-1"]))),
                 children: [/*#__PURE__*/_jsx(RadioButton, _objectSpread({
                   id: civility,
                   "aria-labelledby": civility,
@@ -761,7 +761,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "gender",
           description: "Please specify your gender",
           state: getFieldState("gender"),
-          className: stl(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
             id: "gender",
             required: true
@@ -778,7 +778,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "jobPositions",
           description: "Please specify the job positions you are interested in",
           state: getFieldState("jobPositions"),
-          className: stl(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(AutoComplete, {
             id: "jobPositions",
             options: jobPositions,
@@ -797,7 +797,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "employmentStatus",
           description: "Please specify your employment status",
           state: getFieldState("employmentStatus"),
-          className: stl(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(RadioGroup, {
             id: "employmentStatus",
             required: true,
@@ -817,7 +817,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "birthday",
           description: "Please specify your birthday",
           state: getFieldState("birthday"),
-          className: stl(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(DateInput, {
             id: "birthday",
             required: true,
@@ -838,7 +838,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "age",
           description: "Please specify your age",
           state: getFieldState("age"),
-          className: stl(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Input, _objectSpread({
             id: "age",
             type: "number",
@@ -851,10 +851,10 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: hobbies[0],
           description: "Please specify your hobbies",
           state: getFieldState("hobbies"),
-          className: stl(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(SelectableCardGroup, {
             type: "multiple",
-            className: stl(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["flex gap-2"]))),
+            className: stl(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["flex gap-2"]))),
             value: formik.values.hobbies,
             onValueChange: function onValueChange(value) {
               return formik.setFieldValue("hobbies", value);
@@ -863,11 +863,11 @@ export var FormikComplexComponent = function FormikComplexComponent() {
             children: hobbies.map(function (hobby) {
               return /*#__PURE__*/_jsx("label", {
                 htmlFor: hobby,
-                className: stl(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["flex-1 cursor-pointer"]))),
+                className: stl(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["flex-1 cursor-pointer"]))),
                 children: /*#__PURE__*/_jsx(SelectableCard, {
                   id: hobby,
                   value: hobby,
-                  className: stl(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["p-4"]))),
+                  className: stl(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["p-4"]))),
                   children: capitalize(hobby)
                 })
               }, hobby);
@@ -878,9 +878,9 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "interest",
           description: "Please specify your interest",
           state: getFieldState("interest"),
-          className: stl(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["w-full"]))),
           children: [/*#__PURE__*/_jsxs("p", {
-            className: stl(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
+            className: stl(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
             children: [/*#__PURE__*/_jsx("span", {
               children: "0"
             }), /*#__PURE__*/_jsx("span", {
@@ -903,9 +903,9 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "idealLocation",
           description: "Please specify your ideal location",
           state: getFieldState("idealLocation"),
-          className: stl(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["w-full"]))),
           children: [/*#__PURE__*/_jsxs("p", {
-            className: stl(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
+            className: stl(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
             children: [/*#__PURE__*/_jsx("span", {
               children: "0 km"
             }), /*#__PURE__*/_jsx("span", {
@@ -935,7 +935,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "profilePicture",
           description: "Please upload your profile picture, 1 MB minimum",
           state: getFieldState("profilePicture"),
-          className: stl(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Dropzone, {
             id: "profilePicture",
             minSize: 1024 * 1024 * 1,
@@ -950,7 +950,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "bio",
           description: "Please write a short bio",
           state: getFieldState("bio"),
-          className: stl(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(TextArea, _objectSpread({
             id: "bio",
             required: true
@@ -960,7 +960,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "acceptTerms",
           description: "Please accept the terms",
           state: getFieldState("acceptTerms"),
-          className: stl(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["w-full"]))),
           inline: true,
           children: /*#__PURE__*/_jsx(Checkbox, _objectSpread({
             id: "acceptTerms",
@@ -972,7 +972,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "newsletter",
           description: "Do you want to receive our newsletter?",
           state: getFieldState("newsletter"),
-          className: stl(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["w-full"]))),
           inline: true,
           children: /*#__PURE__*/_jsx(Switch, _objectSpread({
             id: "newsletter",
@@ -980,7 +980,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
             checked: formik.values.newsletter
           }, formik.getFieldProps("newsletter")))
         }), /*#__PURE__*/_jsxs("div", {
-          className: stl(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["flex gap-2"]))),
+          className: stl(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["flex gap-2"]))),
           children: [/*#__PURE__*/_jsx(FormSubmit, {
             variant: "primary",
             "aria-label": "Save the form",
@@ -994,9 +994,9 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           })]
         })]
       }), /*#__PURE__*/_jsx("hr", {
-        className: stl(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["text-grey-500"])))
+        className: stl(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["text-grey-500"])))
       }), /*#__PURE__*/_jsx("code", {
-        className: stl(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        className: stl(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
         children: JSON.stringify(formData, null, 2)
       })]
     })

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 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; }
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -185,7 +185,7 @@ export var FormikDependentFieldsValidationComponent = function FormikDependentFi
   return /*#__PURE__*/_jsx("div", {
     className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
     children: /*#__PURE__*/_jsxs("div", {
-      className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      className: stl(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
       children: [/*#__PURE__*/_jsxs(Form, {
         onSubmit: function onSubmit(e) {
           setRevalidationEnabled(true);
@@ -195,13 +195,13 @@ export var FormikDependentFieldsValidationComponent = function FormikDependentFi
           setRevalidationEnabled(false);
           formik.handleReset(e);
         },
-        className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        className: stl(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
         children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
           label: "Password",
           labelFor: "password",
           description: "Please enter your password",
           state: getFieldState("password"),
-          className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Input, _objectSpread({
             id: "password",
             placeholder: "Password",
@@ -213,7 +213,7 @@ export var FormikDependentFieldsValidationComponent = function FormikDependentFi
           labelFor: "confirmPassword",
           description: "Please confirm your password",
           state: getFieldState("confirmPassword"),
-          className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Input, _objectSpread({
             id: "confirmPassword",
             placeholder: "Confirm password",
@@ -221,7 +221,7 @@ export var FormikDependentFieldsValidationComponent = function FormikDependentFi
             required: true
           }, formik.getFieldProps("confirmPassword")))
         }), /*#__PURE__*/_jsxs("div", {
-          className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["flex gap-2"]))),
+          className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex gap-2"]))),
           children: [/*#__PURE__*/_jsx(FormSubmit, {
             variant: "primary",
             "aria-label": "Save the form",
@@ -235,9 +235,9 @@ export var FormikDependentFieldsValidationComponent = function FormikDependentFi
           })]
         })]
       }), /*#__PURE__*/_jsx("hr", {
-        className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["text-grey-500"])))
+        className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-grey-500"])))
       }), /*#__PURE__*/_jsx("code", {
-        className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
         children: JSON.stringify(formData, null, 2)
       })]
     })