@algolia/satellite 1.10.2 → 1.11.0

package/dist/esm/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/esm/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/esm/Fields/RadioGroup/RadioGroup.js

@@ -1,72 +1,15 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-var _excluded = ["value", "disabled", "required", "children"];
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _templateObject, _templateObject2, _templateObject3;
 import cx from "clsx";
-import { Children, cloneElement, forwardRef, isValidElement, useMemo, useState } from "react";
+import { Children, cloneElement, forwardRef, isValidElement, useState } from "react";
 import { Card } from "../../Layout";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { uniqueId } from "../../utils/uniqueId";
 import { useField } from "../Field";
-import { RadioButton } from "./RadioButton";
-import { RadioGroupContext, useRadioGroupContext } from "./RadioGroupContext";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var RadioGroupItem = function RadioGroupItem(_ref) {
-  var value = _ref.value,
-    disabled = _ref.disabled,
-    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,
-    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      ", "\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,
-      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
-    })]
-  });
-};
-
+import { RadioGroupContext } from "./RadioGroupContext";
+import { RadioGroupItem } from "./RadioGroupItem";
+import { jsx as _jsx } from "react/jsx-runtime";
 // This function is used to clone the children of the `RadioGroup` component
 // and pass the `childIndex` prop to the `RadioGroupItem` children.
 function applyChildIndexRecursively(children) {
@@ -92,17 +35,17 @@ function applyChildIndexRecursively(children) {
  *
  * See the [Radio Group documentation page](https://satellite.algolia.com/components/controls/radio-group) for more information.
  */
-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;
+export var RadioGroup = /*#__PURE__*/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 = useState(function () {
       return uniqueId("RadioGroupName-");
     }),
@@ -131,13 +74,13 @@ export var RadioGroup = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   };
   return /*#__PURE__*/_jsx(Card, {
     fullBleed: true,
-    className: cx(className, stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["border ", ""])), state.status === "invalid" ? "bg-red-100 border-red-700" : "border-transparent")),
+    className: cx(className, stl(_templateObject || (_templateObject = _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(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["min-w-0"]))),
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["min-w-0"]))),
         children: /*#__PURE__*/_jsx("div", {
-          className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex flex-col py-1"]))),
+          className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex flex-col py-1"]))),
           children: applyChildIndexRecursively(children)
         })
       })

package/dist/esm/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>;

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

@@ -0,0 +1,64 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["value", "disabled", "required", "children"];
+import { useMemo } from "react";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { uniqueId } from "../../utils/uniqueId";
+import { RadioButton } from "./RadioButton";
+import { useRadioGroupContext } from "./RadioGroupContext";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var RadioGroupItem = function RadioGroupItem(_ref) {
+  var value = _ref.value,
+    disabled = _ref.disabled,
+    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,
+    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      ", "\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,
+      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
+    })]
+  });
+};

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

@@ -1,2 +1,3 @@
 export * from "./RadioGroup";
 export * from "./RadioButton";
+export * from "./RadioGroupItem";

package/dist/esm/Fields/RadioGroup/index.js

@@ -1,2 +1,3 @@
 export * from "./RadioGroup";
-export * from "./RadioButton";
+export * from "./RadioButton";
+export * from "./RadioGroupItem";

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

@@ -2,23 +2,65 @@ import type { ForwardedRef } from "react";
 declare type RangeSliderValue = number | [number, number];
 declare type WidenNumber<T> = T extends number ? number : T;
 export interface RangeSliderProps<Value extends RangeSliderValue = number> {
+    /**
+     * The value of the `RangeSlider`.
+     */
     value?: WidenNumber<Value>;
+    /**
+     * The default value of the `RangeSlider`.
+     */
     defaultValue?: WidenNumber<Value>;
-    /** Event handler called when the value changes. */
+    /**
+     * Event handler called when the value changes.
+     */
     onChange?: (value: WidenNumber<Value>) => void;
-    /** Event handler called when the value changes at the end of an interaction. */
+    /**
+     * Event handler called when the value changes at the end of an interaction.
+     */
     onCommit?: (value: WidenNumber<Value>) => void;
+    /**
+     * The id of the `RangeSlider`.
+     */
     id?: string;
+    /**
+     * The name of the `RangeSlider`.
+     */
     name?: string;
-    /** @ignore */
+    /**
+     * The class name of the `RangeSlider`.
+     */
     className?: string;
+    /**
+     * Whether the `RangeSlider` is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Whether the `RangeSlider` is required.
+     */
     required?: boolean;
+    /**
+     * The minimum value for the range.
+     */
     min?: number;
+    /**
+     * The maximum value for the range.
+     */
     max?: number;
+    /**
+     * The stepping interval for the range.
+     */
     step?: number;
+    /**
+     * The minimum permitted steps between multiple thumbs.
+     */
     minStepsBetweenThumbs?: number;
+    /**
+     * The color of the first track of the `RangeSlider`.
+     */
     track1Color?: string;
+    /**
+     * The color of the second track of the `RangeSlider`.
+     */
     track2Color?: string;
 }
 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>) => import("react/jsx-runtime").JSX.Element;
@@ -28,6 +70,9 @@ declare const RangeSliderInternal: <Value extends RangeSliderValue = number>({ i
  * See the [Range Slider documentation page](https://satellite.algolia.com/components/controls/range-slider) for more information.
  */
 export declare const RangeSlider: (<Value extends RangeSliderValue>(props: RangeSliderProps<Value> & {
+    /**
+     * The ref of the `RangeSlider`.
+     */
     ref?: ForwardedRef<HTMLSpanElement> | undefined;
 }) => ReturnType<typeof RangeSliderInternal>) & {
     displayName?: string | undefined;

package/dist/esm/Fields/Select/Select.d.ts

@@ -1,6 +1,9 @@
 import type { SelectHTMLAttributes } from "react";
 export declare type SelectVariants = "small" | "medium" | "large";
 export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    /**
+     * The variant of the `Select`.
+     */
     variant?: SelectVariants;
 }
 /**

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

@@ -1,5 +1,21 @@
 import type { TextareaHTMLAttributes } from "react";
 export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * Whether the `TextArea` is required.
+     */
+    required?: boolean;
+    /**
+     * The value of the `TextArea`.
+     */
+    value?: string;
+    /**
+     * The placeholder of the `TextArea`.
+     */
+    placeholder?: string;
+    /**
+     * Whether the `TextArea` is disabled.
+     */
+    disabled?: boolean;
 }
 export declare type TextareaStatus = "default" | "validated" | "invalid";
 /**

package/dist/esm/Fields/Toggle/Toggle.d.ts

@@ -1,12 +1,60 @@
-import type { HTMLAttributes, InputHTMLAttributes } from "react";
-export declare type ToggleProps = Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "onChange" | "required" | "autoFocus" | "disabled" | "checked" | "defaultChecked"> & {
+import type { ChangeEvent, HTMLAttributes, InputHTMLAttributes } from "react";
+export declare type ToggleProps = Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange" | "defaultChecked"> & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus"> & {
+    /**
+     * Whether the `Toggle` is decorative.
+     * Decorative toggles are not using an input element.
+     */
     decorative?: boolean;
+    /**
+     * The callback function that is triggered when the `Toggle` is clicked.
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Whether the `Toggle` is required.
+     */
+    required?: boolean;
+    /**
+     * Whether the `Toggle` is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the `Toggle` is default checked.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Whether the `Toggle` is checked.
+     */
+    checked?: boolean;
 };
 /**
  * The `Toggle` component is used to view or switch between enabled or disabled states.
  *
  * See the [Toggle documentation page](https://satellite.algolia.com/components/controls/toggle) for more information.
  */
-export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "autoFocus" | "onChange" | "disabled" | "checked" | "required"> & {
+export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "children" | "defaultChecked" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus"> & {
+    /**
+     * Whether the `Toggle` is decorative.
+     * Decorative toggles are not using an input element.
+     */
     decorative?: boolean | undefined;
+    /**
+     * The callback function that is triggered when the `Toggle` is clicked.
+     */
+    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    /**
+     * Whether the `Toggle` is required.
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether the `Toggle` is disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether the `Toggle` is default checked.
+     */
+    defaultChecked?: boolean | undefined;
+    /**
+     * Whether the `Toggle` is checked.
+     */
+    checked?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/Fields/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./AutoComplete";
 export * from "./Checkbox";
+export * from "./DateInput";
 export * from "./DatePicker";
 export * from "./Dropzone";
 export * from "./Field";

package/dist/esm/Fields/index.js

@@ -1,5 +1,6 @@
 export * from "./AutoComplete";
 export * from "./Checkbox";
+export * from "./DateInput";
 export * from "./DatePicker";
 export * from "./Dropzone";
 export * from "./Field";

package/dist/esm/Helpers/ClickAwayContainer/ClickAwayContainer.d.ts

@@ -5,13 +5,15 @@ interface ClickAwayContextType {
 }
 export declare const useClickAwayContext: () => ClickAwayContextType | null;
 export interface ClickAwayContainerProps {
-    /** The element that should be registered in the ClickAway tree.
+    /**
+     * The element that should be registered in the ClickAway tree.
      * To ensure proper tracking, the element should be tracked in a way that triggers a rerender (use callback refs!)
-     * */
+     */
     element: HTMLElement | null;
-    /** Will be called if a click away event (mousedown, touchstart, focusin)
+    /**
+     * Will be called if a click away event (mousedown, touchstart, focusin)
      * happens outside of the subtree tracked by this component instance
-     * */
+     */
     onClickAway?(evt: Event): void;
     children?: ReactNode;
 }

package/dist/esm/Helpers/HelpUnderline/HelpUnderline.d.ts

@@ -2,9 +2,17 @@ import type { VFC } from "react";
 import type { TooltipWrapperProps } from "../../Overlay";
 import type { TooltipWrapperBaseProps } from "../../Overlay/Tooltip/types";
 export declare type HelpUnderlineProps = {
-    /** @ignore */
+    /**
+     * The class name of the `HelpUnderline`.
+     */
     className?: string;
+    /**
+     * The content of the `Tooltip`.
+     */
     tooltipContent: TooltipWrapperProps["content"];
+    /**
+     * The content of the `HelpUnderline`.
+     */
     children: string;
 } & Omit<TooltipWrapperBaseProps, "children">;
 /**

package/dist/esm/Helpers/Medallion/Medallion.d.ts

@@ -2,10 +2,23 @@ import type { VFC } from "react";
 import type { IconComponentType } from "../../Icons";
 import type { MedallionSize, MedallionVariant } from "./types";
 export interface MedallionProps {
+    /**
+     * The icon of the `Medallion`.
+     */
     icon: IconComponentType;
+    /**
+     * The variant of the `Medallion`.
+     * @default accent
+     */
     variant?: MedallionVariant;
+    /**
+     * The size of the `Medallion`.
+     * @default default
+     */
     size?: MedallionSize;
-    /** @ignore */
+    /**
+     * The class name of the `Medallion`.
+     */
     className?: string;
 }
 /**

package/dist/esm/Helpers/Medallion/Medallion.js

@@ -1,18 +1,19 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 import cx from "clsx";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 var VARIANT_CLASSNAMES = {
   grey: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["medallion-grey text-grey-600"]))),
-  pink: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["medallion-pink text-pink-600"]))),
-  accent: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["medallion-accent text-accent-600"]))),
-  blue: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["medallion-blue text-blue-600"]))),
-  green: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["medallion-green text-green-600"]))),
-  orange: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["medallion-orange text-orange-600"]))),
-  red: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["medallion-red text-red-600"]))),
+  pink: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["medallion-pink text-pink-700"]))),
+  purple: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["medallion-purple text-purple-600"]))),
+  accent: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["medallion-accent text-accent-600"]))),
+  blue: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["medallion-blue text-blue-600"]))),
+  green: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["medallion-green text-green-700"]))),
+  orange: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["medallion-orange text-orange-800"]))),
+  red: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["medallion-red text-red-600"]))),
   // eslint-disable-next-line @algolia/stl/prefer-accent -- here we're definitely refering to the color itself
-  white: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["medallion-white text-nebula-500"])))
+  white: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["medallion-white text-nebula-500"])))
 };
 
 /**
@@ -29,9 +30,9 @@ export var Medallion = function Medallion(_ref) {
     className = _ref.className;
   var medallionClassName = VARIANT_CLASSNAMES[variant];
   return /*#__PURE__*/_jsx("div", {
-    className: cx(stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["medallion inline-flex items-center justify-center rounded-full ", ""])), size === "large" && "medallion-large"), medallionClassName, className),
+    className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["medallion inline-flex items-center justify-center rounded-full ", ""])), size === "large" && "medallion-large"), medallionClassName, className),
     children: /*#__PURE__*/_jsx(Icon, {
-      className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["p-1 ", ""])), size === "large" && "w-10 h-10")
+      className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["p-1 ", ""])), size === "large" && "w-10 h-10")
     })
   });
 };