@algolia/satellite 1.10.2 → 1.11.0

package/dist/cjs/Fields/DatePicker/components/Popover.js

@@ -21,6 +21,7 @@ var DatePickerPopover = exports.DatePickerPopover = function DatePickerPopover(_
     onOpenChange = _ref.onOpenChange,
     trigger = _ref.trigger,
     children = _ref.children,
+    anchor = _ref.anchor,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
     onOpenAutoFocus = _ref.onOpenAutoFocus,
@@ -37,7 +38,10 @@ var DatePickerPopover = exports.DatePickerPopover = function DatePickerPopover(_
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Popover.Trigger, {
       asChild: true,
       children: trigger
-    }), createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(Popover.Content, {
+    }), anchor ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Popover.Anchor, {
+      asChild: true,
+      children: anchor
+    }) : null, createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(Popover.Content, {
       side: side,
       sideOffset: 16,
       align: align,

package/dist/cjs/Fields/DatePicker/types.d.ts

@@ -1,4 +1,5 @@
 import type { Locale as DateFnsLocale } from "date-fns";
+import type { ReactNode } from "react";
 import type { DatePickerPopoverProps } from "./components";
 export declare type DatePickerLocale = {
     /** The date-fns locale object used to localize dates. Defaults to* `en-US`. */
@@ -17,11 +18,31 @@ export declare type DatePickerLocale = {
     title?: string;
 };
 export declare type SharedDatePickerProps = {
+    /**
+     * The placement of the `DatePicker`/`DateRangePicker` modal.
+     * @todo Rename this prop to `side`/`align` in the next major version
+     */
     modalPlacement?: DatePickerPopoverProps["placement"];
+    /**
+     * The anchor element for the `DatePicker`/`DateRangePicker` popover.
+     */
+    popoverAnchor?: ReactNode;
+    /**
+     * The locale of the `DatePicker`/`DateRangePicker`.
+     */
     locale?: DatePickerLocale;
 } & ({
+    /**
+     * Whether the year is editable.
+     */
     editableYear?: false;
 } | {
+    /**
+     * Whether the year is editable.
+     */
     editableYear: true;
+    /**
+     * The years to display in the `DatePicker`/`DateRangePicker`.
+     */
     years?: number[];
 });

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

@@ -5,23 +5,102 @@ export declare type DropzoneLocale = {
     placeholder?: (multiple: boolean) => string;
 };
 export interface DropzoneBaseProps {
+    /**
+     * The id of the `Dropzone`.
+     */
     id?: string;
+    /**
+     * The callback function that is called when files are added to the `Dropzone`.
+     */
     onChange?(acceptedFiles: File[], fileRejections: FileRejection[]): void;
+    /**
+     * The placeholder of the `Dropzone`.
+     */
     placeholder?: string;
-    /** @default false */
+    /**
+     * Whether the `Dropzone` is clearable.
+     * @default false
+     */
     clearable?: boolean;
-    /** @ignore */
+    /**
+     * The class name of the `Dropzone`.
+     */
     className?: string;
-    /** @default false */
+    /**
+     * Whether the `Dropzone` allows multiple files.
+     * @default false
+     */
     multiple?: boolean;
-    /** @default false */
+    /**
+     * Whether the `Dropzone` is required.
+     * @default false
+     */
     required?: boolean;
+    /**
+     * The locale of the `Dropzone`.
+     */
     locale?: DropzoneLocale;
+    /**
+     * The accepted file types of the `Dropzone`.
+     */
+    accept?: ReactDropZoneProps["accept"];
+    /**
+     * The minimum file size of the `Dropzone`.
+     */
+    minSize?: ReactDropZoneProps["minSize"];
+    /**
+     * The maximum file size of the `Dropzone`.
+     */
+    maxSize?: ReactDropZoneProps["maxSize"];
+    /**
+     * The maximum number of files of the `Dropzone`.
+     */
+    maxFiles?: ReactDropZoneProps["maxFiles"];
+    /**
+     * Whether the `Dropzone` prevents the drop event on the document.
+     */
+    preventDropOnDocument?: ReactDropZoneProps["preventDropOnDocument"];
+    /**
+     * Whether the `Dropzone` prevents the click event on the document.
+     */
+    noClick?: ReactDropZoneProps["noClick"];
+    /**
+     * Whether the `Dropzone` prevents the keyboard event on the document.
+     */
+    noKeyboard?: ReactDropZoneProps["noKeyboard"];
+    /**
+     * Whether the `Dropzone` prevents the drag event on the document.
+     */
+    noDrag?: ReactDropZoneProps["noDrag"];
+    /**
+     * Whether the `Dropzone` prevents the drag events bubbling.
+     */
+    noDragEventsBubbling?: ReactDropZoneProps["noDragEventsBubbling"];
+    /**
+     * Whether the `Dropzone` is disabled.
+     */
+    disabled?: ReactDropZoneProps["disabled"];
+    /**
+     * The callback function that is called to get the files from the event.
+     */
+    getFilesFromEvent?: ReactDropZoneProps["getFilesFromEvent"];
+    /**
+     * The callback function that is called when the file dialog is canceled.
+     */
+    onFileDialogCancel?: ReactDropZoneProps["onFileDialogCancel"];
+    /**
+     * The callback function that is called when the file dialog is opened.
+     */
+    onFileDialogOpen?: ReactDropZoneProps["onFileDialogOpen"];
+    /**
+     * The callback function that is called to validate the file.
+     */
+    validator?: ReactDropZoneProps["validator"];
 }
-export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "onDropAccepted" | "onDropRejected" | "multiple">;
+export declare type DropzoneProps = DropzoneBaseProps;
 /**
  * The `Dropzone` component is used to upload files.
  *
  * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
  */
-export declare const Dropzone: import("react").ForwardRefExoticComponent<DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "multiple" | "onDropAccepted" | "onDropRejected"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Dropzone: import("react").ForwardRefExoticComponent<DropzoneBaseProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,24 +1,47 @@
 import { type ReactChild, type ReactNode, type VFC } from "react";
 import type { FieldState } from "./FieldContext";
 export interface FieldProps {
-    /** @ignore */
+    /**
+     * The class name of the `Field`.
+     */
     className?: string;
-    /** Define a label to display above the nested input. */
+    /**
+     * Define a label to display above the nested input.
+     */
     label?: ReactChild;
-    /** Define the `id` of the label. */
+    /**
+     * Define the `id` of the label.
+     */
     labelId?: string;
-    /** Define the `id` of the input used by the label. */
+    /**
+     * Define the `id` of the input used by the label.
+     */
     labelFor?: string;
-    /** Define an helpful description to show below the `Field`. */
+    /**
+     * Define an helpful description to show below the `Field`.
+     */
     description?: ReactNode;
-    /** Define the state of the `Field`. */
+    /**
+     * Define the state of the `Field`.
+     */
     state?: FieldState;
-    /** Define if the `Field` should be displayed inline. */
+    /**
+     * Define if the `Field` should be displayed inline.
+     * @default false
+     */
     inline?: boolean;
-    /** Define if the `Field` is required. */
+    /**
+     * Define if the `Field` is required.
+     */
     required?: boolean;
-    /** Define the visibility of the required indicator. */
+    /**
+     * Define the visibility of the required indicator.
+     * @default false
+     */
     hideRequiredIndicator?: boolean;
+    /**
+     * The children of the `Field`.
+     */
     children: ReactNode;
 }
 /**

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

@@ -108,6 +108,10 @@ var zodSchema = _zod2.z.object({
         message: "You must specify a birthday"
       };
     }
+  }).refine(function (val) {
+    return val < now;
+  }, {
+    message: "You must specify a birthday in the past"
   }),
   age: _zod2.z.coerce.number().min(1, {
     message: "You must specify an age"
@@ -377,14 +381,16 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
               description: "Please specify your birthday",
               state: getFieldState("birthday"),
               className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DatePicker, _objectSpread({
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DateInput, _objectSpread({
                 id: "birthday",
-                calendarProps: {
-                  disabled: {
-                    after: now
+                required: true,
+                datePickerProps: {
+                  calendarProps: {
+                    disabled: {
+                      after: now
+                    }
                   }
-                },
-                required: true
+                }
               }, field))
             });
           }
@@ -583,7 +589,9 @@ var yupSchema = yup.object({
     value: yup.string()
   })).min(1, "You must specify at least one job position"),
   employmentStatus: yup.string().oneOf(employmentStatuses).required("You must specify an employment status"),
-  birthday: yup.date().required("You must specify a birthday"),
+  birthday: yup.date().required("You must specify a birthday").test("birthday", "You must specify a birthday in the past", function (value) {
+    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"),
   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(),
@@ -774,14 +782,16 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           description: "Please specify your birthday",
           state: getFieldState("birthday"),
           className: (0, _satellitePrefixer["default"])(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DatePicker, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DateInput, {
             id: "birthday",
-            calendarProps: {
-              disabled: {
-                after: now
+            required: true,
+            datePickerProps: {
+              calendarProps: {
+                disabled: {
+                  after: now
+                }
               }
             },
-            required: true,
             onChange: function onChange(value) {
               return formik.setFieldValue("birthday", value);
             },

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

@@ -8,15 +8,32 @@ export declare type InputPropsLocale = {
     decrement?: string;
 };
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "checked" | "defaultChecked"> {
+    /**
+     * Define the type of the `Input`.
+     * @default "text"
+     */
     type?: "text" | "number" | "search" | "email" | "password";
+    /**
+     * Define the variant of the `Input`.
+     * @default "medium"
+     */
     variant?: InputVariant;
+    /**
+     * Define the start icon of the `Input`.
+     */
     startIcon?: IconComponentType;
+    /**
+     * Define the end item of the `Input`.
+     */
     endItem?: ReactNode;
     /**
-     * Define whether or not a "clear input" x button should show on hover
+     * Define whether or not a "clear input" x button should show on hover.
      * @default false
      */
     clearable?: boolean;
+    /**
+     * Define the locale of the `Input`.
+     */
     locale?: InputPropsLocale;
 }
 /**

package/dist/cjs/Fields/Input/Input.js

@@ -116,9 +116,11 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n            input group\n            ", "\n            ", "\n          "])), focused && "focusable-show", disabled && "input-disabled"), VARIANT_CLASSNAMES[variant], STATUS_CLASSNAMES[status], className),
     style: style,
-    onClick: function onClick() {
-      var _inputRef$current;
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    onClick: function onClick(e) {
+      if (e.currentTarget.contains(e.target)) {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      }
     },
     children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
       className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["ml-4 shrink-0 ", ""])), disabled ? "text-grey-200" : focused ? "text-accent-600" : "text-grey-500"),

package/dist/cjs/Fields/RadioGroup/RadioButton.d.ts

@@ -1,3 +1,69 @@
 import type { HTMLAttributes, InputHTMLAttributes } from "react";
-export declare type RadioButtonProps = HTMLAttributes<HTMLInputElement> & Pick<InputHTMLAttributes<HTMLInputElement>, "value" | "name" | "checked" | "defaultChecked" | "onChange" | "required" | "autoFocus" | "disabled">;
-export declare const RadioButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & Pick<InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "defaultChecked" | "autoFocus" | "onChange" | "disabled" | "checked" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare type RadioButtonProps = HTMLAttributes<HTMLInputElement> & {
+    /**
+     * The value of the `RadioButton`.
+     */
+    value?: InputHTMLAttributes<HTMLInputElement>["value"];
+    /**
+     * The name of the `RadioButton`.
+     */
+    name?: InputHTMLAttributes<HTMLInputElement>["name"];
+    /**
+     * Whether the `RadioButton` is checked.
+     */
+    checked?: InputHTMLAttributes<HTMLInputElement>["checked"];
+    /**
+     * The default checked state of the `RadioButton`.
+     */
+    defaultChecked?: InputHTMLAttributes<HTMLInputElement>["defaultChecked"];
+    /**
+     * Event handler for when the `RadioButton`'s value changes.
+     */
+    onChange?: InputHTMLAttributes<HTMLInputElement>["onChange"];
+    /**
+     * Whether the `RadioButton` is required.
+     */
+    required?: InputHTMLAttributes<HTMLInputElement>["required"];
+    /**
+     * Whether the `RadioButton` should automatically receive focus when the page loads.
+     */
+    autoFocus?: InputHTMLAttributes<HTMLInputElement>["autoFocus"];
+    /**
+     * Whether the `RadioButton` is disabled.
+     */
+    disabled?: InputHTMLAttributes<HTMLInputElement>["disabled"];
+};
+export declare const RadioButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & {
+    /**
+     * The value of the `RadioButton`.
+     */
+    value?: InputHTMLAttributes<HTMLInputElement>["value"];
+    /**
+     * The name of the `RadioButton`.
+     */
+    name?: InputHTMLAttributes<HTMLInputElement>["name"];
+    /**
+     * Whether the `RadioButton` is checked.
+     */
+    checked?: InputHTMLAttributes<HTMLInputElement>["checked"];
+    /**
+     * The default checked state of the `RadioButton`.
+     */
+    defaultChecked?: InputHTMLAttributes<HTMLInputElement>["defaultChecked"];
+    /**
+     * Event handler for when the `RadioButton`'s value changes.
+     */
+    onChange?: InputHTMLAttributes<HTMLInputElement>["onChange"];
+    /**
+     * Whether the `RadioButton` is required.
+     */
+    required?: InputHTMLAttributes<HTMLInputElement>["required"];
+    /**
+     * Whether the `RadioButton` should automatically receive focus when the page loads.
+     */
+    autoFocus?: InputHTMLAttributes<HTMLInputElement>["autoFocus"];
+    /**
+     * Whether the `RadioButton` is disabled.
+     */
+    disabled?: InputHTMLAttributes<HTMLInputElement>["disabled"];
+} & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,30 +1,47 @@
-import type { ForwardRefExoticComponent, ReactNode, RefAttributes, VFC } from "react";
+import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+import { RadioGroupItem } from "./RadioGroupItem";
 export interface RadioGroupProps {
+    /**
+     * The id of the `RadioGroup`.
+     */
     id?: string;
-    /** @ignore */
+    /**
+     * The class name of the `RadioGroup`.
+     */
     className?: string;
+    /**
+     * The name of the `RadioGroup`.
+     */
     name?: string;
+    /**
+     * The value of the `RadioGroup`.
+     */
     value: string;
+    /**
+     * Whether the `RadioGroup` is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Whether the `RadioGroup` is required.
+     */
     required?: boolean;
     /**
-     * `RadioGroupItem` text position
+     * The text position of the `RadioGroupItem`.
      * @default left
      */
     textPosition?: "left" | "right";
+    /**
+     * Event handler for when the `RadioGroup`'s value changes.
+     */
     onChange: (newValue: string) => void;
-    children?: ReactNode;
-}
-export interface RadioGroupItemProps {
-    value: string;
-    disabled?: boolean;
-    required?: boolean;
+    /**
+     * The children of the `RadioGroup`.
+     */
     children?: ReactNode;
 }
 export declare type RadioGroupComponent = ForwardRefExoticComponent<RadioGroupProps & RefAttributes<HTMLFieldSetElement>> & {
     Item: typeof RadioGroupItem;
 };
-export declare const RadioGroupItem: VFC<RadioGroupItemProps>;
 /**
  * The `RadioGroup` component presents mutually exclusive options, allowing users to make a single selection from a list.
  *

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

@@ -4,83 +4,26 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RadioGroupItem = exports.RadioGroup = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.RadioGroup = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
 var _Layout = require("../../Layout");
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 var _uniqueId = require("../../utils/uniqueId");
 var _Field = require("../Field");
-var _RadioButton = require("./RadioButton");
 var _RadioGroupContext = require("./RadioGroupContext");
+var _RadioGroupItem = require("./RadioGroupItem");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-var _excluded = ["value", "disabled", "required", "children"];
-var RadioGroupItem = exports.RadioGroupItem = function RadioGroupItem(_ref) {
-  var value = _ref.value,
-    disabled = _ref.disabled,
-    required = _ref.required,
-    children = _ref.children,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var _useRadioGroupContext = (0, _RadioGroupContext.useRadioGroupContext)(),
-    id = _useRadioGroupContext.id,
-    name = _useRadioGroupContext.name,
-    contextDisabled = _useRadioGroupContext.disabled,
-    contextRequired = _useRadioGroupContext.required,
-    _onChange = _useRadioGroupContext.onChange,
-    contextValue = _useRadioGroupContext.value,
-    _useRadioGroupContext2 = _useRadioGroupContext.textPosition,
-    textPosition = _useRadioGroupContext2 === void 0 ? "left" : _useRadioGroupContext2,
-    descriptionId = _useRadioGroupContext.descriptionId,
-    state = _useRadioGroupContext.state,
-    ref = _useRadioGroupContext.ref;
-  var isFirstChild = props.childIndex === 0;
-  var isInvalid = (state === null || state === void 0 ? void 0 : state.status) === "invalid";
-  var checked = value === contextValue;
-  disabled = contextDisabled || disabled;
-  required = contextRequired || required;
-  var labelId = (0, _react.useMemo)(
-  // eslint-disable-next-line @algolia/stl/prefer-stl-helper
-  function () {
-    return (0, _uniqueId.uniqueId)("stl-radio-group-label-");
-  }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n      flex items-center justify-between\n      min-h-10 px-4 py-2\n      ", "\n      ", "\n      ", "\n      ", ""])), disabled ? "text-grey-300" : "hover:bg-grey-100", disabled ? "cursor-not-allowed" : "cursor-pointer", textPosition === "right" && "flex-row-reverse", isInvalid && "hover:bg-red-50"),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      id: labelId,
-      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,
-      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 self-start mt-1"]))),
-      value: value,
-      checked: checked,
-      name: name,
-      onChange: function onChange() {
-        if (!disabled && !checked) {
-          _onChange(value);
-        }
-      },
-      disabled: disabled,
-      required: required,
-      "aria-invalid": isInvalid,
-      "aria-labelledby": labelId,
-      "aria-describedby": descriptionId,
-      ref: isFirstChild ? ref : undefined
-    })]
-  });
-};
-
+var _templateObject, _templateObject2, _templateObject3;
 // This function is used to clone the children of the `RadioGroup` component
 // and pass the `childIndex` prop to the `RadioGroupItem` children.
 function applyChildIndexRecursively(children) {
   return _react.Children.map(children, function (child, index) {
     var _child$props;
     if (! /*#__PURE__*/(0, _react.isValidElement)(child)) return child;
-    if (child.type === RadioGroupItem) {
+    if (child.type === _RadioGroupItem.RadioGroupItem) {
       return /*#__PURE__*/(0, _react.cloneElement)(child, {
         childIndex: index
       });
@@ -99,17 +42,17 @@ function applyChildIndexRecursively(children) {
  *
  * See the [Radio Group documentation page](https://satellite.algolia.com/components/controls/radio-group) for more information.
  */
-var RadioGroup = exports.RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var id = _ref2.id,
-    className = _ref2.className,
-    name = _ref2.name,
-    value = _ref2.value,
-    disabled = _ref2.disabled,
-    _ref2$required = _ref2.required,
-    required = _ref2$required === void 0 ? false : _ref2$required,
-    textPosition = _ref2.textPosition,
-    children = _ref2.children,
-    onChange = _ref2.onChange;
+var RadioGroup = exports.RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var id = _ref.id,
+    className = _ref.className,
+    name = _ref.name,
+    value = _ref.value,
+    disabled = _ref.disabled,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    textPosition = _ref.textPosition,
+    children = _ref.children,
+    onChange = _ref.onChange;
   var _useState = (0, _react.useState)(function () {
       return (0, _uniqueId.uniqueId)("RadioGroupName-");
     }),
@@ -138,13 +81,13 @@ var RadioGroup = exports.RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(functi
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Card, {
     fullBleed: true,
-    className: (0, _clsx["default"])(className, (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["border ", ""])), state.status === "invalid" ? "bg-red-100 border-red-700" : "border-transparent")),
+    className: (0, _clsx["default"])(className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["border ", ""])), state.status === "invalid" ? "bg-red-100 border-red-700" : "border-transparent")),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroupContext.RadioGroupContext.Provider, {
       value: contextValue,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
-        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["min-w-0"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["min-w-0"]))),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col py-1"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col py-1"]))),
           children: applyChildIndexRecursively(children)
         })
       })
@@ -152,4 +95,4 @@ var RadioGroup = exports.RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(functi
   });
 });
 RadioGroup.displayName = "RadioGroup";
-RadioGroup.Item = RadioGroupItem;
+RadioGroup.Item = _RadioGroupItem.RadioGroupItem;

package/dist/cjs/Fields/RadioGroup/RadioGroupItem.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode, VFC } from "react";
+export interface RadioGroupItemProps {
+    /**
+     * The value of the `RadioGroupItem`.
+     */
+    value: string;
+    /**
+     * Whether the `RadioGroupItem` is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the `RadioGroupItem` is required.
+     */
+    required?: boolean;
+    /**
+     * The children of the `RadioGroupItem`.
+     */
+    children?: ReactNode;
+}
+export declare const RadioGroupItem: VFC<RadioGroupItemProps>;