@algolia/satellite 1.5.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/dist/cjs/Actions/Accordion/Accordion.d.ts +142 -0
  2. package/dist/cjs/Actions/Accordion/Accordion.js +149 -0
  3. package/dist/cjs/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
  4. package/dist/cjs/Actions/Accordion/Accordion.tailwind.js +44 -0
  5. package/dist/cjs/Actions/Button/Button.tailwind.js +0 -12
  6. package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
  7. package/dist/cjs/Actions/index.d.ts +2 -0
  8. package/dist/cjs/Actions/index.js +18 -0
  9. package/dist/cjs/Fields/Field/Field.js +2 -2
  10. package/dist/cjs/Fields/Form/Form.d.ts +12 -10
  11. package/dist/cjs/Fields/Form/Form.js +50 -38
  12. package/dist/cjs/Fields/Form/FormContext.d.ts +6 -6
  13. package/dist/cjs/Fields/Form/FormContext.js +2 -2
  14. package/dist/cjs/Fields/Form/index.d.ts +4 -3
  15. package/dist/cjs/Fields/Form/index.js +31 -21
  16. package/dist/cjs/Fields/Form/stories/AsynchronousValidation.js +142 -127
  17. package/dist/cjs/Fields/Form/stories/Complex.js +648 -642
  18. package/dist/cjs/Fields/Form/stories/DependentFieldsValidation.js +127 -121
  19. package/dist/cjs/Fields/Form/stories/DirtyFields.js +195 -189
  20. package/dist/cjs/Fields/Form/stories/DynamicFieldsValidation.js +251 -245
  21. package/dist/cjs/Fields/Form/stories/ExtraErrors.js +289 -0
  22. package/dist/cjs/Fields/Form/stories/FieldArrays.js +180 -174
  23. package/dist/cjs/Fields/Form/stories/JSONForms.js +59 -56
  24. package/dist/cjs/Fields/Form/stories/MultiStep.js +706 -0
  25. package/dist/cjs/Fields/Form/stories/ValidationStrategies.js +243 -237
  26. package/dist/cjs/Fields/Form/useForm.d.ts +1 -1
  27. package/dist/cjs/Fields/Form/useForm.js +3 -3
  28. package/dist/cjs/Helpers/utilities/focusable.tailwind.js +1 -1
  29. package/dist/cjs/Icons/index.d.ts +1 -1
  30. package/dist/cjs/Icons/index.js +6 -0
  31. package/dist/cjs/Indicators/Skeleton/Skeleton.d.ts +7 -0
  32. package/dist/cjs/Indicators/Skeleton/Skeleton.js +12 -5
  33. package/dist/cjs/Indicators/index.d.ts +1 -0
  34. package/dist/cjs/Indicators/index.js +11 -0
  35. package/dist/cjs/Layout/Sidebar/SidebarButtonLink.js +1 -1
  36. package/dist/cjs/Layout/Sidebar/SidebarLink.js +2 -2
  37. package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
  38. package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
  39. package/dist/cjs/Layout/Tables/DataTable/DataTable.d.ts +3 -1
  40. package/dist/cjs/Layout/Tables/DataTable/DataTable.js +3 -0
  41. package/dist/cjs/Layout/Tables/Table/Table.d.ts +2 -0
  42. package/dist/cjs/Layout/Tables/Table/Table.js +4 -2
  43. package/dist/cjs/Layout/Tables/Table/Table.tailwind.js +6 -1
  44. package/dist/cjs/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
  45. package/dist/cjs/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
  46. package/dist/cjs/styles/tailwind.config.js +1 -1
  47. package/dist/cjs/utils/isCssPropertySupported.d.ts +1 -1
  48. package/dist/esm/Actions/Accordion/Accordion.d.ts +142 -0
  49. package/dist/esm/Actions/Accordion/Accordion.js +139 -0
  50. package/dist/esm/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
  51. package/dist/esm/Actions/Accordion/Accordion.tailwind.js +43 -0
  52. package/dist/esm/Actions/Button/Button.tailwind.js +0 -12
  53. package/dist/esm/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
  54. package/dist/esm/Actions/index.d.ts +2 -0
  55. package/dist/esm/Actions/index.js +2 -2
  56. package/dist/esm/Fields/Field/Field.js +3 -3
  57. package/dist/esm/Fields/Form/Form.d.ts +12 -10
  58. package/dist/esm/Fields/Form/Form.js +52 -40
  59. package/dist/esm/Fields/Form/FormContext.d.ts +6 -6
  60. package/dist/esm/Fields/Form/FormContext.js +1 -1
  61. package/dist/esm/Fields/Form/index.d.ts +4 -3
  62. package/dist/esm/Fields/Form/index.js +2 -3
  63. package/dist/esm/Fields/Form/stories/AsynchronousValidation.js +143 -128
  64. package/dist/esm/Fields/Form/stories/Complex.js +649 -643
  65. package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js +128 -122
  66. package/dist/esm/Fields/Form/stories/DirtyFields.js +196 -190
  67. package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js +252 -246
  68. package/dist/esm/Fields/Form/stories/ExtraErrors.js +279 -0
  69. package/dist/esm/Fields/Form/stories/FieldArrays.js +181 -175
  70. package/dist/esm/Fields/Form/stories/JSONForms.js +60 -57
  71. package/dist/esm/Fields/Form/stories/MultiStep.js +697 -0
  72. package/dist/esm/Fields/Form/stories/ValidationStrategies.js +244 -238
  73. package/dist/esm/Fields/Form/useForm.d.ts +1 -1
  74. package/dist/esm/Fields/Form/useForm.js +3 -3
  75. package/dist/esm/Helpers/utilities/focusable.tailwind.js +1 -1
  76. package/dist/esm/Icons/index.d.ts +1 -1
  77. package/dist/esm/Icons/index.js +1 -1
  78. package/dist/esm/Indicators/Skeleton/Skeleton.d.ts +7 -0
  79. package/dist/esm/Indicators/Skeleton/Skeleton.js +12 -5
  80. package/dist/esm/Indicators/index.d.ts +1 -0
  81. package/dist/esm/Indicators/index.js +2 -1
  82. package/dist/esm/Layout/Sidebar/SidebarButtonLink.js +1 -1
  83. package/dist/esm/Layout/Sidebar/SidebarLink.js +2 -2
  84. package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
  85. package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
  86. package/dist/esm/Layout/Tables/DataTable/DataTable.d.ts +3 -1
  87. package/dist/esm/Layout/Tables/DataTable/DataTable.js +3 -0
  88. package/dist/esm/Layout/Tables/Table/Table.d.ts +2 -0
  89. package/dist/esm/Layout/Tables/Table/Table.js +4 -2
  90. package/dist/esm/Layout/Tables/Table/Table.tailwind.js +6 -1
  91. package/dist/esm/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
  92. package/dist/esm/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
  93. package/dist/esm/styles/tailwind.config.js +1 -1
  94. package/dist/esm/utils/isCssPropertySupported.d.ts +1 -1
  95. package/dist/satellite.min.css +1 -1
  96. package/package.json +7 -1
@@ -28,7 +28,7 @@ var _Toggle = require("../../Toggle");
28
28
  var _Form = require("../Form");
29
29
  var _useFormikAutoFocusOnError = require("./utils/useFormikAutoFocusOnError");
30
30
  var _jsxRuntime = require("react/jsx-runtime");
31
- 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;
31
+ 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;
32
32
  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); }
33
33
  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; }
34
34
  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; }
@@ -200,373 +200,376 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
200
200
  };
201
201
  }
202
202
  };
203
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
204
- className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
205
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
206
- onSubmit: handleSubmit(function (data) {
207
- return setFormData(data);
208
- }),
209
- onReset: function onReset() {
210
- return setFormData(initialFormData);
211
- },
212
- className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
213
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
214
- name: "firstName",
215
- control: control,
216
- render: function render(_ref) {
217
- var field = _ref.field;
218
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
219
- label: "First Name",
220
- labelFor: "firstName",
221
- description: "Please enter your first name",
222
- state: getFieldState("firstName"),
223
- className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
224
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
225
- id: "firstName",
226
- placeholder: "John",
227
- required: true
228
- }, field))
229
- });
230
- }
231
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
232
- name: "lastName",
233
- control: control,
234
- render: function render(_ref2) {
235
- var field = _ref2.field;
236
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
237
- label: "Last Name",
238
- labelFor: "lastName",
239
- description: "Please enter your last name",
240
- state: getFieldState("lastName"),
241
- className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
242
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
243
- id: "lastName",
244
- placeholder: "Doe",
245
- required: true
246
- }, field))
247
- });
248
- }
249
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
250
- name: "password",
251
- control: control,
252
- render: function render(_ref3) {
253
- var field = _ref3.field;
254
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
255
- label: "Password",
256
- labelFor: "password",
257
- description: "Please enter your password",
258
- state: getFieldState("password"),
259
- className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
260
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
261
- id: "password",
262
- placeholder: "Password",
263
- type: "password",
264
- required: true
265
- }, field))
266
- });
267
- }
268
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
269
- name: "civility",
270
- control: control,
271
- render: function render(_ref4) {
272
- var field = _ref4.field;
273
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
274
- label: "Civility",
275
- labelFor: civilities[0],
276
- description: "Please enter your civility",
277
- state: getFieldState("civility"),
278
- className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
279
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
280
- className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex gap-4 display-body"]))),
281
- children: civilities.map(function (civility) {
282
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
283
- htmlFor: civility,
284
- className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-1"]))),
285
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread(_objectSpread({
286
- id: civility,
287
- "aria-labelledby": civility,
288
- required: true,
289
- checked: civility === field.value
290
- }, field), {}, {
291
- value: civility
292
- })), (0, _capitalize["default"])(civility)]
293
- }, civility);
294
- })
295
- })
296
- });
297
- }
298
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
299
- name: "gender",
300
- control: control,
301
- render: function render(_ref5) {
302
- var field = _ref5.field;
303
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
304
- label: "Gender",
305
- labelFor: "gender",
306
- description: "Please specify your gender",
307
- state: getFieldState("gender"),
308
- className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
309
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
310
- id: "gender",
311
- required: true
312
- }, field), {}, {
313
- children: genders.map(function (gender) {
314
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
315
- value: gender,
316
- children: (0, _capitalize["default"])(gender)
317
- }, gender);
318
- })
319
- }))
320
- });
321
- }
322
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
323
- name: "jobPositions",
324
- control: control,
325
- render: function render(_ref6) {
326
- var field = _ref6.field;
327
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
328
- label: "Job Positions",
329
- labelFor: "jobPositions",
330
- description: "Please specify the job positions you are interested in",
331
- state: getFieldState("jobPositions"),
332
- className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
333
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AutoComplete, _objectSpread({
334
- id: "jobPositions",
335
- options: jobPositions,
336
- placeholder: jobPositions[0].label,
337
- multiple: true,
338
- required: true,
339
- clearable: true
340
- }, field))
341
- });
342
- }
343
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
344
- name: "employmentStatus",
345
- control: control,
346
- render: function render(_ref7) {
347
- var field = _ref7.field;
348
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
349
- label: "Employment Status",
350
- labelFor: "employmentStatus",
351
- description: "Please specify your employment status",
352
- state: getFieldState("employmentStatus"),
353
- className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
354
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup, _objectSpread(_objectSpread({
355
- id: "employmentStatus",
356
- required: true
357
- }, field), {}, {
358
- children: employmentStatuses.map(function (employmentStatus) {
359
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup.Item, {
360
- value: employmentStatus,
361
- children: (0, _capitalize["default"])(employmentStatus)
362
- }, employmentStatus);
203
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
204
+ className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
205
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
206
+ className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
207
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
208
+ onSubmit: handleSubmit(function (data) {
209
+ return setFormData(data);
210
+ }),
211
+ onReset: function onReset() {
212
+ return setFormData(initialFormData);
213
+ },
214
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
215
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
216
+ name: "firstName",
217
+ control: control,
218
+ render: function render(_ref) {
219
+ var field = _ref.field;
220
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
221
+ label: "First Name",
222
+ labelFor: "firstName",
223
+ description: "Please enter your first name",
224
+ state: getFieldState("firstName"),
225
+ className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
226
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
227
+ id: "firstName",
228
+ placeholder: "John",
229
+ required: true
230
+ }, field))
231
+ });
232
+ }
233
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
234
+ name: "lastName",
235
+ control: control,
236
+ render: function render(_ref2) {
237
+ var field = _ref2.field;
238
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
239
+ label: "Last Name",
240
+ labelFor: "lastName",
241
+ description: "Please enter your last name",
242
+ state: getFieldState("lastName"),
243
+ className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
244
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
245
+ id: "lastName",
246
+ placeholder: "Doe",
247
+ required: true
248
+ }, field))
249
+ });
250
+ }
251
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
252
+ name: "password",
253
+ control: control,
254
+ render: function render(_ref3) {
255
+ var field = _ref3.field;
256
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
257
+ label: "Password",
258
+ labelFor: "password",
259
+ description: "Please enter your password",
260
+ state: getFieldState("password"),
261
+ className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
262
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
263
+ id: "password",
264
+ placeholder: "Password",
265
+ type: "password",
266
+ required: true
267
+ }, field))
268
+ });
269
+ }
270
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
271
+ name: "civility",
272
+ control: control,
273
+ render: function render(_ref4) {
274
+ var field = _ref4.field;
275
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
276
+ label: "Civility",
277
+ labelFor: civilities[0],
278
+ description: "Please enter your civility",
279
+ state: getFieldState("civility"),
280
+ className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
281
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
282
+ className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["flex gap-4 display-body"]))),
283
+ children: civilities.map(function (civility) {
284
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
285
+ htmlFor: civility,
286
+ className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-1"]))),
287
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread(_objectSpread({
288
+ id: civility,
289
+ "aria-labelledby": civility,
290
+ required: true,
291
+ checked: civility === field.value
292
+ }, field), {}, {
293
+ value: civility
294
+ })), (0, _capitalize["default"])(civility)]
295
+ }, civility);
296
+ })
363
297
  })
364
- }))
365
- });
366
- }
367
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
368
- name: "birthday",
369
- control: control,
370
- render: function render(_ref8) {
371
- var field = _ref8.field;
372
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
373
- label: "Birthday",
374
- labelFor: "birthday",
375
- description: "Please specify your birthday",
376
- state: getFieldState("birthday"),
377
- className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
378
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DatePicker, _objectSpread({
379
- id: "birthday",
380
- calendarProps: {
381
- disabled: {
382
- after: now
298
+ });
299
+ }
300
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
301
+ name: "gender",
302
+ control: control,
303
+ render: function render(_ref5) {
304
+ var field = _ref5.field;
305
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
306
+ label: "Gender",
307
+ labelFor: "gender",
308
+ description: "Please specify your gender",
309
+ state: getFieldState("gender"),
310
+ className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
311
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
312
+ id: "gender",
313
+ required: true
314
+ }, field), {}, {
315
+ children: genders.map(function (gender) {
316
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
317
+ value: gender,
318
+ children: (0, _capitalize["default"])(gender)
319
+ }, gender);
320
+ })
321
+ }))
322
+ });
323
+ }
324
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
325
+ name: "jobPositions",
326
+ control: control,
327
+ render: function render(_ref6) {
328
+ var field = _ref6.field;
329
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
330
+ label: "Job Positions",
331
+ labelFor: "jobPositions",
332
+ description: "Please specify the job positions you are interested in",
333
+ state: getFieldState("jobPositions"),
334
+ className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
335
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AutoComplete, _objectSpread({
336
+ id: "jobPositions",
337
+ options: jobPositions,
338
+ placeholder: jobPositions[0].label,
339
+ multiple: true,
340
+ required: true,
341
+ clearable: true
342
+ }, field))
343
+ });
344
+ }
345
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
346
+ name: "employmentStatus",
347
+ control: control,
348
+ render: function render(_ref7) {
349
+ var field = _ref7.field;
350
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
351
+ label: "Employment Status",
352
+ labelFor: "employmentStatus",
353
+ description: "Please specify your employment status",
354
+ state: getFieldState("employmentStatus"),
355
+ className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
356
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup, _objectSpread(_objectSpread({
357
+ id: "employmentStatus",
358
+ required: true
359
+ }, field), {}, {
360
+ children: employmentStatuses.map(function (employmentStatus) {
361
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup.Item, {
362
+ value: employmentStatus,
363
+ children: (0, _capitalize["default"])(employmentStatus)
364
+ }, employmentStatus);
365
+ })
366
+ }))
367
+ });
368
+ }
369
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
370
+ name: "birthday",
371
+ control: control,
372
+ render: function render(_ref8) {
373
+ var field = _ref8.field;
374
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
375
+ label: "Birthday",
376
+ labelFor: "birthday",
377
+ description: "Please specify your birthday",
378
+ state: getFieldState("birthday"),
379
+ className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
380
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DatePicker, _objectSpread({
381
+ id: "birthday",
382
+ calendarProps: {
383
+ disabled: {
384
+ after: now
385
+ }
386
+ },
387
+ required: true
388
+ }, field))
389
+ });
390
+ }
391
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
392
+ name: "age",
393
+ control: control,
394
+ render: function render(_ref9) {
395
+ var field = _ref9.field;
396
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
397
+ label: "Age",
398
+ labelFor: "age",
399
+ description: "Please specify your age",
400
+ state: getFieldState("age"),
401
+ className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
402
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
403
+ id: "age",
404
+ type: "number",
405
+ placeholder: "18",
406
+ step: 1,
407
+ required: true
408
+ }, field))
409
+ });
410
+ }
411
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
412
+ name: "interest",
413
+ control: control,
414
+ render: function render(_ref10) {
415
+ var field = _ref10.field;
416
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
417
+ label: "Interest",
418
+ labelFor: "interest",
419
+ description: "Please specify your interest",
420
+ state: getFieldState("interest"),
421
+ className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
422
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
423
+ className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
424
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
425
+ children: "0"
426
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
427
+ children: "5"
428
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
429
+ children: "10"
430
+ })]
431
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, _objectSpread({
432
+ id: "interest",
433
+ min: 0,
434
+ max: 10,
435
+ required: true
436
+ }, field))]
437
+ });
438
+ }
439
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
440
+ name: "idealLocation",
441
+ control: control,
442
+ render: function render(_ref11) {
443
+ var field = _ref11.field;
444
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
445
+ label: "Ideal Location",
446
+ labelFor: "idealLocation",
447
+ description: "Please specify your ideal location",
448
+ state: getFieldState("idealLocation"),
449
+ className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
450
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
451
+ className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
452
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
453
+ children: "0 km"
454
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
455
+ children: "10 km"
456
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
457
+ children: "20 km"
458
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
459
+ children: "30 km"
460
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
461
+ children: "40 km"
462
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
463
+ children: "50 km"
464
+ })]
465
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, _objectSpread({
466
+ id: "idealLocation",
467
+ min: 0,
468
+ max: 50,
469
+ step: 10,
470
+ required: true
471
+ }, field))]
472
+ });
473
+ }
474
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
475
+ name: "profilePicture",
476
+ control: control,
477
+ render: function render(_ref12) {
478
+ var field = _ref12.field;
479
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
480
+ label: "Profile Picture",
481
+ labelFor: "profilePicture",
482
+ description: "Please upload your profile picture, 1 MB minimum",
483
+ state: getFieldState("profilePicture"),
484
+ className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
485
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Dropzone, _objectSpread(_objectSpread({
486
+ id: "profilePicture",
487
+ minSize: 1024 * 1024 * 1,
488
+ accept: [".png", ".jpg"],
489
+ required: true
490
+ }, field), {}, {
491
+ onChange: function onChange(acceptedFiles, rejectedFiles) {
492
+ return field.onChange(rejectedFiles.length > 0 ? rejectedFiles[0] : acceptedFiles[0]);
383
493
  }
384
- },
385
- required: true
386
- }, field))
387
- });
388
- }
389
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
390
- name: "age",
391
- control: control,
392
- render: function render(_ref9) {
393
- var field = _ref9.field;
394
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
395
- label: "Age",
396
- labelFor: "age",
397
- description: "Please specify your age",
398
- state: getFieldState("age"),
399
- className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
400
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
401
- id: "age",
402
- type: "number",
403
- placeholder: "18",
404
- step: 1,
405
- required: true
406
- }, field))
407
- });
408
- }
409
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
410
- name: "interest",
411
- control: control,
412
- render: function render(_ref10) {
413
- var field = _ref10.field;
414
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
415
- label: "Interest",
416
- labelFor: "interest",
417
- description: "Please specify your interest",
418
- state: getFieldState("interest"),
419
- className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
420
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
421
- className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
422
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
423
- children: "0"
424
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
425
- children: "5"
426
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
427
- children: "10"
428
- })]
429
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, _objectSpread({
430
- id: "interest",
431
- min: 0,
432
- max: 10,
433
- required: true
434
- }, field))]
435
- });
436
- }
437
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
438
- name: "idealLocation",
439
- control: control,
440
- render: function render(_ref11) {
441
- var field = _ref11.field;
442
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
443
- label: "Ideal Location",
444
- labelFor: "idealLocation",
445
- description: "Please specify your ideal location",
446
- state: getFieldState("idealLocation"),
447
- className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
448
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
449
- className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
450
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
451
- children: "0 km"
452
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
453
- children: "10 km"
454
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
455
- children: "20 km"
456
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
457
- children: "30 km"
458
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
459
- children: "40 km"
460
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
461
- children: "50 km"
462
- })]
463
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, _objectSpread({
464
- id: "idealLocation",
465
- min: 0,
466
- max: 50,
467
- step: 10,
468
- required: true
469
- }, field))]
470
- });
471
- }
472
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
473
- name: "profilePicture",
474
- control: control,
475
- render: function render(_ref12) {
476
- var field = _ref12.field;
477
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
478
- label: "Profile Picture",
479
- labelFor: "profilePicture",
480
- description: "Please upload your profile picture, 1 MB minimum",
481
- state: getFieldState("profilePicture"),
482
- className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
483
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Dropzone, _objectSpread(_objectSpread({
484
- id: "profilePicture",
485
- minSize: 1024 * 1024 * 1,
486
- accept: [".png", ".jpg"],
487
- required: true
488
- }, field), {}, {
489
- onChange: function onChange(acceptedFiles, rejectedFiles) {
490
- return field.onChange(rejectedFiles.length > 0 ? rejectedFiles[0] : acceptedFiles[0]);
491
- }
492
- }))
493
- });
494
- }
495
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
496
- name: "bio",
497
- control: control,
498
- render: function render(_ref13) {
499
- var field = _ref13.field;
500
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
501
- label: "Bio",
502
- labelFor: "bio",
503
- description: "Please write a short bio",
504
- state: getFieldState("bio"),
505
- className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
506
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, _objectSpread({
507
- id: "bio",
508
- required: true
509
- }, field))
510
- });
511
- }
512
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
513
- name: "acceptTerms",
514
- control: control,
515
- render: function render(_ref14) {
516
- var field = _ref14.field;
517
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
518
- label: "Accept Terms",
519
- labelFor: "acceptTerms",
520
- description: "Please accept the terms",
521
- state: getFieldState("acceptTerms"),
522
- className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
523
- inline: true,
524
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Checkbox, _objectSpread({
525
- id: "acceptTerms",
526
- required: true,
527
- checked: getValues("acceptTerms")
528
- }, field))
529
- });
530
- }
531
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
532
- name: "newsletter",
533
- control: control,
534
- render: function render(_ref15) {
535
- var field = _ref15.field;
536
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
537
- label: "Receive Newsletter",
538
- labelFor: "newsletter",
539
- description: "Do you want to receive our newsletter?",
540
- state: getFieldState("newsletter"),
541
- className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
542
- inline: true,
543
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, _objectSpread({
544
- id: "newsletter",
545
- required: true,
546
- checked: getValues("newsletter")
547
- }, field))
548
- });
549
- }
550
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
551
- className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
552
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
553
- variant: "primary",
554
- "aria-label": "Save the form",
555
- children: "Save"
556
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
557
- "aria-label": "Reset the form",
558
- onClick: function onClick() {
559
- return reset();
560
- },
561
- children: "Reset"
494
+ }))
495
+ });
496
+ }
497
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
498
+ name: "bio",
499
+ control: control,
500
+ render: function render(_ref13) {
501
+ var field = _ref13.field;
502
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
503
+ label: "Bio",
504
+ labelFor: "bio",
505
+ description: "Please write a short bio",
506
+ state: getFieldState("bio"),
507
+ className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
508
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, _objectSpread({
509
+ id: "bio",
510
+ required: true
511
+ }, field))
512
+ });
513
+ }
514
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
515
+ name: "acceptTerms",
516
+ control: control,
517
+ render: function render(_ref14) {
518
+ var field = _ref14.field;
519
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
520
+ label: "Accept Terms",
521
+ labelFor: "acceptTerms",
522
+ description: "Please accept the terms",
523
+ state: getFieldState("acceptTerms"),
524
+ className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
525
+ inline: true,
526
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Checkbox, _objectSpread({
527
+ id: "acceptTerms",
528
+ required: true,
529
+ checked: getValues("acceptTerms")
530
+ }, field))
531
+ });
532
+ }
533
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
534
+ name: "newsletter",
535
+ control: control,
536
+ render: function render(_ref15) {
537
+ var field = _ref15.field;
538
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
539
+ label: "Receive Newsletter",
540
+ labelFor: "newsletter",
541
+ description: "Do you want to receive our newsletter?",
542
+ state: getFieldState("newsletter"),
543
+ className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
544
+ inline: true,
545
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, _objectSpread({
546
+ id: "newsletter",
547
+ required: true,
548
+ checked: getValues("newsletter")
549
+ }, field))
550
+ });
551
+ }
552
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
553
+ className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
554
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
555
+ variant: "primary",
556
+ "aria-label": "Save the form",
557
+ children: "Save"
558
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
559
+ "aria-label": "Reset the form",
560
+ onClick: function onClick() {
561
+ return reset();
562
+ },
563
+ children: "Reset"
564
+ })]
562
565
  })]
566
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
567
+ className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
568
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
569
+ className: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
570
+ children: JSON.stringify(formData, null, 2)
563
571
  })]
564
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
565
- className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
566
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
567
- className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
568
- children: JSON.stringify(formData, null, 2)
569
- })]
572
+ })
570
573
  });
571
574
  };
572
575
  var yupSchema = yup.object({
@@ -636,290 +639,293 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
636
639
  }
637
640
  };
638
641
  (0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
639
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
640
- className: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
641
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
642
- onSubmit: function onSubmit(e) {
643
- setRevalidationEnabled(true);
644
- formik.handleSubmit(e);
645
- },
646
- onReset: function onReset(e) {
647
- setRevalidationEnabled(false);
648
- formik.handleReset(e);
649
- },
650
- className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
651
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
652
- label: "First Name",
653
- labelFor: "firstName",
654
- description: "Please enter your first name",
655
- state: getFieldState("firstName"),
656
- className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
657
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
658
- id: "firstName",
659
- placeholder: "John",
660
- required: true
661
- }, formik.getFieldProps("firstName")))
662
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
663
- label: "Last Name",
664
- labelFor: "lastName",
665
- description: "Please enter your last name",
666
- state: getFieldState("lastName"),
667
- className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
668
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
669
- id: "lastName",
670
- placeholder: "Doe",
671
- required: true
672
- }, formik.getFieldProps("lastName")))
673
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
674
- label: "Password",
675
- labelFor: "password",
676
- description: "Please enter your password",
677
- state: getFieldState("password"),
678
- className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
679
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
680
- id: "password",
681
- placeholder: "Password",
682
- type: "password",
683
- required: true
684
- }, formik.getFieldProps("password")))
685
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
686
- label: "Civility",
687
- labelFor: civilities[0],
688
- description: "Please enter your civility",
689
- state: getFieldState("civility"),
690
- className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
691
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
692
- className: (0, _satellitePrefixer["default"])(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2["default"])(["flex gap-4 display-body"]))),
693
- children: civilities.map(function (civility, index) {
694
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
695
- id: index === 0 ? "civility" : undefined,
696
- htmlFor: civility,
697
- className: (0, _satellitePrefixer["default"])(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-1"]))),
698
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread({
699
- id: civility,
700
- "aria-labelledby": civility,
701
- required: true
702
- }, formik.getFieldProps({
703
- name: "civility",
704
- value: civility,
705
- type: "radio"
706
- }))), (0, _capitalize["default"])(civility)]
707
- }, civility);
642
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
643
+ className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
644
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
645
+ className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
646
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
647
+ onSubmit: function onSubmit(e) {
648
+ setRevalidationEnabled(true);
649
+ formik.handleSubmit(e);
650
+ },
651
+ onReset: function onReset(e) {
652
+ setRevalidationEnabled(false);
653
+ formik.handleReset(e);
654
+ },
655
+ className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
656
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
657
+ label: "First Name",
658
+ labelFor: "firstName",
659
+ description: "Please enter your first name",
660
+ state: getFieldState("firstName"),
661
+ className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
662
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
663
+ id: "firstName",
664
+ placeholder: "John",
665
+ required: true
666
+ }, formik.getFieldProps("firstName")))
667
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
668
+ label: "Last Name",
669
+ labelFor: "lastName",
670
+ description: "Please enter your last name",
671
+ state: getFieldState("lastName"),
672
+ className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
673
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
674
+ id: "lastName",
675
+ placeholder: "Doe",
676
+ required: true
677
+ }, formik.getFieldProps("lastName")))
678
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
679
+ label: "Password",
680
+ labelFor: "password",
681
+ description: "Please enter your password",
682
+ state: getFieldState("password"),
683
+ className: (0, _satellitePrefixer["default"])(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
684
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
685
+ id: "password",
686
+ placeholder: "Password",
687
+ type: "password",
688
+ required: true
689
+ }, formik.getFieldProps("password")))
690
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
691
+ label: "Civility",
692
+ labelFor: civilities[0],
693
+ description: "Please enter your civility",
694
+ state: getFieldState("civility"),
695
+ className: (0, _satellitePrefixer["default"])(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
696
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
697
+ className: (0, _satellitePrefixer["default"])(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2["default"])(["flex gap-4 display-body"]))),
698
+ children: civilities.map(function (civility, index) {
699
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
700
+ id: index === 0 ? "civility" : undefined,
701
+ htmlFor: civility,
702
+ className: (0, _satellitePrefixer["default"])(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-1"]))),
703
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread({
704
+ id: civility,
705
+ "aria-labelledby": civility,
706
+ required: true
707
+ }, formik.getFieldProps({
708
+ name: "civility",
709
+ value: civility,
710
+ type: "radio"
711
+ }))), (0, _capitalize["default"])(civility)]
712
+ }, civility);
713
+ })
708
714
  })
709
- })
710
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
711
- label: "Gender",
712
- labelFor: "gender",
713
- description: "Please specify your gender",
714
- state: getFieldState("gender"),
715
- className: (0, _satellitePrefixer["default"])(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
716
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
717
- id: "gender",
718
- required: true
719
- }, formik.getFieldProps("gender")), {}, {
720
- children: genders.map(function (gender) {
721
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
722
- value: gender,
723
- children: (0, _capitalize["default"])(gender)
724
- }, gender);
715
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
716
+ label: "Gender",
717
+ labelFor: "gender",
718
+ description: "Please specify your gender",
719
+ state: getFieldState("gender"),
720
+ className: (0, _satellitePrefixer["default"])(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
721
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
722
+ id: "gender",
723
+ required: true
724
+ }, formik.getFieldProps("gender")), {}, {
725
+ children: genders.map(function (gender) {
726
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
727
+ value: gender,
728
+ children: (0, _capitalize["default"])(gender)
729
+ }, gender);
730
+ })
731
+ }))
732
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
733
+ label: "Job Positions",
734
+ labelFor: "jobPositions",
735
+ description: "Please specify the job positions you are interested in",
736
+ state: getFieldState("jobPositions"),
737
+ className: (0, _satellitePrefixer["default"])(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
738
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AutoComplete, {
739
+ id: "jobPositions",
740
+ options: jobPositions,
741
+ placeholder: jobPositions[0].label,
742
+ multiple: true,
743
+ required: true,
744
+ clearable: true,
745
+ onChange: function onChange(value) {
746
+ return formik.setFieldValue("jobPositions", value);
747
+ },
748
+ onBlur: formik.handleBlur,
749
+ value: formik.values.jobPositions
725
750
  })
726
- }))
727
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
728
- label: "Job Positions",
729
- labelFor: "jobPositions",
730
- description: "Please specify the job positions you are interested in",
731
- state: getFieldState("jobPositions"),
732
- className: (0, _satellitePrefixer["default"])(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
733
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AutoComplete, {
734
- id: "jobPositions",
735
- options: jobPositions,
736
- placeholder: jobPositions[0].label,
737
- multiple: true,
738
- required: true,
739
- clearable: true,
740
- onChange: function onChange(value) {
741
- return formik.setFieldValue("jobPositions", value);
742
- },
743
- onBlur: formik.handleBlur,
744
- value: formik.values.jobPositions
745
- })
746
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
747
- label: "Employment Status",
748
- labelFor: "employmentStatus",
749
- description: "Please specify your employment status",
750
- state: getFieldState("employmentStatus"),
751
- className: (0, _satellitePrefixer["default"])(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
752
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup, {
753
- id: "employmentStatus",
754
- required: true,
755
- onChange: function onChange(value) {
756
- return formik.setFieldValue("employmentStatus", value);
757
- },
758
- value: formik.values.employmentStatus,
759
- children: employmentStatuses.map(function (employmentStatus) {
760
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup.Item, {
761
- value: employmentStatus,
762
- children: (0, _capitalize["default"])(employmentStatus)
763
- }, employmentStatus);
751
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
752
+ label: "Employment Status",
753
+ labelFor: "employmentStatus",
754
+ description: "Please specify your employment status",
755
+ state: getFieldState("employmentStatus"),
756
+ className: (0, _satellitePrefixer["default"])(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
757
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup, {
758
+ id: "employmentStatus",
759
+ required: true,
760
+ onChange: function onChange(value) {
761
+ return formik.setFieldValue("employmentStatus", value);
762
+ },
763
+ value: formik.values.employmentStatus,
764
+ children: employmentStatuses.map(function (employmentStatus) {
765
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup.Item, {
766
+ value: employmentStatus,
767
+ children: (0, _capitalize["default"])(employmentStatus)
768
+ }, employmentStatus);
769
+ })
764
770
  })
765
- })
766
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
767
- label: "Birthday",
768
- labelFor: "birthday",
769
- description: "Please specify your birthday",
770
- state: getFieldState("birthday"),
771
- className: (0, _satellitePrefixer["default"])(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
772
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DatePicker, {
773
- id: "birthday",
774
- calendarProps: {
775
- disabled: {
776
- after: now
777
- }
778
- },
779
- required: true,
780
- onChange: function onChange(value) {
781
- return formik.setFieldValue("birthday", value);
782
- },
783
- value: formik.values.birthday
784
- })
785
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
786
- label: "Age",
787
- labelFor: "age",
788
- description: "Please specify your age",
789
- state: getFieldState("age"),
790
- className: (0, _satellitePrefixer["default"])(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
791
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
792
- id: "age",
793
- type: "number",
794
- placeholder: "18",
795
- step: 1,
796
- required: true
797
- }, formik.getFieldProps("age")))
798
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
799
- label: "Interest",
800
- labelFor: "interest",
801
- description: "Please specify your interest",
802
- state: getFieldState("interest"),
803
- className: (0, _satellitePrefixer["default"])(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
804
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
805
- className: (0, _satellitePrefixer["default"])(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
806
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
807
- children: "0"
808
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
809
- children: "5"
810
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
811
- children: "10"
771
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
772
+ label: "Birthday",
773
+ labelFor: "birthday",
774
+ description: "Please specify your birthday",
775
+ state: getFieldState("birthday"),
776
+ className: (0, _satellitePrefixer["default"])(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
777
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DatePicker, {
778
+ id: "birthday",
779
+ calendarProps: {
780
+ disabled: {
781
+ after: now
782
+ }
783
+ },
784
+ required: true,
785
+ onChange: function onChange(value) {
786
+ return formik.setFieldValue("birthday", value);
787
+ },
788
+ value: formik.values.birthday
789
+ })
790
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
791
+ label: "Age",
792
+ labelFor: "age",
793
+ description: "Please specify your age",
794
+ state: getFieldState("age"),
795
+ className: (0, _satellitePrefixer["default"])(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
796
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
797
+ id: "age",
798
+ type: "number",
799
+ placeholder: "18",
800
+ step: 1,
801
+ required: true
802
+ }, formik.getFieldProps("age")))
803
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
804
+ label: "Interest",
805
+ labelFor: "interest",
806
+ description: "Please specify your interest",
807
+ state: getFieldState("interest"),
808
+ className: (0, _satellitePrefixer["default"])(_templateObject40 || (_templateObject40 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
809
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
810
+ className: (0, _satellitePrefixer["default"])(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
811
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
812
+ children: "0"
813
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
814
+ children: "5"
815
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
816
+ children: "10"
817
+ })]
818
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, {
819
+ id: "interest",
820
+ min: 0,
821
+ max: 10,
822
+ required: true,
823
+ onChange: function onChange(value) {
824
+ return formik.setFieldValue("interest", value);
825
+ },
826
+ value: formik.values.interest
812
827
  })]
813
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, {
814
- id: "interest",
815
- min: 0,
816
- max: 10,
817
- required: true,
818
- onChange: function onChange(value) {
819
- return formik.setFieldValue("interest", value);
820
- },
821
- value: formik.values.interest
822
- })]
823
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
824
- label: "Ideal Location",
825
- labelFor: "idealLocation",
826
- description: "Please specify your ideal location",
827
- state: getFieldState("idealLocation"),
828
- className: (0, _satellitePrefixer["default"])(_templateObject40 || (_templateObject40 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
829
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
830
- className: (0, _satellitePrefixer["default"])(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
831
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
832
- children: "0 km"
833
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
834
- children: "10 km"
835
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
836
- children: "20 km"
837
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
838
- children: "30 km"
839
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
840
- children: "40 km"
841
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
842
- children: "50 km"
828
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
829
+ label: "Ideal Location",
830
+ labelFor: "idealLocation",
831
+ description: "Please specify your ideal location",
832
+ state: getFieldState("idealLocation"),
833
+ className: (0, _satellitePrefixer["default"])(_templateObject42 || (_templateObject42 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
834
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
835
+ className: (0, _satellitePrefixer["default"])(_templateObject43 || (_templateObject43 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
836
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
837
+ children: "0 km"
838
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
839
+ children: "10 km"
840
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
841
+ children: "20 km"
842
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
843
+ children: "30 km"
844
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
845
+ children: "40 km"
846
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
847
+ children: "50 km"
848
+ })]
849
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, {
850
+ id: "idealLocation",
851
+ min: 0,
852
+ max: 50,
853
+ step: 10,
854
+ required: true,
855
+ onChange: function onChange(value) {
856
+ return formik.setFieldValue("idealLocation", value);
857
+ },
858
+ value: formik.values.idealLocation
859
+ })]
860
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
861
+ label: "Profile Picture",
862
+ labelFor: "profilePicture",
863
+ description: "Please upload your profile picture, 1 MB minimum",
864
+ state: getFieldState("profilePicture"),
865
+ className: (0, _satellitePrefixer["default"])(_templateObject44 || (_templateObject44 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
866
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Dropzone, {
867
+ id: "profilePicture",
868
+ minSize: 1024 * 1024 * 1,
869
+ accept: [".png", ".jpg"],
870
+ required: true,
871
+ onChange: function onChange(acceptedFiles, rejectedFiles) {
872
+ return formik.setFieldValue("profilePicture", rejectedFiles.length > 0 ? rejectedFiles[0] : acceptedFiles[0]);
873
+ }
874
+ })
875
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
876
+ label: "Bio",
877
+ labelFor: "bio",
878
+ description: "Please write a short bio",
879
+ state: getFieldState("bio"),
880
+ className: (0, _satellitePrefixer["default"])(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
881
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, _objectSpread({
882
+ id: "bio",
883
+ required: true
884
+ }, formik.getFieldProps("bio")))
885
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
886
+ label: "Accept Terms",
887
+ labelFor: "acceptTerms",
888
+ description: "Please accept the terms",
889
+ state: getFieldState("acceptTerms"),
890
+ className: (0, _satellitePrefixer["default"])(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
891
+ inline: true,
892
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Checkbox, _objectSpread({
893
+ id: "acceptTerms",
894
+ required: true,
895
+ checked: formik.values.acceptTerms
896
+ }, formik.getFieldProps("acceptTerms")))
897
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
898
+ label: "Receive Newsletter",
899
+ labelFor: "newsletter",
900
+ description: "Do you want to receive our newsletter?",
901
+ state: getFieldState("newsletter"),
902
+ className: (0, _satellitePrefixer["default"])(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
903
+ inline: true,
904
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, _objectSpread({
905
+ id: "newsletter",
906
+ required: true,
907
+ checked: formik.values.newsletter
908
+ }, formik.getFieldProps("newsletter")))
909
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
910
+ className: (0, _satellitePrefixer["default"])(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
911
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
912
+ variant: "primary",
913
+ "aria-label": "Save the form",
914
+ children: "Save"
915
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
916
+ "aria-label": "Reset the form",
917
+ onClick: function onClick() {
918
+ return formik.resetForm();
919
+ },
920
+ children: "Reset"
843
921
  })]
844
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, {
845
- id: "idealLocation",
846
- min: 0,
847
- max: 50,
848
- step: 10,
849
- required: true,
850
- onChange: function onChange(value) {
851
- return formik.setFieldValue("idealLocation", value);
852
- },
853
- value: formik.values.idealLocation
854
- })]
855
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
856
- label: "Profile Picture",
857
- labelFor: "profilePicture",
858
- description: "Please upload your profile picture, 1 MB minimum",
859
- state: getFieldState("profilePicture"),
860
- className: (0, _satellitePrefixer["default"])(_templateObject42 || (_templateObject42 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
861
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Dropzone, {
862
- id: "profilePicture",
863
- minSize: 1024 * 1024 * 1,
864
- accept: [".png", ".jpg"],
865
- required: true,
866
- onChange: function onChange(acceptedFiles, rejectedFiles) {
867
- return formik.setFieldValue("profilePicture", rejectedFiles.length > 0 ? rejectedFiles[0] : acceptedFiles[0]);
868
- }
869
- })
870
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
871
- label: "Bio",
872
- labelFor: "bio",
873
- description: "Please write a short bio",
874
- state: getFieldState("bio"),
875
- className: (0, _satellitePrefixer["default"])(_templateObject43 || (_templateObject43 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
876
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, _objectSpread({
877
- id: "bio",
878
- required: true
879
- }, formik.getFieldProps("bio")))
880
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
881
- label: "Accept Terms",
882
- labelFor: "acceptTerms",
883
- description: "Please accept the terms",
884
- state: getFieldState("acceptTerms"),
885
- className: (0, _satellitePrefixer["default"])(_templateObject44 || (_templateObject44 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
886
- inline: true,
887
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Checkbox, _objectSpread({
888
- id: "acceptTerms",
889
- required: true,
890
- checked: formik.values.acceptTerms
891
- }, formik.getFieldProps("acceptTerms")))
892
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
893
- label: "Receive Newsletter",
894
- labelFor: "newsletter",
895
- description: "Do you want to receive our newsletter?",
896
- state: getFieldState("newsletter"),
897
- className: (0, _satellitePrefixer["default"])(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
898
- inline: true,
899
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, _objectSpread({
900
- id: "newsletter",
901
- required: true,
902
- checked: formik.values.newsletter
903
- }, formik.getFieldProps("newsletter")))
904
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
905
- className: (0, _satellitePrefixer["default"])(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
906
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
907
- variant: "primary",
908
- "aria-label": "Save the form",
909
- children: "Save"
910
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
911
- "aria-label": "Reset the form",
912
- onClick: function onClick() {
913
- return formik.resetForm();
914
- },
915
- children: "Reset"
916
922
  })]
923
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
924
+ className: (0, _satellitePrefixer["default"])(_templateObject49 || (_templateObject49 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
925
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
926
+ className: (0, _satellitePrefixer["default"])(_templateObject50 || (_templateObject50 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
927
+ children: JSON.stringify(formData, null, 2)
917
928
  })]
918
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
919
- className: (0, _satellitePrefixer["default"])(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
920
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
921
- className: (0, _satellitePrefixer["default"])(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
922
- children: JSON.stringify(formData, null, 2)
923
- })]
929
+ })
924
930
  });
925
931
  };