@algolia/satellite 2.3.0-rc.5 → 2.3.0-rc.6

package/dist/cjs/Fields/Checkbox/Checkbox.d.ts

@@ -15,12 +15,12 @@ declare type CheckboxCustomProps = {
      */
     checkedColor?: string;
 };
-declare type CheckboxInputProps = Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "onChange" | "required" | "autoFocus" | "disabled" | "checked" | "defaultChecked">;
+declare type CheckboxInputProps = Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "onChange" | "required" | "autoFocus" | "disabled" | "checked" | "defaultChecked" | "name">;
 export declare type CheckboxProps = CheckboxInputProps & CheckboxCustomProps;
 /**
  * The `Checkbox` component is a control that allows single or multiple selections from a set of options.
  *
  * See the [Checkbox documentation page](https://satellite.algolia.com/8261d6576/p/023233-checkbox) for more information.
  */
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "onChange" | "defaultChecked" | "autoFocus" | "disabled" | "checked" | "required"> & CheckboxCustomProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "name" | "onChange" | "defaultChecked" | "autoFocus" | "disabled" | "checked" | "required"> & CheckboxCustomProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/cjs/Fields/Checkbox/Checkbox.js

@@ -73,7 +73,7 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["group/checkbox inline-flex items-center ", ""])), textPosition === "left" && "flex-row-reverse"), className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            checkbox focusable-within\n            ", "\n            ", "\n            ", "\n          "])), indeterminate && "checkbox-indeterminate", isChecked && "checkbox-checked", disabled && "checkbox-disabled"), STATUS_CLASSNAMES[status]),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            checkbox focusable-visible-within\n            ", "\n            ", "\n            ", "\n          "])), indeterminate && "checkbox-indeterminate", isChecked && "checkbox-checked", disabled && "checkbox-disabled"), STATUS_CLASSNAMES[status]),
       style: {
         color: checkedColor
       },
@@ -83,7 +83,7 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (
         "aria-labelledby": labelId,
         "aria-describedby": descriptionId
       }, checkboxProps), {}, {
-        id: id !== null && id !== void 0 ? id : inputId,
+        id: id,
         required: required,
         "aria-invalid": status === "invalid",
         "aria-checked": indeterminate ? "mixed" : isChecked,

package/dist/cjs/Fields/Dropzone/Dropzone.js

@@ -142,7 +142,7 @@ var Dropzone = exports.Dropzone = /*#__PURE__*/(0, _react.forwardRef)(function (
     "aria-labelledby": labelId,
     "aria-describedby": descriptionId,
     "aria-invalid": isInvalid,
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n            relative flex items-center group/dropzone bg-white\n            border border-dashed rounded\n            overflow-hidden transition-colors\n            focusable focus-visible:border-transparent\n            min-h-16 p-4\n            ", "\n            ", "\n            ", ""])), disabled ? "cursor-not-allowed border-grey-200" : "cursor-pointer border-grey-500", isDragReject && !disabled ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500 cursor-pointer" : null, !disabled && (isInvalid ? "bg-red-100 border-red-700 hover:bg-red-50" : "bg-white hover:bg-grey-100")), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n            relative flex items-center group/dropzone bg-white\n            border border-dashed rounded\n            overflow-hidden transition-colors\n            focusable-visible focus-visible:border-transparent\n            min-h-16 p-4\n            ", "\n            ", "\n            ", ""])), disabled ? "cursor-not-allowed border-grey-200" : "cursor-pointer border-grey-500", isDragReject && !disabled ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500 cursor-pointer" : null, !disabled && (isInvalid ? "bg-red-100 border-red-700 hover:bg-red-50" : "bg-white hover:bg-grey-100")), className),
     onClick: function onClick(evt) {
       // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
       if (evt.target.closest("label")) {

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

@@ -24,11 +24,13 @@ var _Input = require("./../../Input");
 var _RadioGroup = require("./../../RadioGroup");
 var _RangeSlider = require("./../../RangeSlider");
 var _Select = require("./../../Select");
+var _SelectableCard = require("./../../SelectableCard/SelectableCard");
+var _SelectableCardGroup = require("./../../SelectableCard/SelectableCardGroup");
 var _Switch = require("./../../Switch");
 var _TextArea = require("./../../TextArea");
 var _satellitePrefixer = _interopRequireDefault(require("./../../../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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; }
@@ -43,6 +45,7 @@ var initialFormData = {
   employmentStatus: "",
   birthday: null,
   age: "",
+  hobbies: [],
   interest: 0,
   idealLocation: [0, 50],
   profilePicture: null,
@@ -60,6 +63,7 @@ var jobPositions = ["Frontend Developer", "Backend Developer", "Fullstack Develo
 var now = new Date();
 var genders = ["please select", "woman", "man", "transgender man", "transgender woman", "non-binary", "agender", "prefer not to state"];
 var employmentStatuses = ["employed", "unemployed", "student"];
+var hobbies = ["reading", "writing", "coding"];
 var zodSchema = _zod2.z.object({
   firstName: _zod2.z.string().min(1, {
     message: "You must specify a first name"
@@ -120,6 +124,15 @@ var zodSchema = _zod2.z.object({
   }).lte(100, {
     message: "You must be at most 100 years old"
   }),
+  hobbies: _zod2.z.array(_zod2.z["enum"](hobbies, {
+    errorMap: function errorMap() {
+      return {
+        message: "You must specify at least one hobby"
+      };
+    }
+  })).min(1, {
+    message: "You must specify at least one hobby"
+  }),
   interest: _zod2.z.number().min(5, {
     message: "Your level of interest must be at least 5"
   }),
@@ -415,18 +428,50 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
             });
           }
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-          name: "interest",
+          name: "hobbies",
           control: control,
           render: function render(_ref10) {
             var field = _ref10.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Hobbies",
+              labelFor: hobbies[0],
+              description: "Please specify your hobbies",
+              state: getFieldState("hobbies"),
+              className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectableCardGroup.SelectableCardGroup, {
+                type: "multiple",
+                className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+                value: field.value,
+                onValueChange: field.onChange,
+                required: true,
+                children: hobbies.map(function (hobby) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+                    htmlFor: hobby,
+                    className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex-1 cursor-pointer"]))),
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectableCard.SelectableCard, {
+                      id: hobby,
+                      value: hobby,
+                      className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["p-4"]))),
+                      children: (0, _capitalize["default"])(hobby)
+                    })
+                  }, hobby);
+                })
+              })
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "interest",
+          control: control,
+          render: function render(_ref11) {
+            var field = _ref11.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
               label: "Interest",
               labelFor: "interest",
               description: "Please specify your interest",
               state: getFieldState("interest"),
-              className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-                className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
+                className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   children: "0"
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -445,16 +490,16 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
           name: "idealLocation",
           control: control,
-          render: function render(_ref11) {
-            var field = _ref11.field;
+          render: function render(_ref12) {
+            var field = _ref12.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
               label: "Ideal Location",
               labelFor: "idealLocation",
               description: "Please specify your ideal location",
               state: getFieldState("idealLocation"),
-              className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-                className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
+                className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   children: "0 km"
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -480,14 +525,14 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
           name: "profilePicture",
           control: control,
-          render: function render(_ref12) {
-            var field = _ref12.field;
+          render: function render(_ref13) {
+            var field = _ref13.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
               label: "Profile Picture",
               labelFor: "profilePicture",
               description: "Please upload your profile picture, 1 MB minimum",
               state: getFieldState("profilePicture"),
-              className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Dropzone, _objectSpread(_objectSpread({
                 id: "profilePicture",
                 minSize: 1024 * 1024 * 1,
@@ -503,14 +548,14 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
           name: "bio",
           control: control,
-          render: function render(_ref13) {
-            var field = _ref13.field;
+          render: function render(_ref14) {
+            var field = _ref14.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
               label: "Bio",
               labelFor: "bio",
               description: "Please write a short bio",
               state: getFieldState("bio"),
-              className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, _objectSpread({
                 id: "bio",
                 required: true
@@ -520,14 +565,14 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
           name: "acceptTerms",
           control: control,
-          render: function render(_ref14) {
-            var field = _ref14.field;
+          render: function render(_ref15) {
+            var field = _ref15.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
               label: "Accept Terms",
               labelFor: "acceptTerms",
               description: "Please accept the terms",
               state: getFieldState("acceptTerms"),
-              className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               inline: true,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, _objectSpread({
                 id: "acceptTerms",
@@ -539,14 +584,14 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
           name: "newsletter",
           control: control,
-          render: function render(_ref15) {
-            var field = _ref15.field;
+          render: function render(_ref16) {
+            var field = _ref16.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
               label: "Receive Newsletter",
               labelFor: "newsletter",
               description: "Do you want to receive our newsletter?",
               state: getFieldState("newsletter"),
-              className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               inline: true,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.Switch, _objectSpread({
                 id: "newsletter",
@@ -556,7 +601,7 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
             });
           }
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
             variant: "primary",
             "aria-label": "Save the form",
@@ -570,9 +615,9 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-        className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+        className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-        className: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
         children: JSON.stringify(formData, null, 2)
       })]
     })
@@ -593,10 +638,11 @@ var yupSchema = yup.object({
     return value < now;
   }),
   age: yup.number().min(18, "You must be at least 18 years old").max(100, "You must be at most 100 years old").required("You must specify an age"),
+  hobbies: yup.array(yup.string().oneOf(hobbies)).min(1, "You must specify at least one hobby"),
   interest: yup.number().min(5, "Your level of interest must be at least 5").required(),
   idealLocation: yup.array(yup.number().min(10, "Your minimum ideal location must be 10 km").max(40, "Your maximum ideal location must be 40 km").required()).required(),
-  profilePicture: yup.mixed().nullable().test("profilePicture", function (_ref16) {
-    var value = _ref16.value;
+  profilePicture: yup.mixed().nullable().test("profilePicture", function (_ref17) {
+    var value = _ref17.value;
     return value.errors.map(function (error) {
       return error.message;
     }).join(", ");
@@ -648,9 +694,9 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
   };
   (0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
         onSubmit: function onSubmit(e) {
           setRevalidationEnabled(true);
@@ -660,13 +706,13 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           setRevalidationEnabled(false);
           formik.handleReset(e);
         },
-        className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
           label: "First Name",
           labelFor: "firstName",
           description: "Please enter your first name",
           state: getFieldState("firstName"),
-          className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
             id: "firstName",
             placeholder: "John",
@@ -677,7 +723,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "lastName",
           description: "Please enter your last name",
           state: getFieldState("lastName"),
-          className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
             id: "lastName",
             placeholder: "Doe",
@@ -688,7 +734,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "password",
           description: "Please enter your password",
           state: getFieldState("password"),
-          className: (0, _satellitePrefixer["default"])(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
             id: "password",
             placeholder: "Password",
@@ -700,14 +746,14 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: civilities[0],
           description: "Please enter your civility",
           state: getFieldState("civility"),
-          className: (0, _satellitePrefixer["default"])(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2["default"])(["flex gap-4 display-body"]))),
+            className: (0, _satellitePrefixer["default"])(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteral2["default"])(["flex gap-4 display-body"]))),
             children: civilities.map(function (civility, index) {
               return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
                 id: index === 0 ? "civility" : undefined,
                 htmlFor: civility,
-                className: (0, _satellitePrefixer["default"])(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-1"]))),
+                className: (0, _satellitePrefixer["default"])(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-1"]))),
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread({
                   id: civility,
                   "aria-labelledby": civility,
@@ -725,7 +771,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "gender",
           description: "Please specify your gender",
           state: getFieldState("gender"),
-          className: (0, _satellitePrefixer["default"])(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
             id: "gender",
             required: true
@@ -742,7 +788,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "jobPositions",
           description: "Please specify the job positions you are interested in",
           state: getFieldState("jobPositions"),
-          className: (0, _satellitePrefixer["default"])(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject40 || (_templateObject40 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.AutoComplete, {
             id: "jobPositions",
             options: jobPositions,
@@ -761,7 +807,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "employmentStatus",
           description: "Please specify your employment status",
           state: getFieldState("employmentStatus"),
-          className: (0, _satellitePrefixer["default"])(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup, {
             id: "employmentStatus",
             required: true,
@@ -781,7 +827,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "birthday",
           description: "Please specify your birthday",
           state: getFieldState("birthday"),
-          className: (0, _satellitePrefixer["default"])(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject42 || (_templateObject42 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.DateInput, {
             id: "birthday",
             required: true,
@@ -802,7 +848,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "age",
           description: "Please specify your age",
           state: getFieldState("age"),
-          className: (0, _satellitePrefixer["default"])(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject43 || (_templateObject43 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
             id: "age",
             type: "number",
@@ -810,14 +856,41 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
             step: 1,
             required: true
           }, formik.getFieldProps("age")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Hobbies",
+          labelFor: hobbies[0],
+          description: "Please specify your hobbies",
+          state: getFieldState("hobbies"),
+          className: (0, _satellitePrefixer["default"])(_templateObject44 || (_templateObject44 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectableCardGroup.SelectableCardGroup, {
+            type: "multiple",
+            className: (0, _satellitePrefixer["default"])(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+            value: formik.values.hobbies,
+            onValueChange: function onValueChange(value) {
+              return formik.setFieldValue("hobbies", value);
+            },
+            required: true,
+            children: hobbies.map(function (hobby) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+                htmlFor: hobby,
+                className: (0, _satellitePrefixer["default"])(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteral2["default"])(["flex-1 cursor-pointer"]))),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectableCard.SelectableCard, {
+                  id: hobby,
+                  value: hobby,
+                  className: (0, _satellitePrefixer["default"])(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteral2["default"])(["p-4"]))),
+                  children: (0, _capitalize["default"])(hobby)
+                })
+              }, hobby);
+            })
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
           label: "Interest",
           labelFor: "interest",
           description: "Please specify your interest",
           state: getFieldState("interest"),
-          className: (0, _satellitePrefixer["default"])(_templateObject40 || (_templateObject40 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-            className: (0, _satellitePrefixer["default"])(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
+            className: (0, _satellitePrefixer["default"])(_templateObject49 || (_templateObject49 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               children: "0"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -840,9 +913,9 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "idealLocation",
           description: "Please specify your ideal location",
           state: getFieldState("idealLocation"),
-          className: (0, _satellitePrefixer["default"])(_templateObject42 || (_templateObject42 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject50 || (_templateObject50 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-            className: (0, _satellitePrefixer["default"])(_templateObject43 || (_templateObject43 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
+            className: (0, _satellitePrefixer["default"])(_templateObject51 || (_templateObject51 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               children: "0 km"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -872,7 +945,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "profilePicture",
           description: "Please upload your profile picture, 1 MB minimum",
           state: getFieldState("profilePicture"),
-          className: (0, _satellitePrefixer["default"])(_templateObject44 || (_templateObject44 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject52 || (_templateObject52 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Dropzone, {
             id: "profilePicture",
             minSize: 1024 * 1024 * 1,
@@ -887,7 +960,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "bio",
           description: "Please write a short bio",
           state: getFieldState("bio"),
-          className: (0, _satellitePrefixer["default"])(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject53 || (_templateObject53 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, _objectSpread({
             id: "bio",
             required: true
@@ -897,7 +970,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "acceptTerms",
           description: "Please accept the terms",
           state: getFieldState("acceptTerms"),
-          className: (0, _satellitePrefixer["default"])(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject54 || (_templateObject54 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           inline: true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, _objectSpread({
             id: "acceptTerms",
@@ -909,7 +982,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           labelFor: "newsletter",
           description: "Do you want to receive our newsletter?",
           state: getFieldState("newsletter"),
-          className: (0, _satellitePrefixer["default"])(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject55 || (_templateObject55 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           inline: true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.Switch, _objectSpread({
             id: "newsletter",
@@ -917,7 +990,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
             checked: formik.values.newsletter
           }, formik.getFieldProps("newsletter")))
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject56 || (_templateObject56 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
             variant: "primary",
             "aria-label": "Save the form",
@@ -931,9 +1004,9 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-        className: (0, _satellitePrefixer["default"])(_templateObject49 || (_templateObject49 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+        className: (0, _satellitePrefixer["default"])(_templateObject57 || (_templateObject57 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-        className: (0, _satellitePrefixer["default"])(_templateObject50 || (_templateObject50 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject58 || (_templateObject58 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
         children: JSON.stringify(formData, null, 2)
       })]
     })

package/dist/cjs/Fields/RadioGroup/RadioButton.js

@@ -12,6 +12,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
 var _Field = require("./../Field");
 var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
+var _utils = require("./../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 var _excluded = ["className", "required"];
@@ -31,14 +32,20 @@ var RadioButton = exports.RadioButton = /*#__PURE__*/(0, _react.forwardRef)(func
       required: required
     }),
     state = _useField.state,
-    descriptionId = _useField.descriptionId;
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var id = (0, _react.useMemo)(function () {
+    var _ref2, _props$id;
+    return (_ref2 = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : inputId) !== null && _ref2 !== void 0 ? _ref2 : (0, _utils.uniqueId)("radio-button");
+  }, [props.id, inputId]);
   var isInvalid = state.status === "invalid";
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
     "aria-describedby": descriptionId
   }, props), {}, {
     required: required,
+    id: id,
     "aria-invalid": isInvalid,
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["radio-button focusable ", ""])), isInvalid && "radio-button-invalid"), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["radio-button focusable-visible ", ""])), isInvalid && "radio-button-invalid"), className),
     type: "radio",
     ref: ref
   }));

package/dist/cjs/Fields/RadioGroup/RadioButton.tailwind.js

@@ -37,7 +37,7 @@ var radioButtonPlugin = plugin(function (_ref) {
           background: theme("colors.accent.600"),
           borderRadius: "50%"
         },
-        "&:hover": {
+        "&:not(.radio-button:disabled):hover": {
           borderColor: theme("colors.accent.700")
         }
       },

package/dist/cjs/Fields/RadioGroup/RadioGroupItem.js

@@ -50,7 +50,7 @@ var RadioGroupItem = exports.RadioGroupItem = function RadioGroupItem(_ref) {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex-1 truncate ", ""])), textPosition === "right" ? "ml-2" : "mr-2"),
       children: children
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.RadioButton, {
-      id: checked || isFirstChild && !contextValue ? id : undefined,
+      id: checked || isFirstChild && !contextValue ? id : (0, _uniqueId.uniqueId)("radio-group-item"),
       className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 self-start mt-1"]))),
       value: value,
       checked: checked,

package/dist/cjs/Fields/SelectableCard/SelectableCard.d.ts

@@ -0,0 +1,35 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+import type { CardProps } from "../../Layout";
+import { Card } from "../../Layout";
+declare type SelectableCardBaseProps = Omit<CardProps, "elevation"> & {
+    /**
+     * The color of the selected card.
+     */
+    selectedColor?: keyof typeof SELECTED_COLOR_CLASSNAMES;
+};
+export declare type SelectableCardProps = SelectableCardBaseProps & {
+    /**
+     * Whether the `SelectableCard` is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The value of the `SelectableCard`.
+     */
+    value: string;
+};
+interface SelectableCardType extends ForwardRefExoticComponent<PropsWithoutRef<SelectableCardProps> & RefAttributes<HTMLElement>> {
+    Header: typeof Card.Header;
+    Title: typeof Card.Title;
+}
+declare const SELECTED_COLOR_CLASSNAMES: {
+    readonly grey: string;
+    readonly pink: string;
+    readonly accent: string;
+    readonly blue: string;
+    readonly green: string;
+    readonly orange: string;
+    readonly red: string;
+    readonly xenon: string;
+};
+export declare const SelectableCard: SelectableCardType;
+export {};