@algolia/satellite 1.6.0 → 1.8.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 (132) 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/PolymorphicButton.js +2 -2
  6. package/dist/cjs/Actions/Button/PolymorphicIconButton.js +2 -2
  7. package/dist/cjs/Actions/Button/types.d.ts +2 -2
  8. package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
  9. package/dist/cjs/Actions/index.d.ts +2 -0
  10. package/dist/cjs/Actions/index.js +18 -0
  11. package/dist/cjs/Fields/AutoComplete/AutoComplete.js +4 -4
  12. package/dist/cjs/Fields/DatePicker/components/Calendar.js +1 -4
  13. package/dist/cjs/Fields/Field/Field.js +12 -2
  14. package/dist/cjs/Fields/Field/FieldContext.d.ts +1 -0
  15. package/dist/cjs/Fields/Field/useField.d.ts +2 -1
  16. package/dist/cjs/Fields/Field/useField.js +7 -2
  17. package/dist/cjs/Fields/Form/Form.d.ts +12 -10
  18. package/dist/cjs/Fields/Form/Form.js +50 -38
  19. package/dist/cjs/Fields/Form/FormContext.d.ts +6 -6
  20. package/dist/cjs/Fields/Form/FormContext.js +2 -2
  21. package/dist/cjs/Fields/Form/index.d.ts +4 -3
  22. package/dist/cjs/Fields/Form/index.js +31 -21
  23. package/dist/cjs/Fields/Form/stories/AsynchronousValidation.js +142 -127
  24. package/dist/cjs/Fields/Form/stories/Complex.js +648 -642
  25. package/dist/cjs/Fields/Form/stories/DependentFieldsValidation.js +127 -121
  26. package/dist/cjs/Fields/Form/stories/DirtyFields.js +195 -189
  27. package/dist/cjs/Fields/Form/stories/DynamicFieldsValidation.js +251 -245
  28. package/dist/cjs/Fields/Form/stories/ExtraErrors.js +276 -0
  29. package/dist/cjs/Fields/Form/stories/FieldArrays.js +180 -174
  30. package/dist/cjs/Fields/Form/stories/JSONForms.js +58 -55
  31. package/dist/cjs/Fields/Form/stories/MultiStep.js +456 -472
  32. package/dist/cjs/Fields/Form/stories/ValidationStrategies.js +226 -237
  33. package/dist/cjs/Fields/Form/useForm.d.ts +1 -1
  34. package/dist/cjs/Fields/Form/useForm.js +3 -3
  35. package/dist/cjs/Fields/RangeSlider/RangeSlider.js +7 -8
  36. package/dist/cjs/Helpers/utilities/focusable.tailwind.js +1 -1
  37. package/dist/cjs/Indicators/ScrollIndicator/ScrollIndicator.js +1 -2
  38. package/dist/cjs/Indicators/Skeleton/Skeleton.d.ts +7 -0
  39. package/dist/cjs/Indicators/Skeleton/Skeleton.js +12 -5
  40. package/dist/cjs/Layout/Sidebar/SidebarButtonLink.js +1 -1
  41. package/dist/cjs/Layout/Sidebar/SidebarLink.js +2 -2
  42. package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
  43. package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
  44. package/dist/cjs/Layout/Tables/DataTable/DataTable.d.ts +3 -1
  45. package/dist/cjs/Layout/Tables/DataTable/DataTable.js +3 -0
  46. package/dist/cjs/Layout/Tables/DataTable/components/Body.d.ts +1 -1
  47. package/dist/cjs/Layout/Tables/DataTable/components/Header.d.ts +1 -1
  48. package/dist/cjs/Layout/Tables/DataTable/components/HeaderCell.d.ts +1 -1
  49. package/dist/cjs/Layout/Tables/DataTable/utils.d.ts +1 -1
  50. package/dist/cjs/Layout/Tables/Table/Table.d.ts +2 -0
  51. package/dist/cjs/Layout/Tables/Table/Table.js +4 -2
  52. package/dist/cjs/Layout/Tables/Table/Table.tailwind.js +6 -1
  53. package/dist/cjs/Navigation/Stepper/Step.js +8 -7
  54. package/dist/cjs/Navigation/Stepper/Stepper.d.ts +6 -0
  55. package/dist/cjs/Navigation/Stepper/Stepper.js +9 -3
  56. package/dist/cjs/Navigation/Stepper/StepperContext.d.ts +2 -1
  57. package/dist/cjs/Overlay/Dropdown/DropdownContext.d.ts +1 -1
  58. package/dist/cjs/Overlay/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.d.ts +1 -1
  59. package/dist/cjs/Overlay/MenuButton/components/collapsible/CollapsibleItemsGroupContext.d.ts +1 -1
  60. package/dist/cjs/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
  61. package/dist/cjs/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
  62. package/dist/cjs/styles/helpers/makePurgeCssExtractor.js +3 -3
  63. package/dist/cjs/styles/tailwind.config.js +1 -1
  64. package/dist/cjs/utils/isCssPropertySupported.d.ts +1 -1
  65. package/dist/cjs/utils/useTriggerInputChange.js +4 -3
  66. package/dist/esm/Actions/Accordion/Accordion.d.ts +142 -0
  67. package/dist/esm/Actions/Accordion/Accordion.js +139 -0
  68. package/dist/esm/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
  69. package/dist/esm/Actions/Accordion/Accordion.tailwind.js +43 -0
  70. package/dist/esm/Actions/Button/PolymorphicButton.js +2 -2
  71. package/dist/esm/Actions/Button/PolymorphicIconButton.js +2 -2
  72. package/dist/esm/Actions/Button/types.d.ts +2 -2
  73. package/dist/esm/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
  74. package/dist/esm/Actions/index.d.ts +2 -0
  75. package/dist/esm/Actions/index.js +2 -2
  76. package/dist/esm/Fields/AutoComplete/AutoComplete.js +4 -4
  77. package/dist/esm/Fields/DatePicker/components/Calendar.js +1 -4
  78. package/dist/esm/Fields/Field/Field.js +13 -3
  79. package/dist/esm/Fields/Field/FieldContext.d.ts +1 -0
  80. package/dist/esm/Fields/Field/useField.d.ts +2 -1
  81. package/dist/esm/Fields/Field/useField.js +7 -2
  82. package/dist/esm/Fields/Form/Form.d.ts +12 -10
  83. package/dist/esm/Fields/Form/Form.js +52 -40
  84. package/dist/esm/Fields/Form/FormContext.d.ts +6 -6
  85. package/dist/esm/Fields/Form/FormContext.js +1 -1
  86. package/dist/esm/Fields/Form/index.d.ts +4 -3
  87. package/dist/esm/Fields/Form/index.js +2 -3
  88. package/dist/esm/Fields/Form/stories/AsynchronousValidation.js +143 -128
  89. package/dist/esm/Fields/Form/stories/Complex.js +649 -643
  90. package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js +128 -122
  91. package/dist/esm/Fields/Form/stories/DirtyFields.js +196 -190
  92. package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js +252 -246
  93. package/dist/esm/Fields/Form/stories/ExtraErrors.js +266 -0
  94. package/dist/esm/Fields/Form/stories/FieldArrays.js +181 -175
  95. package/dist/esm/Fields/Form/stories/JSONForms.js +59 -56
  96. package/dist/esm/Fields/Form/stories/MultiStep.js +457 -473
  97. package/dist/esm/Fields/Form/stories/ValidationStrategies.js +227 -238
  98. package/dist/esm/Fields/Form/useForm.d.ts +1 -1
  99. package/dist/esm/Fields/Form/useForm.js +3 -3
  100. package/dist/esm/Fields/RangeSlider/RangeSlider.js +8 -9
  101. package/dist/esm/Helpers/utilities/focusable.tailwind.js +1 -1
  102. package/dist/esm/Indicators/ScrollIndicator/ScrollIndicator.js +1 -2
  103. package/dist/esm/Indicators/Skeleton/Skeleton.d.ts +7 -0
  104. package/dist/esm/Indicators/Skeleton/Skeleton.js +12 -5
  105. package/dist/esm/Layout/Sidebar/SidebarButtonLink.js +1 -1
  106. package/dist/esm/Layout/Sidebar/SidebarLink.js +2 -2
  107. package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
  108. package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
  109. package/dist/esm/Layout/Tables/DataTable/DataTable.d.ts +3 -1
  110. package/dist/esm/Layout/Tables/DataTable/DataTable.js +3 -0
  111. package/dist/esm/Layout/Tables/DataTable/components/Body.d.ts +1 -1
  112. package/dist/esm/Layout/Tables/DataTable/components/Header.d.ts +1 -1
  113. package/dist/esm/Layout/Tables/DataTable/components/HeaderCell.d.ts +1 -1
  114. package/dist/esm/Layout/Tables/DataTable/utils.d.ts +1 -1
  115. package/dist/esm/Layout/Tables/Table/Table.d.ts +2 -0
  116. package/dist/esm/Layout/Tables/Table/Table.js +4 -2
  117. package/dist/esm/Layout/Tables/Table/Table.tailwind.js +6 -1
  118. package/dist/esm/Navigation/Stepper/Step.js +8 -7
  119. package/dist/esm/Navigation/Stepper/Stepper.d.ts +6 -0
  120. package/dist/esm/Navigation/Stepper/Stepper.js +9 -3
  121. package/dist/esm/Navigation/Stepper/StepperContext.d.ts +2 -1
  122. package/dist/esm/Overlay/Dropdown/DropdownContext.d.ts +1 -1
  123. package/dist/esm/Overlay/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.d.ts +1 -1
  124. package/dist/esm/Overlay/MenuButton/components/collapsible/CollapsibleItemsGroupContext.d.ts +1 -1
  125. package/dist/esm/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
  126. package/dist/esm/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
  127. package/dist/esm/styles/helpers/makePurgeCssExtractor.js +3 -3
  128. package/dist/esm/styles/tailwind.config.js +1 -1
  129. package/dist/esm/utils/isCssPropertySupported.d.ts +1 -1
  130. package/dist/esm/utils/useTriggerInputChange.js +4 -3
  131. package/dist/satellite.min.css +1 -1
  132. package/package.json +20 -19
@@ -21,7 +21,7 @@ var _Input = require("../../Input");
21
21
  var _Form = require("../Form");
22
22
  var _useFormikAutoFocusOnError = require("./utils/useFormikAutoFocusOnError");
23
23
  var _jsxRuntime = require("react/jsx-runtime");
24
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
24
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
25
25
  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); }
26
26
  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; }
27
27
  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; }
@@ -76,74 +76,77 @@ var RHFDependentFieldsValidationComponent = exports.RHFDependentFieldsValidation
76
76
  };
77
77
  }
78
78
  };
79
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
80
- className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
81
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
82
- onSubmit: handleSubmit(function (data) {
83
- return setFormData(data);
84
- }),
85
- onReset: function onReset() {
86
- return setFormData(initialFormData);
87
- },
88
- className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
89
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
90
- name: "password",
91
- control: control,
92
- render: function render(_ref) {
93
- var field = _ref.field;
94
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
95
- label: "Password",
96
- labelFor: "password",
97
- description: "Please enter your password",
98
- state: getFieldState("password"),
99
- className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
100
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
101
- id: "password",
102
- placeholder: "Password",
103
- type: "password",
104
- required: true
105
- }, field))
106
- });
107
- }
108
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
109
- name: "confirmPassword",
110
- control: control,
111
- render: function render(_ref2) {
112
- var field = _ref2.field;
113
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
114
- label: "Confirm Password",
115
- labelFor: "confirmPassword",
116
- description: "Please confirm your password",
117
- state: getFieldState("confirmPassword"),
118
- className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
119
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
120
- id: "confirmPassword",
121
- placeholder: "Confirm password",
122
- type: "password",
123
- required: true
124
- }, field))
125
- });
126
- }
127
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
128
- className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
129
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
130
- variant: "primary",
131
- "aria-label": "Save the form",
132
- children: "Save"
133
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
134
- "aria-label": "Reset the form",
135
- onClick: function onClick() {
136
- return reset();
137
- },
138
- children: "Reset"
79
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
80
+ className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
81
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
82
+ className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
83
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
84
+ onSubmit: handleSubmit(function (data) {
85
+ return setFormData(data);
86
+ }),
87
+ onReset: function onReset() {
88
+ return setFormData(initialFormData);
89
+ },
90
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
91
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
92
+ name: "password",
93
+ control: control,
94
+ render: function render(_ref) {
95
+ var field = _ref.field;
96
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
97
+ label: "Password",
98
+ labelFor: "password",
99
+ description: "Please enter your password",
100
+ state: getFieldState("password"),
101
+ className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
102
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
103
+ id: "password",
104
+ placeholder: "Password",
105
+ type: "password",
106
+ required: true
107
+ }, field))
108
+ });
109
+ }
110
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
111
+ name: "confirmPassword",
112
+ control: control,
113
+ render: function render(_ref2) {
114
+ var field = _ref2.field;
115
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
116
+ label: "Confirm Password",
117
+ labelFor: "confirmPassword",
118
+ description: "Please confirm your password",
119
+ state: getFieldState("confirmPassword"),
120
+ className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
121
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
122
+ id: "confirmPassword",
123
+ placeholder: "Confirm password",
124
+ type: "password",
125
+ required: true
126
+ }, field))
127
+ });
128
+ }
129
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
130
+ className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
131
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
132
+ variant: "primary",
133
+ "aria-label": "Save the form",
134
+ children: "Save"
135
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
136
+ "aria-label": "Reset the form",
137
+ onClick: function onClick() {
138
+ return reset();
139
+ },
140
+ children: "Reset"
141
+ })]
139
142
  })]
143
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
144
+ className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
145
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
146
+ className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
147
+ children: JSON.stringify(formData, null, 2)
140
148
  })]
141
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
142
- className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
143
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
144
- className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
145
- children: JSON.stringify(formData, null, 2)
146
- })]
149
+ })
147
150
  });
148
151
  };
149
152
  var yupSchema = yup.object({
@@ -189,61 +192,64 @@ var FormikDependentFieldsValidationComponent = exports.FormikDependentFieldsVali
189
192
  }
190
193
  };
191
194
  (0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
192
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
193
- className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
194
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
195
- onSubmit: function onSubmit(e) {
196
- setRevalidationEnabled(true);
197
- formik.handleSubmit(e);
198
- },
199
- onReset: function onReset(e) {
200
- setRevalidationEnabled(false);
201
- formik.handleReset(e);
202
- },
203
- className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
204
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
205
- label: "Password",
206
- labelFor: "password",
207
- description: "Please enter your password",
208
- state: getFieldState("password"),
209
- className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
210
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
211
- id: "password",
212
- placeholder: "Password",
213
- type: "password",
214
- required: true
215
- }, formik.getFieldProps("password")))
216
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
217
- label: "Confirm Password",
218
- labelFor: "confirmPassword",
219
- description: "Please confirm your password",
220
- state: getFieldState("confirmPassword"),
221
- className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
222
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
223
- id: "confirmPassword",
224
- placeholder: "Confirm password",
225
- type: "password",
226
- required: true
227
- }, formik.getFieldProps("confirmPassword")))
228
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
229
- className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
230
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
231
- variant: "primary",
232
- "aria-label": "Save the form",
233
- children: "Save"
234
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
235
- "aria-label": "Reset the form",
236
- onClick: function onClick() {
237
- return formik.resetForm();
238
- },
239
- children: "Reset"
195
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
196
+ className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
197
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
198
+ className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
199
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
200
+ onSubmit: function onSubmit(e) {
201
+ setRevalidationEnabled(true);
202
+ formik.handleSubmit(e);
203
+ },
204
+ onReset: function onReset(e) {
205
+ setRevalidationEnabled(false);
206
+ formik.handleReset(e);
207
+ },
208
+ className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
209
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
210
+ label: "Password",
211
+ labelFor: "password",
212
+ description: "Please enter your password",
213
+ state: getFieldState("password"),
214
+ className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
215
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
216
+ id: "password",
217
+ placeholder: "Password",
218
+ type: "password",
219
+ required: true
220
+ }, formik.getFieldProps("password")))
221
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
222
+ label: "Confirm Password",
223
+ labelFor: "confirmPassword",
224
+ description: "Please confirm your password",
225
+ state: getFieldState("confirmPassword"),
226
+ className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
227
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
228
+ id: "confirmPassword",
229
+ placeholder: "Confirm password",
230
+ type: "password",
231
+ required: true
232
+ }, formik.getFieldProps("confirmPassword")))
233
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
234
+ className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
235
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
236
+ variant: "primary",
237
+ "aria-label": "Save the form",
238
+ children: "Save"
239
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
240
+ "aria-label": "Reset the form",
241
+ onClick: function onClick() {
242
+ return formik.resetForm();
243
+ },
244
+ children: "Reset"
245
+ })]
240
246
  })]
247
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
248
+ className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
249
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
250
+ className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
251
+ children: JSON.stringify(formData, null, 2)
241
252
  })]
242
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
243
- className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
244
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
245
- className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
246
- children: JSON.stringify(formData, null, 2)
247
- })]
253
+ })
248
254
  });
249
255
  };