@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
@@ -24,7 +24,7 @@ var _Input = require("../../Input");
24
24
  var _Form = require("../Form");
25
25
  var _useFormikAutoFocusOnError = require("./utils/useFormikAutoFocusOnError");
26
26
  var _jsxRuntime = require("react/jsx-runtime");
27
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
27
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
28
28
  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); }
29
29
  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; }
30
30
  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; }
@@ -136,141 +136,144 @@ var RHFValidationStrategiesComponent = exports.RHFValidationStrategiesComponent
136
136
  };
137
137
  }
138
138
  };
139
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
140
- className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-4/6"]))),
141
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
142
- onSubmit: handleSubmit(function (data) {
143
- return setFormData(data);
144
- }),
145
- onReset: function onReset() {
146
- return setFormData(initialFormData);
147
- },
148
- className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
149
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
150
- name: "cardOwner",
151
- control: control,
152
- render: function render(_ref) {
153
- var field = _ref.field;
154
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
155
- label: "Card Owner",
156
- labelFor: "cardOwner",
157
- description: "Please enter the card owner",
158
- state: getFieldState("cardOwner"),
159
- className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
160
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
161
- id: "cardOwner",
162
- placeholder: "John Doe",
163
- required: true
164
- }, field))
165
- });
166
- }
167
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
168
- name: "cardNumber",
169
- control: control,
170
- render: function render(_ref2) {
171
- var field = _ref2.field;
172
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
173
- label: "Card Number",
174
- labelFor: "cardNumber",
175
- description: "Please enter the card number",
176
- state: getFieldState("cardNumber"),
177
- className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
178
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
179
- id: "cardNumber",
180
- placeholder: "Card number",
181
- maxLength: 16 + 3 // 3 spaces
182
- ,
183
- startIcon: _Icons.CreditCardIcon,
184
- required: true
185
- }, field), {}, {
186
- onChange: function onChange(e) {
187
- e.target.value = formatInputValue(e, 4, " ");
188
- field.onChange(e);
189
- if (e.target.value.length === 19) {
190
- trigger("cardNumber");
191
- }
192
- }
193
- }))
194
- });
195
- }
196
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
197
- className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4"]))),
198
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
199
- name: "cardExpirationDate",
139
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
140
+ className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
141
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
142
+ className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
143
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
144
+ onSubmit: handleSubmit(function (data) {
145
+ return setFormData(data);
146
+ }),
147
+ onReset: function onReset() {
148
+ return setFormData(initialFormData);
149
+ },
150
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
151
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
152
+ name: "cardOwner",
200
153
  control: control,
201
- render: function render(_ref3) {
202
- var field = _ref3.field;
154
+ render: function render(_ref) {
155
+ var field = _ref.field;
203
156
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
204
- label: "Card Expiration Date",
205
- labelFor: "cardExpirationDate",
206
- description: "Please enter the card expiration date",
207
- state: getFieldState("cardExpirationDate"),
208
- className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
209
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
210
- id: "cardExpirationDate",
211
- placeholder: "MM/YY",
212
- maxLength: 4 + 1 // 1 slash
213
- ,
214
- startIcon: _Icons.CalendarIcon,
157
+ label: "Card Owner",
158
+ labelFor: "cardOwner",
159
+ description: "Please enter the card owner",
160
+ state: getFieldState("cardOwner"),
161
+ className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
162
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
163
+ id: "cardOwner",
164
+ placeholder: "John Doe",
215
165
  required: true
216
- }, field), {}, {
217
- onChange: function onChange(e) {
218
- e.target.value = formatInputValue(e, 2, "/");
219
- field.onChange(e);
220
- },
221
- onBlur: function onBlur() {
222
- trigger("cardExpirationDate");
223
- field.onBlur();
224
- }
225
- }))
166
+ }, field))
226
167
  });
227
168
  }
228
169
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
229
- name: "cardCVC",
170
+ name: "cardNumber",
230
171
  control: control,
231
- render: function render(_ref4) {
232
- var field = _ref4.field;
172
+ render: function render(_ref2) {
173
+ var field = _ref2.field;
233
174
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
234
- label: "Card CVC",
235
- labelFor: "cardCVC",
236
- description: "Please enter the card security code",
237
- state: getFieldState("cardCVC"),
238
- className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
175
+ label: "Card Number",
176
+ labelFor: "cardNumber",
177
+ description: "Please enter the card number",
178
+ state: getFieldState("cardNumber"),
179
+ className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
239
180
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
240
- id: "cardCVC",
241
- placeholder: "CVC",
242
- maxLength: 4,
243
- startIcon: _Icons.LockIcon,
181
+ id: "cardNumber",
182
+ placeholder: "Card number",
183
+ maxLength: 16 + 3 // 3 spaces
184
+ ,
185
+ startIcon: _Icons.CreditCardIcon,
244
186
  required: true
245
187
  }, field), {}, {
246
- onBlur: function onBlur() {
247
- trigger("cardCVC");
248
- field.onBlur();
188
+ onChange: function onChange(e) {
189
+ e.target.value = formatInputValue(e, 4, " ");
190
+ field.onChange(e);
191
+ if (e.target.value.length === 19) {
192
+ trigger("cardNumber");
193
+ }
249
194
  }
250
195
  }))
251
196
  });
252
197
  }
198
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
199
+ className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4 flex-col @xl:flex-row"]))),
200
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
201
+ name: "cardExpirationDate",
202
+ control: control,
203
+ render: function render(_ref3) {
204
+ var field = _ref3.field;
205
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
206
+ label: "Card Expiration Date",
207
+ labelFor: "cardExpirationDate",
208
+ description: "Please enter the card expiration date",
209
+ state: getFieldState("cardExpirationDate"),
210
+ className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
211
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
212
+ id: "cardExpirationDate",
213
+ placeholder: "MM/YY",
214
+ maxLength: 4 + 1 // 1 slash
215
+ ,
216
+ startIcon: _Icons.CalendarIcon,
217
+ required: true
218
+ }, field), {}, {
219
+ onChange: function onChange(e) {
220
+ e.target.value = formatInputValue(e, 2, "/");
221
+ field.onChange(e);
222
+ },
223
+ onBlur: function onBlur() {
224
+ trigger("cardExpirationDate");
225
+ field.onBlur();
226
+ }
227
+ }))
228
+ });
229
+ }
230
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
231
+ name: "cardCVC",
232
+ control: control,
233
+ render: function render(_ref4) {
234
+ var field = _ref4.field;
235
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
236
+ label: "Card CVC",
237
+ labelFor: "cardCVC",
238
+ description: "Please enter the card security code",
239
+ state: getFieldState("cardCVC"),
240
+ className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
241
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
242
+ id: "cardCVC",
243
+ placeholder: "CVC",
244
+ maxLength: 4,
245
+ startIcon: _Icons.LockIcon,
246
+ required: true
247
+ }, field), {}, {
248
+ onBlur: function onBlur() {
249
+ trigger("cardCVC");
250
+ field.onBlur();
251
+ }
252
+ }))
253
+ });
254
+ }
255
+ })]
256
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
257
+ className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
258
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
259
+ variant: "primary",
260
+ "aria-label": "Save the form",
261
+ children: "Save"
262
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
263
+ "aria-label": "Reset the form",
264
+ onClick: function onClick() {
265
+ return reset();
266
+ },
267
+ children: "Reset"
268
+ })]
253
269
  })]
254
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
255
- className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
256
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
257
- variant: "primary",
258
- "aria-label": "Save the form",
259
- children: "Save"
260
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
261
- "aria-label": "Reset the form",
262
- onClick: function onClick() {
263
- return reset();
264
- },
265
- children: "Reset"
266
- })]
270
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
271
+ className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
272
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
273
+ className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
274
+ children: JSON.stringify(formData, null, 2)
267
275
  })]
268
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
269
- className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
270
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
271
- className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
272
- children: JSON.stringify(formData, null, 2)
273
- })]
276
+ })
274
277
  });
275
278
  };
276
279
  var yupSchema = yup.object({
@@ -326,130 +329,133 @@ var FormikValidationStrategiesComponent = exports.FormikValidationStrategiesComp
326
329
  }
327
330
  };
328
331
  (0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
329
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
330
- className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-4/6"]))),
331
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
332
- onSubmit: function onSubmit(e) {
333
- setRevalidationEnabled(true);
334
- formik.handleSubmit(e);
335
- },
336
- onReset: function onReset(e) {
337
- setRevalidationEnabled(false);
338
- formik.handleReset(e);
339
- },
340
- className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
341
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
342
- label: "Card Owner",
343
- labelFor: "cardOwner",
344
- description: "Please enter the card owner",
345
- state: getFieldState("cardOwner"),
346
- className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
347
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
348
- id: "cardOwner",
349
- placeholder: "John Doe",
350
- required: true
351
- }, formik.getFieldProps("cardOwner")))
352
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
353
- label: "Card Number",
354
- labelFor: "cardNumber",
355
- description: "Please enter the card number",
356
- state: getFieldState("cardNumber"),
357
- className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
358
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
359
- id: "cardNumber",
360
- placeholder: "Card number",
361
- maxLength: 16 + 3 // 3 spaces
362
- ,
363
- startIcon: _Icons.CreditCardIcon,
364
- required: true
365
- }, formik.getFieldProps("cardNumber")), {}, {
366
- onChange: ( /*#__PURE__*/function () {
367
- var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
368
- var value;
369
- return _regenerator["default"].wrap(function _callee$(_context) {
370
- while (1) switch (_context.prev = _context.next) {
371
- case 0:
372
- value = formatInputValue(e, 4, " ");
373
- _context.next = 3;
374
- return formik.setFieldValue("cardNumber", value);
375
- case 3:
376
- if (value.length === 19) {
377
- formik.validateField("cardNumber");
378
- }
379
- case 4:
380
- case "end":
381
- return _context.stop();
382
- }
383
- }, _callee);
384
- }));
385
- return function (_x) {
386
- return _ref5.apply(this, arguments);
387
- };
388
- }())
389
- }))
390
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
391
- className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4"]))),
392
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
393
- label: "Card Expiration Date",
394
- labelFor: "cardExpirationDate",
395
- description: "Please enter the card expiration date",
396
- state: getFieldState("cardExpirationDate"),
397
- className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
398
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
399
- id: "cardExpirationDate",
400
- placeholder: "MM/YY",
401
- maxLength: 4 + 1 // 1 slash
402
- ,
403
- startIcon: _Icons.CalendarIcon,
332
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
333
+ className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
334
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
335
+ className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
336
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
337
+ onSubmit: function onSubmit(e) {
338
+ setRevalidationEnabled(true);
339
+ formik.handleSubmit(e);
340
+ },
341
+ onReset: function onReset(e) {
342
+ setRevalidationEnabled(false);
343
+ formik.handleReset(e);
344
+ },
345
+ className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
346
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
347
+ label: "Card Owner",
348
+ labelFor: "cardOwner",
349
+ description: "Please enter the card owner",
350
+ state: getFieldState("cardOwner"),
351
+ className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
352
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
353
+ id: "cardOwner",
354
+ placeholder: "John Doe",
404
355
  required: true
405
- }, formik.getFieldProps("cardExpirationDate")), {}, {
406
- onChange: function onChange(e) {
407
- e.target.value = formatInputValue(e, 2, "/");
408
- formik.getFieldProps("cardExpirationDate").onChange(e);
409
- },
410
- onBlur: function onBlur(e) {
411
- formik.validateField("cardExpirationDate");
412
- formik.getFieldProps("cardExpirationDate").onBlur(e);
413
- }
414
- }))
356
+ }, formik.getFieldProps("cardOwner")))
415
357
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
416
- label: "Card CVC",
417
- labelFor: "cardCVC",
418
- description: "Please enter the card security code",
419
- state: getFieldState("cardCVC"),
420
- className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
358
+ label: "Card Number",
359
+ labelFor: "cardNumber",
360
+ description: "Please enter the card number",
361
+ state: getFieldState("cardNumber"),
362
+ className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
421
363
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
422
- id: "cardCVC",
423
- placeholder: "CVC",
424
- maxLength: 4,
425
- startIcon: _Icons.LockIcon,
364
+ id: "cardNumber",
365
+ placeholder: "Card number",
366
+ maxLength: 16 + 3 // 3 spaces
367
+ ,
368
+ startIcon: _Icons.CreditCardIcon,
426
369
  required: true
427
- }, formik.getFieldProps("cardCVC")), {}, {
428
- onBlur: function onBlur(e) {
429
- formik.validateField("cardCVC");
430
- formik.getFieldProps("cardCVC").onBlur(e);
431
- }
370
+ }, formik.getFieldProps("cardNumber")), {}, {
371
+ onChange: ( /*#__PURE__*/function () {
372
+ var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
373
+ var value;
374
+ return _regenerator["default"].wrap(function _callee$(_context) {
375
+ while (1) switch (_context.prev = _context.next) {
376
+ case 0:
377
+ value = formatInputValue(e, 4, " ");
378
+ _context.next = 3;
379
+ return formik.setFieldValue("cardNumber", value);
380
+ case 3:
381
+ if (value.length === 19) {
382
+ formik.validateField("cardNumber");
383
+ }
384
+ case 4:
385
+ case "end":
386
+ return _context.stop();
387
+ }
388
+ }, _callee);
389
+ }));
390
+ return function (_x) {
391
+ return _ref5.apply(this, arguments);
392
+ };
393
+ }())
432
394
  }))
395
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
396
+ className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4 flex-col @xl:flex-row"]))),
397
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
398
+ label: "Card Expiration Date",
399
+ labelFor: "cardExpirationDate",
400
+ description: "Please enter the card expiration date",
401
+ state: getFieldState("cardExpirationDate"),
402
+ className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
403
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
404
+ id: "cardExpirationDate",
405
+ placeholder: "MM/YY",
406
+ maxLength: 4 + 1 // 1 slash
407
+ ,
408
+ startIcon: _Icons.CalendarIcon,
409
+ required: true
410
+ }, formik.getFieldProps("cardExpirationDate")), {}, {
411
+ onChange: function onChange(e) {
412
+ e.target.value = formatInputValue(e, 2, "/");
413
+ formik.getFieldProps("cardExpirationDate").onChange(e);
414
+ },
415
+ onBlur: function onBlur(e) {
416
+ formik.validateField("cardExpirationDate");
417
+ formik.getFieldProps("cardExpirationDate").onBlur(e);
418
+ }
419
+ }))
420
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
421
+ label: "Card CVC",
422
+ labelFor: "cardCVC",
423
+ description: "Please enter the card security code",
424
+ state: getFieldState("cardCVC"),
425
+ className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
426
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
427
+ id: "cardCVC",
428
+ placeholder: "CVC",
429
+ maxLength: 4,
430
+ startIcon: _Icons.LockIcon,
431
+ required: true
432
+ }, formik.getFieldProps("cardCVC")), {}, {
433
+ onBlur: function onBlur(e) {
434
+ formik.validateField("cardCVC");
435
+ formik.getFieldProps("cardCVC").onBlur(e);
436
+ }
437
+ }))
438
+ })]
439
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
440
+ className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
441
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
442
+ variant: "primary",
443
+ "aria-label": "Save the form",
444
+ children: "Save"
445
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
446
+ "aria-label": "Reset the form",
447
+ onClick: function onClick() {
448
+ return formik.resetForm();
449
+ },
450
+ children: "Reset"
451
+ })]
433
452
  })]
434
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
435
- className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
436
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
437
- variant: "primary",
438
- "aria-label": "Save the form",
439
- children: "Save"
440
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
441
- "aria-label": "Reset the form",
442
- onClick: function onClick() {
443
- return formik.resetForm();
444
- },
445
- children: "Reset"
446
- })]
453
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
454
+ className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
455
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
456
+ className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
457
+ children: JSON.stringify(formData, null, 2)
447
458
  })]
448
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
449
- className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
450
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
451
- className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
452
- children: JSON.stringify(formData, null, 2)
453
- })]
459
+ })
454
460
  });
455
461
  };
@@ -1 +1 @@
1
- export declare const useExperimentalForm: () => import("./FormContext").ExperimentalFormContextValue | null;
1
+ export declare const useForm: () => import("./FormContext").FormContextValue | null;
@@ -3,9 +3,9 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useExperimentalForm = void 0;
6
+ exports.useForm = void 0;
7
7
  var _react = require("react");
8
8
  var _FormContext = require("./FormContext");
9
- var useExperimentalForm = exports.useExperimentalForm = function useExperimentalForm() {
10
- return (0, _react.useContext)(_FormContext.ExperimentalFormContext);
9
+ var useForm = exports.useForm = function useForm() {
10
+ return (0, _react.useContext)(_FormContext.FormContext);
11
11
  };
@@ -7,7 +7,7 @@ var plugin = require("tailwindcss/plugin");
7
7
  module.exports = plugin(function (_ref) {
8
8
  var addComponents = _ref.addComponents,
9
9
  theme = _ref.theme;
10
- addComponents((0, _defineProperty2["default"])({}, ".focusable:focus,\n .focusable-within:focus-within,\n .focusable-visible:focus-visible,\n .focusable-visible-within:has(:focus-visible),\n input:focus ~ .focusable-sibling,\n .focusable-show", {
10
+ addComponents((0, _defineProperty2["default"])({}, ".focusable:focus,\n .focusable-within:focus-within,\n .focusable-visible:focus-visible,\n .focusable-visible-within:has(:focus-visible),\n input:focus ~ .focusable-sibling,\n .focusable-visible-group:focus-visible .focusable-visible-group-item,\n .focusable-show", {
11
11
  outline: "2px solid ".concat(theme("colors.accent.600")),
12
12
  outlineOffset: "1px"
13
13
  }));
@@ -17,4 +17,4 @@ export { QueryBreakdownIcon } from "./QueryBreakdownIcon";
17
17
  export { BulbIcon } from "./BulbIcon";
18
18
  export { TestingIcon } from "./TestingIcon";
19
19
  export { RocketIcon } from "./RocketIcon";
20
- export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BanIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BookOpenIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChevronUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileSearchIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FlaskConicalIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GithubIcon, GitlabIcon, GitMergeIcon, GitPullRequestIcon, GlobeIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, ImageOffIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutGridIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkedinIcon, LinkIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchXIcon, SendIcon, ServerCogIcon, ServerCrashIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UsersIcon, UserXIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, WrenchIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon, } from "lucide-react";
20
+ export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BanIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BookOpenIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChevronUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileSearchIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FlaskConicalIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GithubIcon, GitlabIcon, GitMergeIcon, GitPullRequestIcon, GlobeIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, ImageOffIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, Landmark, LayersIcon, LayoutGridIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkedinIcon, LinkIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchXIcon, SendIcon, ServerCogIcon, ServerCrashIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UsersIcon, UserXIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, WrenchIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon, } from "lucide-react";
@@ -891,6 +891,12 @@ Object.defineProperty(exports, "KeyIcon", {
891
891
  return _lucideReact.KeyIcon;
892
892
  }
893
893
  });
894
+ Object.defineProperty(exports, "Landmark", {
895
+ enumerable: true,
896
+ get: function get() {
897
+ return _lucideReact.Landmark;
898
+ }
899
+ });
894
900
  Object.defineProperty(exports, "LayersIcon", {
895
901
  enumerable: true,
896
902
  get: function get() {
@@ -1,12 +1,19 @@
1
1
  import type { FC } from "react";
2
2
  export interface SkeletonProps {
3
3
  className?: string;
4
+ size?: keyof typeof DEFAULT_SKELETON_SIZES;
4
5
  circle?: boolean;
5
6
  image?: boolean;
6
7
  }
8
+ declare const DEFAULT_SKELETON_SIZES: {
9
+ sm: string;
10
+ md: string;
11
+ lg: string;
12
+ };
7
13
  /**
8
14
  * The `Skeleton` component is used to display a placeholder during loading.
9
15
  *
10
16
  * See the [Skeleton documentation page](https://satellite.algolia.com/layouts/skeleton) for more information.
11
17
  */
12
18
  export declare const Skeleton: FC<SkeletonProps>;
19
+ export {};