@algolia/satellite 1.0.0 → 1.1.0

package/dist/esm/RadioGroup/RadioButton.tailwind.js

@@ -56,6 +56,29 @@ var radioButtonPlugin = plugin(function (_ref) {
           boxShadow: "none"
         }
       }
+    },
+    ".radio-button-invalid:not(.radio-button:disabled)": {
+      borderColor: theme("colors.red.700"),
+      "&:hover": {
+        background: theme("colors.red.50"),
+        borderColor: theme("colors.red.700")
+      },
+      "&:focus": {
+        borderColor: theme("colors.red.700"),
+        boxShadow: "\n          0 0 0 1px ".concat(theme("colors.red.700"), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
+      },
+      "&:checked": {
+        borderColor: theme("colors.red.700"),
+        "&::after": {
+          background: theme("colors.red.700")
+        },
+        "&:hover": {
+          borderColor: theme("colors.red.700")
+        },
+        "&:focus": {
+          boxShadow: "\n            0 0 0 1px ".concat(theme("colors.red.700"), ",\n            0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n          ")
+        }
+      }
     }
   });
 });

package/dist/esm/RadioGroup/RadioGroup.d.ts

@@ -1,10 +1,12 @@
-import type { ReactNode, VFC } from "react";
+import type { ForwardRefExoticComponent, ReactNode, RefAttributes, VFC } from "react";
 export interface RadioGroupProps {
+    id?: string;
     /** @ignore */
     className?: string;
     name?: string;
     value: string;
     disabled?: boolean;
+    required?: boolean;
     /**
      * `RadioGroupItem` text position
      * @default left
@@ -16,10 +18,11 @@ export interface RadioGroupProps {
 export interface RadioGroupItemProps {
     value: string;
     disabled?: boolean;
+    required?: boolean;
     children?: ReactNode;
 }
-declare type RadioGroupSubComponents = {
-    Item: VFC<RadioGroupItemProps>;
+export declare type RadioGroupComponent = ForwardRefExoticComponent<RadioGroupProps & RefAttributes<HTMLFieldSetElement>> & {
+    Item: typeof RadioGroupItem;
 };
 export declare const RadioGroupItem: VFC<RadioGroupItemProps>;
 /**
@@ -27,5 +30,4 @@ export declare const RadioGroupItem: VFC<RadioGroupItemProps>;
  *
  * See the [Radio Group documentation page](https://satellite.algolia.com/components/controls/radio-group) for more information.
  */
-export declare const RadioGroup: VFC<RadioGroupProps> & RadioGroupSubComponents;
-export {};
+export declare const RadioGroup: RadioGroupComponent;

package/dist/esm/RadioGroup/RadioGroup.js

@@ -1,33 +1,54 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-import { useState } from "react";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _excluded = ["value", "disabled", "required", "children"];
+import cx from "clsx";
+import { Children, cloneElement, forwardRef, useMemo, useState } from "react";
 import { Card } from "../Card";
+import { useField } from "../Field";
 import stl from "../styles/helpers/satellitePrefixer";
 import { uniqueId } from "../utils/uniqueId";
 import { RadioButton } from "./RadioButton";
-import { RadioGroupContext, useRadioGroupContext } from "./RadiogroupContext";
+import { RadioGroupContext, useRadioGroupContext } from "./RadioGroupContext";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var RadioGroupItem = function RadioGroupItem(_ref) {
   var value = _ref.value,
     disabled = _ref.disabled,
-    children = _ref.children;
+    required = _ref.required,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useRadioGroupContext = 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;
+    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 = useMemo(
+  // eslint-disable-next-line @algolia/stl/prefer-stl-helper
+  function () {
+    return uniqueId("stl-radio-group-label-");
+  }, []);
   return /*#__PURE__*/_jsxs("label", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      flex items-center justify-between\n      min-h-10 px-4 py-2\n      ", "\n      ", "\n      ", ""])), disabled ? "text-grey-300" : "hover:bg-grey-100", disabled ? "cursor-not-allowed" : "cursor-pointer", textPosition === "right" && "flex-row-reverse"),
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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__*/_jsx("span", {
+      id: labelId,
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-1 truncate ", ""])), textPosition === "right" ? "ml-2" : "mr-2"),
       children: children
     }), /*#__PURE__*/_jsx(RadioButton, {
+      id: checked || isFirstChild && !contextValue ? id : undefined,
       className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["shrink-0 self-start mt-1"]))),
       value: value,
       checked: checked,
@@ -37,21 +58,48 @@ export var RadioGroupItem = function RadioGroupItem(_ref) {
           _onChange(value);
         }
       },
-      disabled: disabled
+      disabled: disabled,
+      required: required,
+      "aria-invalid": isInvalid,
+      "aria-labelledby": labelId,
+      "aria-describedby": descriptionId,
+      ref: isFirstChild ? ref : undefined
     })]
   });
 };
 
+// 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 Children.map(children, function (child, index) {
+    var _child$props;
+    if (child.type === RadioGroupItem) {
+      return /*#__PURE__*/cloneElement(child, {
+        childIndex: index
+      });
+    }
+    if ((_child$props = child.props) !== null && _child$props !== void 0 && _child$props.children) {
+      return /*#__PURE__*/cloneElement(child, {
+        children: applyChildIndexRecursively(child.props.children)
+      });
+    }
+    return child;
+  });
+}
+
 /**
  * The `RadioGroup` component presents mutually exclusive options, allowing users to make a single selection from a list.
  *
  * See the [Radio Group documentation page](https://satellite.algolia.com/components/controls/radio-group) for more information.
  */
-export var RadioGroup = function RadioGroup(_ref2) {
-  var className = _ref2.className,
+export var RadioGroup = /*#__PURE__*/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;
@@ -61,26 +109,40 @@ export var RadioGroup = function RadioGroup(_ref2) {
     _useState2 = _slicedToArray(_useState, 1),
     componentDefaultName = _useState2[0];
   name = name || componentDefaultName;
+  var _useField = useField({
+      required: required
+    }),
+    state = _useField.state,
+    labelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
   var contextValue = {
+    id: id !== null && id !== void 0 ? id : inputId,
     name: name,
     value: value,
     disabled: disabled,
+    required: required,
     onChange: onChange,
-    textPosition: textPosition
+    textPosition: textPosition,
+    labelId: labelId,
+    descriptionId: descriptionId,
+    state: state,
+    ref: ref
   };
   return /*#__PURE__*/_jsx(Card, {
     fullBleed: true,
-    className: className,
+    className: cx(className, stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["border ", ""])), state.status === "invalid" ? "bg-red-100 border-red-700" : "border-transparent")),
     children: /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
       value: contextValue,
       children: /*#__PURE__*/_jsx("fieldset", {
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["min-w-0"]))),
+        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["min-w-0"]))),
         children: /*#__PURE__*/_jsx("div", {
-          className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex flex-col py-1"]))),
-          children: children
+          className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex flex-col py-1"]))),
+          children: applyChildIndexRecursively(children)
         })
       })
     })
   });
-};
+});
+RadioGroup.displayName = "RadioGroup";
 RadioGroup.Item = RadioGroupItem;

package/dist/esm/RadioGroup/{RadiogroupContext.d.ts → RadioGroupContext.d.ts}

@@ -1,11 +1,18 @@
-/// <reference types="react" />
+import type { ForwardedRef } from "react";
+import type { FieldState } from "../Field";
 export interface RadioGroupContextType {
+    id?: string;
     name: string;
     value: string;
     disabled?: boolean;
+    required?: boolean;
     /** `RadioGroupItem` text position */
     textPosition?: "left" | "right";
     onChange: (newValue: string) => void;
+    labelId?: string;
+    descriptionId?: string;
+    state?: FieldState;
+    ref?: ForwardedRef<HTMLInputElement>;
 }
 export declare const RadioGroupContext: import("react").Context<RadioGroupContextType | null>;
 export declare const useRadioGroupContext: () => RadioGroupContextType;

package/dist/esm/RangeSlider/RangeSlider.d.ts

@@ -12,9 +12,8 @@ export interface RangeSliderProps<Value extends RangeSliderValue = number> {
     name?: string;
     /** @ignore */
     className?: string;
-    /** @ignore */
-    "aria-label"?: string;
     disabled?: boolean;
+    required?: boolean;
     min?: number;
     max?: number;
     step?: number;
@@ -22,7 +21,7 @@ export interface RangeSliderProps<Value extends RangeSliderValue = number> {
     track1Color?: string;
     track2Color?: string;
 }
-declare const RangeSliderInternal: <Value extends RangeSliderValue = number>({ className, value, defaultValue, onChange, onCommit, disabled, min, max, track1Color, track2Color, ...otherProps }: RangeSliderProps<Value>, ref: ForwardedRef<HTMLSpanElement>) => JSX.Element;
+declare const RangeSliderInternal: <Value extends RangeSliderValue = number>({ id, className, value, defaultValue, onChange, onCommit, disabled, required, min, max, track1Color, track2Color, ...otherProps }: RangeSliderProps<Value>, ref: ForwardedRef<HTMLSpanElement>) => JSX.Element;
 /**
  * The `RangeSlider` component is an input field where users select one or two numeric values within a given range (minimum and maximum values).
  *

package/dist/esm/RangeSlider/RangeSlider.js

@@ -1,13 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["className", "value", "defaultValue", "onChange", "onCommit", "disabled", "min", "max", "track1Color", "track2Color"];
+var _excluded = ["id", "className", "value", "defaultValue", "onChange", "onCommit", "disabled", "required", "min", "max", "track1Color", "track2Color"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { SliderRange, Root as SliderRoot, SliderThumb, SliderTrack } from "@radix-ui/react-slider";
 import cx from "clsx";
 import { forwardRef } from "react";
+import { useField } from "../Field";
 import colors from "../styles/colors";
 import stl from "../styles/helpers/satellitePrefixer";
 
@@ -28,12 +29,15 @@ var ThumbGroove = function ThumbGroove(_ref) {
   });
 };
 var RangeSliderInternal = function RangeSliderInternal(_ref2, ref) {
-  var className = _ref2.className,
+  var idProp = _ref2.id,
+    className = _ref2.className,
     value = _ref2.value,
     defaultValue = _ref2.defaultValue,
     onChange = _ref2.onChange,
     onCommit = _ref2.onCommit,
     disabled = _ref2.disabled,
+    _ref2$required = _ref2.required,
+    required = _ref2$required === void 0 ? false : _ref2$required,
     _ref2$min = _ref2.min,
     min = _ref2$min === void 0 ? 0 : _ref2$min,
     _ref2$max = _ref2.max,
@@ -46,9 +50,16 @@ var RangeSliderInternal = function RangeSliderInternal(_ref2, ref) {
     track1: disabled ? colors.grey[200] : track1Color,
     track2: disabled ? colors.grey[100] : track2Color
   };
-  return /*#__PURE__*/_jsxs(SliderRoot, _objectSpread(_objectSpread({
-    ref: ref
-  }, otherProps), {}, {
+  var _useField = useField({
+      required: required
+    }),
+    state = _useField.state,
+    labelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var isInvalid = state.status === "invalid";
+  var id = idProp !== null && idProp !== void 0 ? idProp : inputId;
+  return /*#__PURE__*/_jsxs(SliderRoot, _objectSpread(_objectSpread({}, otherProps), {}, {
     className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["relative h-6 min-w-[200px] flex items-center select-none touch-none aria-disabled:opacity-70 cursor-pointer aria-disabled:cursor-not-allowed"]))), className),
     value: coerceToRadixValue(value),
     defaultValue: coerceToRadixValue(defaultValue),
@@ -66,23 +77,29 @@ var RangeSliderInternal = function RangeSliderInternal(_ref2, ref) {
     max: max,
     min: min,
     children: [/*#__PURE__*/_jsx(SliderTrack, {
-      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["relative h-1 flex-1 rounded bg-grey-100"]))), TRACK_SHADOWS_CLASSNAME),
+      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["relative h-1 flex-1 rounded bg-grey-100 ", ""])), isInvalid && "bg-red-100"), TRACK_SHADOWS_CLASSNAME),
       style: {
         backgroundColor: trackColors.track2
       },
       children: /*#__PURE__*/_jsx(SliderRange, {
-        className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["absolute rounded-full h-full bg-accent-600"]))), TRACK_SHADOWS_CLASSNAME),
+        className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["absolute rounded-full h-full bg-accent-600 ", ""])), isInvalid && "bg-red-700"), TRACK_SHADOWS_CLASSNAME),
         style: {
           backgroundColor: trackColors.track1
         }
       })
     }), Array(thumbsCount).fill(undefined).map(function (_, idx) {
       return /*#__PURE__*/_jsxs(SliderThumb, {
-        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["group absolute -translate-x-1.5 -translate-y-3\n              w-3 h-6 rounded-[2px] border border-grey-500\n              bg-white bg-gradient-to-b from-white to-grey-50 shadow-[0_1px_0_0_rgb(35_38_59_/_5%)]\n              hover:border-grey-600\n            "]))),
+        ref: ref,
+        id: id && (idx === 0 ? id : "".concat(id, "-").concat(idx)),
+        "aria-labelledby": labelId,
+        "aria-describedby": descriptionId,
+        "aria-required": required,
+        "aria-invalid": isInvalid,
+        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["group absolute -translate-x-1.5 -translate-y-3\n              w-3 h-6 rounded-[2px] border border-grey-500\n              bg-white bg-gradient-to-b from-white to-grey-50 shadow-[0_1px_0_0_rgb(35_38_59_/_5%)]\n              ", "\n            "])), isInvalid ? "border-red-700 hover:border-red-700 focus:outline-red-700" : "hover:border-grey-600"),
         children: [/*#__PURE__*/_jsx(ThumbGroove, {
-          className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["absolute top-1.5 right-1.5"])))
+          className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["absolute top-1.5 right-1.5 ", ""])), isInvalid && "bg-red-700 group-hover:bg-red-700")
         }), /*#__PURE__*/_jsx(ThumbGroove, {
-          className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["absolute top-1.5 left-1.5"])))
+          className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["absolute top-1.5 left-1.5 ", ""])), isInvalid && "bg-red-700 group-hover:bg-red-700")
         })]
       }, "thumb_".concat(idx));
     })]

package/dist/esm/Satellite/locale.d.ts

@@ -3,6 +3,7 @@ import type { AutoCompleteLocale } from "../AutoComplete";
 import type { UserAvatarLocale } from "../Avatars/UserAvatar";
 import type { DatePickerLocale } from "../DatePicker/types";
 import type { DropzoneLocale } from "../Dropzone";
+import type { ExperimentalFormLocale } from "../Form/Form";
 import type { InputPropsLocale } from "../Input";
 import type { ModalLocale } from "../Modal";
 import type { PaginationLocale } from "../Pagination";
@@ -23,6 +24,7 @@ export declare type ComponentsLocales = {
     datePicker?: DatePickerLocale;
     dotPagination?: DotPaginationLocale;
     dropzone?: DropzoneLocale;
+    form?: ExperimentalFormLocale;
     input?: InputPropsLocale;
     modal?: ModalLocale;
     pagination?: PaginationLocale;

package/dist/esm/Select/Select.js

@@ -1,19 +1,32 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["variant", "className"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["variant", "className", "required"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import cx from "clsx";
-import { forwardRef } from "react";
+import { forwardRef, Fragment } from "react";
+import { useField } from "../Field";
+import { CheckIcon, XIcon } from "../Icons";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var VARIANT_CLASSNAMES = {
   small: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["select-input-small"]))),
   medium: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["select-input-medium"]))),
   large: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["select-input-large"])))
 };
+var InvalidIcon = function InvalidIcon() {
+  return /*#__PURE__*/_jsx(XIcon, {
+    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["h-4 w-4 mr-10 text-white bg-red-700 p-px rounded-full absolute top-1/2 right-0 -translate-y-1/2"])))
+  });
+};
+var ValidatedIcon = function ValidatedIcon() {
+  return /*#__PURE__*/_jsx(CheckIcon, {
+    className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["h-4 w-4 mr-10 text-white bg-accent-600 p-px rounded-full absolute top-1/2 right-0 -translate-y-1/2"])))
+  });
+};
 
 /**
  * The `Select` component provides a dropdown menu, allowing users to choose one option from a list.
@@ -21,13 +34,34 @@ var VARIANT_CLASSNAMES = {
  * See the [Select documentation page](https://satellite.algolia.com/components/forms/select) for more information.
  */
 export var Select = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _props$id;
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "medium" : _ref$variant,
     className = _ref.className,
+    required = _ref.required,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx("select", _objectSpread(_objectSpread({}, props), {}, {
-    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["select-input display-body"]))), VARIANT_CLASSNAMES[variant], className),
-    ref: ref
-  }));
+  var _useField = useField({
+      required: required
+    }),
+    state = _useField.state,
+    labelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var isValidated = state.status === "validated";
+  var isInvalid = state.status === "invalid";
+  var StatusIcon = isInvalid ? InvalidIcon : state.status === "validated" ? ValidatedIcon : Fragment;
+  return /*#__PURE__*/_jsxs("div", {
+    className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["relative w-full"]))),
+    children: [/*#__PURE__*/_jsx("select", _objectSpread(_objectSpread({
+      "aria-labelledby": labelId,
+      "aria-describedby": descriptionId
+    }, props), {}, {
+      id: (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : inputId,
+      required: required,
+      "aria-invalid": isInvalid,
+      className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["select-input display-body"]))), VARIANT_CLASSNAMES[variant], isInvalid && stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["select-input-invalid"]))), isValidated && stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["select-input-validated"]))), className),
+      ref: ref
+    })), /*#__PURE__*/_jsx(StatusIcon, {})]
+  });
 });
 Select.displayName = "Select";

package/dist/esm/Select/Select.tailwind.js

@@ -26,6 +26,7 @@ var selectPlugin = plugin(function (_ref) {
       borderRadius: theme("borderRadius.DEFAULT"),
       border: "1px solid ".concat(theme("colors.grey.500")),
       boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5")),
+      transition: "all 100ms ease-in-out",
       "&::-moz-focus-inner, &:-moz-focusring": {
         outline: "none",
         color: "transparent",
@@ -71,6 +72,24 @@ var selectPlugin = plugin(function (_ref) {
     ".select-input-large": {
       height: theme("spacing.12"),
       backgroundSize: "12px, auto"
+    },
+    ".select-input-invalid, .select-input-validated": {
+      padding: "0 ".concat(theme("spacing.16"), " 0 ").concat(theme("spacing.4"))
+    },
+    ".select-input-invalid": {
+      borderColor: theme("colors.red.700"),
+      backgroundColor: theme("colors.red.100"),
+      backgroundImage: selectIconBG(theme("colors.red.700")),
+      "&:hover": {
+        borderColor: theme("colors.red.700"),
+        backgroundColor: theme("colors.red.50"),
+        backgroundImage: selectIconBG(theme("colors.red.700"))
+      },
+      "&:focus": {
+        backgroundImage: selectIconBG(theme("colors.red.700")),
+        borderColor: theme("colors.red.700"),
+        boxShadow: "\n          0 0 0 1px ".concat(theme("colors.red.700"), ",\n          0 2px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
+      }
     }
   });
 });

package/dist/esm/Stepper/Step.js

@@ -65,7 +65,7 @@ export var Step = function Step(_ref) {
     className: cx(className, stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["text-grey-600 group/step"])))),
     children: /*#__PURE__*/_jsxs("button", {
       id: buttonId,
-      className: cx(stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["relative w-full flex items-center text-left gap-2 rounded border transition-colors group/button"]))), stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["-outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-xenon-600"]))), disabled ? stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["cursor-not-allowed"]))) : stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["hover:bg-grey-100"]))), active ? stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["border-grey-200 bg-white"]))) : stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["border-transparent"]))), BUTTON_SIZE_CLASSNAMES[context.size]),
+      className: cx(stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["relative w-full flex items-center text-left gap-2 rounded border group/button"]))), stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["-outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-xenon-600"]))), disabled ? stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["cursor-not-allowed"]))) : stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["hover:bg-grey-100"]))), active ? stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["border-grey-200 bg-white"]))) : stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["border-transparent"]))), BUTTON_SIZE_CLASSNAMES[context.size]),
       "aria-label": disabled ? disabledLocale : active ? activeLocale : completed ? completedLocale : incompletedLocale,
       "aria-current": active ? "step" : undefined,
       disabled: disabled,
@@ -89,7 +89,7 @@ export var Step = function Step(_ref) {
       children: [context.connectors && /*#__PURE__*/_jsx("span", {
         className: cx(stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["absolute -z-10 border-l h-full group-last/step:hidden"]))), completed ? stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["border-green-600"]))) : stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["border-grey-200"]))), CONNECTOR_SIZE_CLASSNAMES[context.size])
       }), /*#__PURE__*/_jsx("span", {
-        className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["rounded-full flex items-center justify-center shrink-0 text-sm transition-colors"]))), !active && !completed && stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["bg-grey-100"]))), !active && !completed && !disabled && stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["group-hover/button:bg-white"]))), active && !completed && stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["bg-grey-800 text-white"]))), completed && stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["bg-green-600 text-white"]))), ICON_SIZE_CLASSNAMES[context.size]),
+        className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["rounded-full flex items-center justify-center shrink-0 text-sm"]))), !active && !completed && stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["bg-grey-100"]))), !active && !completed && !disabled && stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["group-hover/button:bg-white"]))), active && !completed && stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["bg-grey-800 text-white"]))), completed && stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["bg-green-600 text-white"]))), ICON_SIZE_CLASSNAMES[context.size]),
         children: Icon ? /*#__PURE__*/_jsx(Icon, {
           width: ICON_SIZE[context.size],
           height: ICON_SIZE[context.size]

package/dist/esm/Switch/Switch.js

@@ -4,7 +4,7 @@ var _templateObject, _templateObject2;
 import cx from "clsx";
 import { useLayoutEffect, useRef, useState } from "react";
 import { BUTTON_SIZE_CLASSNAMES } from "../Button/styles";
-import { RadioGroupContext } from "../RadioGroup/RadiogroupContext";
+import { RadioGroupContext } from "../RadioGroup/RadioGroupContext";
 import stl from "../styles/helpers/satellitePrefixer";
 import { prefersReducedMotion } from "../utils/prefersReducedMotion";
 import { uniqueId } from "../utils/uniqueId";

package/dist/esm/Switch/SwitchOption.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { useRadioGroupContext } from "../RadioGroup/RadiogroupContext";
+import { useRadioGroupContext } from "../RadioGroup/RadioGroupContext";
 import stl from "../styles/helpers/satellitePrefixer";
 import { OverflowTooltipWrapper } from "../Tooltip/OverflowTooltipWrapper";
 import { buildAnimationProps } from "./utils";
@@ -17,7 +17,7 @@ export var SwitchOption = function SwitchOption(_ref) {
   var checked = context.value === value;
   var inputDisabled = context.disabled || disabled;
   return /*#__PURE__*/_jsxs("label", _objectSpread(_objectSpread({
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        inline-flex grow shrink justify-center items-center min-w-16 max-w-48 px-4 z-10 text-grey-600\n        ", "\n        ", "\n      "])), inputDisabled ? "cursor-not-allowed opacity-60 rounded bg-grey-100" : "cursor-pointer hover:text-grey-900", !checked && !inputDisabled && "rounded motion-safe:transition-colors active:bg-accent-200/20 motion-safe:duration-100 ease-linear")
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        inline-flex grow shrink justify-center items-center min-w-16 max-w-48 px-4 z-10 text-grey-600\n        ", "\n        ", "\n      "])), inputDisabled ? "cursor-not-allowed opacity-60 rounded bg-grey-100" : "cursor-pointer hover:text-grey-900", !checked && !inputDisabled && "rounded active:bg-accent-200/20")
   }, buildAnimationProps(context.name, value)), {}, {
     children: [/*#__PURE__*/_jsx("input", {
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-0 h-0 opacity-0"]))),

package/dist/esm/Tables/DataTable/DataTable.d.ts

@@ -51,5 +51,5 @@ export declare type DataTableProps<Item> = BaseDataTableProps<Item> & (DataTable
  *
  * See the [Data Table documentation page](https://satellite.algolia.com/layouts/data-table) for more information.
  */
-export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale: propsLocale, }: DataTableProps<Item>) => JSX.Element;
+export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale, }: DataTableProps<Item>) => JSX.Element;
 export {};

package/dist/esm/Tag/Tag.d.ts

@@ -27,4 +27,4 @@ export interface TagProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanEleme
  *
  * See the [Tag documentation page](https://satellite.algolia.com/components/forms/tag) for more information.
  */
-export declare const Tag: import("react").ForwardRefExoticComponent<Pick<TagProps, "dir" | "slot" | "style" | "title" | "children" | "id" | "variant" | "locale" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "onAdd" | "addTooltip" | "onRemove" | "removeTooltip"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Tag: import("react").ForwardRefExoticComponent<Pick<TagProps, "slot" | "style" | "title" | "children" | "id" | "variant" | "locale" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "onAdd" | "addTooltip" | "onRemove" | "removeTooltip"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/esm/TextArea/TextArea.d.ts

@@ -1,6 +1,7 @@
 import type { TextareaHTMLAttributes } from "react";
 export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
 }
+export declare type TextareaStatus = "default" | "validated" | "invalid";
 /**
  * The `TextArea` component is a multiline input field for extensive text, ideal for detailed feedback, descriptions, or comments.
  *