@algolia/satellite 2.9.1 → 2.11.0

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

@@ -30,9 +30,8 @@ var _Switch = require("./../../Switch");
 var _TextArea = require("./../../TextArea");
 var _satellitePrefixer = _interopRequireDefault(require("./../../../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
-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;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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) { (0, _defineProperty2["default"])(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 initialFormData = {
@@ -324,7 +323,7 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
               labelFor: "gender",
               description: "Please specify your gender",
               state: getFieldState("gender"),
-              className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
                 id: "gender",
                 required: true
@@ -348,7 +347,7 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
               labelFor: "jobPositions",
               description: "Please specify the job positions you are interested in",
               state: getFieldState("jobPositions"),
-              className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.AutoComplete, _objectSpread({
                 id: "jobPositions",
                 options: jobPositions,
@@ -369,7 +368,7 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
               labelFor: "employmentStatus",
               description: "Please specify your employment status",
               state: getFieldState("employmentStatus"),
-              className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup, _objectSpread(_objectSpread({
                 id: "employmentStatus",
                 required: true
@@ -393,7 +392,7 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
               labelFor: "birthday",
               description: "Please specify your birthday",
               state: getFieldState("birthday"),
-              className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DateInput, _objectSpread({
                 id: "birthday",
                 required: true,
@@ -417,7 +416,7 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
               labelFor: "age",
               description: "Please specify your age",
               state: getFieldState("age"),
-              className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
                 id: "age",
                 type: "number",
@@ -430,28 +429,28 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
           name: "hobbies",
           control: control,
-          render: function render(_ref10) {
-            var field = _ref10.field;
+          render: function render(_ref0) {
+            var field = _ref0.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
               label: "Hobbies",
               labelFor: hobbies[0],
               description: "Please specify your hobbies",
               state: getFieldState("hobbies"),
-              className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectableCardGroup.SelectableCardGroup, {
                 type: "multiple",
-                className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+                className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
                 value: field.value,
                 onValueChange: field.onChange,
                 required: true,
                 children: hobbies.map(function (hobby) {
                   return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
                     htmlFor: hobby,
-                    className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex-1 cursor-pointer"]))),
+                    className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["flex-1 cursor-pointer"]))),
                     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectableCard.SelectableCard, {
                       id: hobby,
                       value: hobby,
-                      className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["p-4"]))),
+                      className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["p-4"]))),
                       children: (0, _capitalize["default"])(hobby)
                     })
                   }, hobby);
@@ -462,16 +461,16 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
           name: "interest",
           control: control,
-          render: function render(_ref11) {
-            var field = _ref11.field;
+          render: function render(_ref1) {
+            var field = _ref1.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
               label: "Interest",
               labelFor: "interest",
               description: "Please specify your interest",
               state: getFieldState("interest"),
-              className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-                className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
+                className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   children: "0"
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -490,16 +489,16 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
           name: "idealLocation",
           control: control,
-          render: function render(_ref12) {
-            var field = _ref12.field;
+          render: function render(_ref10) {
+            var field = _ref10.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
               label: "Ideal Location",
               labelFor: "idealLocation",
               description: "Please specify your ideal location",
               state: getFieldState("idealLocation"),
-              className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-                className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
+                className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   children: "0 km"
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -525,14 +524,14 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
           name: "profilePicture",
           control: control,
-          render: function render(_ref13) {
-            var field = _ref13.field;
+          render: function render(_ref11) {
+            var field = _ref11.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
               label: "Profile Picture",
               labelFor: "profilePicture",
               description: "Please upload your profile picture, 1 MB minimum",
               state: getFieldState("profilePicture"),
-              className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Dropzone, _objectSpread(_objectSpread({
                 id: "profilePicture",
                 minSize: 1024 * 1024 * 1,
@@ -548,14 +547,14 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
           name: "bio",
           control: control,
-          render: function render(_ref14) {
-            var field = _ref14.field;
+          render: function render(_ref12) {
+            var field = _ref12.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
               label: "Bio",
               labelFor: "bio",
               description: "Please write a short bio",
               state: getFieldState("bio"),
-              className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, _objectSpread({
                 id: "bio",
                 required: true
@@ -565,14 +564,14 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
           name: "acceptTerms",
           control: control,
-          render: function render(_ref15) {
-            var field = _ref15.field;
+          render: function render(_ref13) {
+            var field = _ref13.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
               label: "Accept Terms",
               labelFor: "acceptTerms",
               description: "Please accept the terms",
               state: getFieldState("acceptTerms"),
-              className: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               inline: true,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, _objectSpread({
                 id: "acceptTerms",
@@ -584,14 +583,14 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
           name: "newsletter",
           control: control,
-          render: function render(_ref16) {
-            var field = _ref16.field;
+          render: function render(_ref14) {
+            var field = _ref14.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
               label: "Receive Newsletter",
               labelFor: "newsletter",
               description: "Do you want to receive our newsletter?",
               state: getFieldState("newsletter"),
-              className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               inline: true,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.Switch, _objectSpread({
                 id: "newsletter",
@@ -601,7 +600,7 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
             });
           }
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
             variant: "primary",
             "aria-label": "Save the form",
@@ -615,9 +614,9 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-        className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+        className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-        className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
         children: JSON.stringify(formData, null, 2)
       })]
     })
@@ -641,8 +640,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(", ");
@@ -694,9 +693,9 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
   };
   (0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _satellitePrefixer["default"])(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
         onSubmit: function onSubmit(e) {
           setRevalidationEnabled(true);
@@ -706,13 +705,13 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           setRevalidationEnabled(false);
           formik.handleReset(e);
         },
-        className: (0, _satellitePrefixer["default"])(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
           label: "First Name",
           labelFor: "firstName",
           description: "Please enter your first name",
           state: getFieldState("firstName"),
-          className: (0, _satellitePrefixer["default"])(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
             id: "firstName",
             placeholder: "John",
@@ -723,7 +722,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "lastName",
           description: "Please enter your last name",
           state: getFieldState("lastName"),
-          className: (0, _satellitePrefixer["default"])(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
             id: "lastName",
             placeholder: "Doe",
@@ -734,7 +733,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "password",
           description: "Please enter your password",
           state: getFieldState("password"),
-          className: (0, _satellitePrefixer["default"])(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
             id: "password",
             placeholder: "Password",
@@ -746,14 +745,14 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: civilities[0],
           description: "Please enter your civility",
           state: getFieldState("civility"),
-          className: (0, _satellitePrefixer["default"])(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteral2["default"])(["flex gap-4 display-body"]))),
+            className: (0, _satellitePrefixer["default"])(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2["default"])(["flex gap-4 display-body"]))),
             children: civilities.map(function (civility, index) {
               return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
                 id: index === 0 ? "civility" : undefined,
                 htmlFor: civility,
-                className: (0, _satellitePrefixer["default"])(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-1"]))),
+                className: (0, _satellitePrefixer["default"])(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-1"]))),
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread({
                   id: civility,
                   "aria-labelledby": civility,
@@ -771,7 +770,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "gender",
           description: "Please specify your gender",
           state: getFieldState("gender"),
-          className: (0, _satellitePrefixer["default"])(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
             id: "gender",
             required: true
@@ -788,7 +787,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "jobPositions",
           description: "Please specify the job positions you are interested in",
           state: getFieldState("jobPositions"),
-          className: (0, _satellitePrefixer["default"])(_templateObject40 || (_templateObject40 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.AutoComplete, {
             id: "jobPositions",
             options: jobPositions,
@@ -807,7 +806,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "employmentStatus",
           description: "Please specify your employment status",
           state: getFieldState("employmentStatus"),
-          className: (0, _satellitePrefixer["default"])(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup, {
             id: "employmentStatus",
             required: true,
@@ -827,7 +826,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "birthday",
           description: "Please specify your birthday",
           state: getFieldState("birthday"),
-          className: (0, _satellitePrefixer["default"])(_templateObject42 || (_templateObject42 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject40 || (_templateObject40 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DateInput, {
             id: "birthday",
             required: true,
@@ -848,7 +847,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "age",
           description: "Please specify your age",
           state: getFieldState("age"),
-          className: (0, _satellitePrefixer["default"])(_templateObject43 || (_templateObject43 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
             id: "age",
             type: "number",
@@ -861,10 +860,10 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: hobbies[0],
           description: "Please specify your hobbies",
           state: getFieldState("hobbies"),
-          className: (0, _satellitePrefixer["default"])(_templateObject44 || (_templateObject44 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject42 || (_templateObject42 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectableCardGroup.SelectableCardGroup, {
             type: "multiple",
-            className: (0, _satellitePrefixer["default"])(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+            className: (0, _satellitePrefixer["default"])(_templateObject43 || (_templateObject43 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
             value: formik.values.hobbies,
             onValueChange: function onValueChange(value) {
               return formik.setFieldValue("hobbies", value);
@@ -873,11 +872,11 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
             children: hobbies.map(function (hobby) {
               return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
                 htmlFor: hobby,
-                className: (0, _satellitePrefixer["default"])(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteral2["default"])(["flex-1 cursor-pointer"]))),
+                className: (0, _satellitePrefixer["default"])(_templateObject44 || (_templateObject44 = (0, _taggedTemplateLiteral2["default"])(["flex-1 cursor-pointer"]))),
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectableCard.SelectableCard, {
                   id: hobby,
                   value: hobby,
-                  className: (0, _satellitePrefixer["default"])(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteral2["default"])(["p-4"]))),
+                  className: (0, _satellitePrefixer["default"])(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteral2["default"])(["p-4"]))),
                   children: (0, _capitalize["default"])(hobby)
                 })
               }, hobby);
@@ -888,9 +887,9 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "interest",
           description: "Please specify your interest",
           state: getFieldState("interest"),
-          className: (0, _satellitePrefixer["default"])(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-            className: (0, _satellitePrefixer["default"])(_templateObject49 || (_templateObject49 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
+            className: (0, _satellitePrefixer["default"])(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               children: "0"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -913,9 +912,9 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "idealLocation",
           description: "Please specify your ideal location",
           state: getFieldState("idealLocation"),
-          className: (0, _satellitePrefixer["default"])(_templateObject50 || (_templateObject50 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-            className: (0, _satellitePrefixer["default"])(_templateObject51 || (_templateObject51 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
+            className: (0, _satellitePrefixer["default"])(_templateObject49 || (_templateObject49 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               children: "0 km"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -945,7 +944,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "profilePicture",
           description: "Please upload your profile picture, 1 MB minimum",
           state: getFieldState("profilePicture"),
-          className: (0, _satellitePrefixer["default"])(_templateObject52 || (_templateObject52 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject50 || (_templateObject50 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Dropzone, {
             id: "profilePicture",
             minSize: 1024 * 1024 * 1,
@@ -960,7 +959,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "bio",
           description: "Please write a short bio",
           state: getFieldState("bio"),
-          className: (0, _satellitePrefixer["default"])(_templateObject53 || (_templateObject53 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject51 || (_templateObject51 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, _objectSpread({
             id: "bio",
             required: true
@@ -970,7 +969,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "acceptTerms",
           description: "Please accept the terms",
           state: getFieldState("acceptTerms"),
-          className: (0, _satellitePrefixer["default"])(_templateObject54 || (_templateObject54 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject52 || (_templateObject52 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           inline: true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, _objectSpread({
             id: "acceptTerms",
@@ -982,7 +981,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "newsletter",
           description: "Do you want to receive our newsletter?",
           state: getFieldState("newsletter"),
-          className: (0, _satellitePrefixer["default"])(_templateObject55 || (_templateObject55 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject53 || (_templateObject53 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           inline: true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.Switch, _objectSpread({
             id: "newsletter",
@@ -990,7 +989,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
             checked: formik.values.newsletter
           }, formik.getFieldProps("newsletter")))
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject56 || (_templateObject56 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject54 || (_templateObject54 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
             variant: "primary",
             "aria-label": "Save the form",
@@ -1004,9 +1003,9 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-        className: (0, _satellitePrefixer["default"])(_templateObject57 || (_templateObject57 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+        className: (0, _satellitePrefixer["default"])(_templateObject55 || (_templateObject55 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-        className: (0, _satellitePrefixer["default"])(_templateObject58 || (_templateObject58 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject56 || (_templateObject56 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
         children: JSON.stringify(formData, null, 2)
       })]
     })

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

@@ -21,9 +21,8 @@ var _Form = require("./../Form");
 var _Input = require("./../../Input");
 var _satellitePrefixer = _interopRequireDefault(require("./../../../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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) { (0, _defineProperty2["default"])(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 initialFormData = {
@@ -195,7 +194,7 @@ var FormikDependentFieldsValidationComponent = exports.FormikDependentFieldsVali
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
         onSubmit: function onSubmit(e) {
           setRevalidationEnabled(true);
@@ -205,13 +204,13 @@ var FormikDependentFieldsValidationComponent = exports.FormikDependentFieldsVali
           setRevalidationEnabled(false);
           formik.handleReset(e);
         },
-        className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
           label: "Password",
           labelFor: "password",
           description: "Please enter your password",
           state: getFieldState("password"),
-          className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
             id: "password",
             placeholder: "Password",
@@ -223,7 +222,7 @@ var FormikDependentFieldsValidationComponent = exports.FormikDependentFieldsVali
           labelFor: "confirmPassword",
           description: "Please confirm your password",
           state: getFieldState("confirmPassword"),
-          className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
             id: "confirmPassword",
             placeholder: "Confirm password",
@@ -231,7 +230,7 @@ var FormikDependentFieldsValidationComponent = exports.FormikDependentFieldsVali
             required: true
           }, formik.getFieldProps("confirmPassword")))
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
             variant: "primary",
             "aria-label": "Save the form",
@@ -245,9 +244,9 @@ var FormikDependentFieldsValidationComponent = exports.FormikDependentFieldsVali
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-        className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+        className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-        className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
         children: JSON.stringify(formData, null, 2)
       })]
     })