@algolia/satellite 1.10.2 → 2.0.0-rc.1

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,16 @@
+import type { FC, PropsWithChildren } from "react";
+export declare type RadioGroupItemProps = PropsWithChildren<{
+    /**
+     * The value of the `RadioGroupItem`.
+     */
+    value: string;
+    /**
+     * Whether the `RadioGroupItem` is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the `RadioGroupItem` is required.
+     */
+    required?: boolean;
+}>;
+export declare const RadioGroupItem: FC<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

@@ -1,20 +1,21 @@
-import type { ReactNode, VFC } from "react";
+import type { FC, PropsWithChildren } from "react";
 interface ClickAwayContextType {
     registerElement(element: HTMLElement): void;
     unregisterElement(element: HTMLElement): void;
 }
 export declare const useClickAwayContext: () => ClickAwayContextType | null;
-export interface ClickAwayContainerProps {
-    /** The element that should be registered in the ClickAway tree.
+export declare type ClickAwayContainerProps = PropsWithChildren<{
+    /**
+     * 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;
-}
+}>;
 /**
  * ClickAwayContainer is a low-level, compound component. It doesn't render anything apart from its children.
  * Its goal is to construct a tree of ClickAway-able React components (e.g. nested dropdown).
@@ -26,5 +27,5 @@ export interface ClickAwayContainerProps {
  * @deprecated This component is deprecated and will be removed in a future version.
  * Please use the Popover component, which provides built-in click-away behavior and is more accessible.
  */
-export declare const ClickAwayContainer: VFC<ClickAwayContainerProps>;
+export declare const ClickAwayContainer: FC<ClickAwayContainerProps>;
 export {};

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

@@ -1,10 +1,18 @@
-import type { VFC } from "react";
+import type { FC } 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">;
 /**
@@ -12,4 +20,4 @@ export declare type HelpUnderlineProps = {
  *
  * See the [Help Underline documentation page](https://satellite.algolia.com/components/misc/help-underline) for more information.
  */
-export declare const HelpUnderline: VFC<HelpUnderlineProps>;
+export declare const HelpUnderline: FC<HelpUnderlineProps>;

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

@@ -1,11 +1,24 @@
-import type { VFC } from "react";
+import type { FC } 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;
 }
 /**
@@ -13,4 +26,4 @@ export interface MedallionProps {
  *
  * See the [Medallion documentation page](https://satellite.algolia.com/components/images/medallion) for more information.
  */
-export declare const Medallion: VFC<MedallionProps>;
+export declare const Medallion: FC<MedallionProps>;

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")
     })
   });
 };

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

@@ -7,7 +7,7 @@ var rgba = _rgba;
 var medallionPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
     theme = _ref.theme;
-  var colors = ["grey", "pink", "accent", "blue", "green", "orange", "red", "white"];
+  var colors = ["grey", "pink", "purple", "accent", "blue", "green", "orange", "red", "white"];
   addComponents({
     ".medallion": {
       height: "40px",

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

@@ -1,2 +1,2 @@
-export declare type MedallionVariant = "accent" | "grey" | "pink" | "blue" | "green" | "orange" | "red" | "white";
+export declare type MedallionVariant = "accent" | "grey" | "pink" | "purple" | "blue" | "green" | "orange" | "red" | "white";
 export declare type MedallionSize = "default" | "large";

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

@@ -1,8 +1,18 @@
 import * as RadixSeparator from "@radix-ui/react-separator";
-import type { VFC } from "react";
+import type { FC } from "react";
 export interface SeparatorProps {
+    /**
+     * The class name of the `Separator`.
+     */
     className?: string;
+    /**
+     * Whether the `Separator` is interactive.
+     */
     interactive?: boolean;
+    /**
+     * The orientation of the `Separator`.
+     * @default horizontal
+     */
     orientation?: RadixSeparator.SeparatorProps["orientation"];
 }
 /**
@@ -10,4 +20,4 @@ export interface SeparatorProps {
  *
  * See the [Separator documentation page](https://satellite.algolia.com/components/misc/separator) for more information.
  */
-export declare const Separator: VFC<SeparatorProps>;
+export declare const Separator: FC<SeparatorProps>;

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

@@ -1,6 +1,12 @@
-import type { HTMLAttributes, VFC } from "react";
+import type { FC, HTMLAttributes, ReactNode } from "react";
 export interface TextWrapProps extends HTMLAttributes<HTMLSpanElement> {
-    /** The max number of lines before the text is cut with an ellipsis */
+    /**
+     * The content of the `TextWrap`.
+     */
+    children: ReactNode;
+    /**
+     * The max number of lines before the text is cut with an ellipsis.
+     */
     maxLines?: number;
 }
 /**
@@ -8,4 +14,4 @@ export interface TextWrapProps extends HTMLAttributes<HTMLSpanElement> {
  *
  * See the [Text Wrap documentation page](https://satellite.algolia.com/components/misc/text-wrap) for more information.
  */
-export declare const TextWrap: VFC<TextWrapProps>;
+export declare const TextWrap: FC<TextWrapProps>;

package/dist/esm/Helpers/TextWrap/TextWrap.js

@@ -21,7 +21,7 @@ var SEPARATOR_ELEMENT = /*#__PURE__*/_jsx("span", {
   "aria-hidden": "true",
   children: "\u200B"
 });
-var SPLIT_REGEX = /([\W_]+)/g;
+var SPLIT_REGEX = /((?:[\0-@\[-`\{-\xA9\xAB-\xB4\xB6-\xB9\xBB-\xBF\xD7\xF7\u02C2-\u02C5\u02D2-\u02DF\u02E5-\u02EB\u02ED\u02EF-\u036F\u0375\u0378\u0379\u037E\u0380-\u0385\u0387\u038B\u038D\u03A2\u03F6\u0482-\u0489\u0530\u0557\u0558\u055A-\u055F\u0589-\u05CF\u05EB-\u05EE\u05F3-\u061F\u064B-\u066D\u0670\u06D4\u06D6-\u06E4\u06E7-\u06ED\u06F0-\u06F9\u06FD\u06FE\u0700-\u070F\u0711\u0730-\u074C\u07A6-\u07B0\u07B2-\u07C9\u07EB-\u07F3\u07F6-\u07F9\u07FB-\u07FF\u0816-\u0819\u081B-\u0823\u0825-\u0827\u0829-\u083F\u0859-\u085F\u086B-\u086F\u0888\u088F-\u089F\u08CA-\u0903\u093A-\u093C\u093E-\u094F\u0951-\u0957\u0962-\u0970\u0981-\u0984\u098D\u098E\u0991\u0992\u09A9\u09B1\u09B3-\u09B5\u09BA-\u09BC\u09BE-\u09CD\u09CF-\u09DB\u09DE\u09E2-\u09EF\u09F2-\u09FB\u09FD-\u0A04\u0A0B-\u0A0E\u0A11\u0A12\u0A29\u0A31\u0A34\u0A37\u0A3A-\u0A58\u0A5D\u0A5F-\u0A71\u0A75-\u0A84\u0A8E\u0A92\u0AA9\u0AB1\u0AB4\u0ABA-\u0ABC\u0ABE-\u0ACF\u0AD1-\u0ADF\u0AE2-\u0AF8\u0AFA-\u0B04\u0B0D\u0B0E\u0B11\u0B12\u0B29\u0B31\u0B34\u0B3A-\u0B3C\u0B3E-\u0B5B\u0B5E\u0B62-\u0B70\u0B72-\u0B82\u0B84\u0B8B-\u0B8D\u0B91\u0B96-\u0B98\u0B9B\u0B9D\u0BA0-\u0BA2\u0BA5-\u0BA7\u0BAB-\u0BAD\u0BBA-\u0BCF\u0BD1-\u0C04\u0C0D\u0C11\u0C29\u0C3A-\u0C3C\u0C3E-\u0C57\u0C5B\u0C5C\u0C5E\u0C5F\u0C62-\u0C7F\u0C81-\u0C84\u0C8D\u0C91\u0CA9\u0CB4\u0CBA-\u0CBC\u0CBE-\u0CDC\u0CDF\u0CE2-\u0CF0\u0CF3-\u0D03\u0D0D\u0D11\u0D3B\u0D3C\u0D3E-\u0D4D\u0D4F-\u0D53\u0D57-\u0D5E\u0D62-\u0D79\u0D80-\u0D84\u0D97-\u0D99\u0DB2\u0DBC\u0DBE\u0DBF\u0DC7-\u0E00\u0E31\u0E34-\u0E3F\u0E47-\u0E80\u0E83\u0E85\u0E8B\u0EA4\u0EA6\u0EB1\u0EB4-\u0EBC\u0EBE\u0EBF\u0EC5\u0EC7-\u0EDB\u0EE0-\u0EFF\u0F01-\u0F3F\u0F48\u0F6D-\u0F87\u0F8D-\u0FFF\u102B-\u103E\u1040-\u104F\u1056-\u1059\u105E-\u1060\u1062-\u1064\u1067-\u106D\u1071-\u1074\u1082-\u108D\u108F-\u109F\u10C6\u10C8-\u10CC\u10CE\u10CF\u10FB\u1249\u124E\u124F\u1257\u1259\u125E\u125F\u1289\u128E\u128F\u12B1\u12B6\u12B7\u12BF\u12C1\u12C6\u12C7\u12D7\u1311\u1316\u1317\u135B-\u137F\u1390-\u139F\u13F6\u13F7\u13FE-\u1400\u166D\u166E\u1680\u169B-\u169F\u16EB-\u16F0\u16F9-\u16FF\u1712-\u171E\u1732-\u173F\u1752-\u175F\u176D\u1771-\u177F\u17B4-\u17D6\u17D8-\u17DB\u17DD-\u181F\u1879-\u187F\u1885\u1886\u18A9\u18AB-\u18AF\u18F6-\u18FF\u191F-\u194F\u196E\u196F\u1975-\u197F\u19AC-\u19AF\u19CA-\u19FF\u1A17-\u1A1F\u1A55-\u1AA6\u1AA8-\u1B04\u1B34-\u1B44\u1B4D-\u1B82\u1BA1-\u1BAD\u1BB0-\u1BB9\u1BE6-\u1BFF\u1C24-\u1C4C\u1C50-\u1C59\u1C7E\u1C7F\u1C89-\u1C8F\u1CBB\u1CBC\u1CC0-\u1CE8\u1CED\u1CF4\u1CF7-\u1CF9\u1CFB-\u1CFF\u1DC0-\u1DFF\u1F16\u1F17\u1F1E\u1F1F\u1F46\u1F47\u1F4E\u1F4F\u1F58\u1F5A\u1F5C\u1F5E\u1F7E\u1F7F\u1FB5\u1FBD\u1FBF-\u1FC1\u1FC5\u1FCD-\u1FCF\u1FD4\u1FD5\u1FDC-\u1FDF\u1FED-\u1FF1\u1FF5\u1FFD-\u2070\u2072-\u207E\u2080-\u208F\u209D-\u2101\u2103-\u2106\u2108\u2109\u2114\u2116-\u2118\u211E-\u2123\u2125\u2127\u2129\u212E\u213A\u213B\u2140-\u2144\u214A-\u214D\u214F-\u2182\u2185-\u2BFF\u2CE5-\u2CEA\u2CEF-\u2CF1\u2CF4-\u2CFF\u2D26\u2D28-\u2D2C\u2D2E\u2D2F\u2D68-\u2D6E\u2D70-\u2D7F\u2D97-\u2D9F\u2DA7\u2DAF\u2DB7\u2DBF\u2DC7\u2DCF\u2DD7\u2DDF-\u2E2E\u2E30-\u3004\u3007-\u3030\u3036-\u303A\u303D-\u3040\u3097-\u309C\u30A0\u30FB\u3100-\u3104\u3130\u318F-\u319F\u31C0-\u31EF\u3200-\u33FF\u4DC0-\u4DFF\uA48D-\uA4CF\uA4FE\uA4FF\uA60D-\uA60F\uA620-\uA629\uA62C-\uA63F\uA66F-\uA67E\uA69E\uA69F\uA6E6-\uA716\uA720\uA721\uA789\uA78A\uA7CB-\uA7CF\uA7D2\uA7D4\uA7DA-\uA7F1\uA802\uA806\uA80B\uA823-\uA83F\uA874-\uA881\uA8B4-\uA8F1\uA8F8-\uA8FA\uA8FC\uA8FF-\uA909\uA926-\uA92F\uA947-\uA95F\uA97D-\uA983\uA9B3-\uA9CE\uA9D0-\uA9DF\uA9E5\uA9F0-\uA9F9\uA9FF\uAA29-\uAA3F\uAA43\uAA4C-\uAA5F\uAA77-\uAA79\uAA7B-\uAA7D\uAAB0\uAAB2-\uAAB4\uAAB7\uAAB8\uAABE\uAABF\uAAC1\uAAC3-\uAADA\uAADE\uAADF\uAAEB-\uAAF1\uAAF5-\uAB00\uAB07\uAB08\uAB0F\uAB10\uAB17-\uAB1F\uAB27\uAB2F\uAB5B\uAB6A-\uAB6F\uABE3-\uABFF\uD7A4-\uD7AF\uD7C7-\uD7CA\uD7FC-\uD7FF\uE000-\uF8FF\uFA6E\uFA6F\uFADA-\uFAFF\uFB07-\uFB12\uFB18-\uFB1C\uFB1E\uFB29\uFB37\uFB3D\uFB3F\uFB42\uFB45\uFBB2-\uFBD2\uFD3E-\uFD4F\uFD90\uFD91\uFDC8-\uFDEF\uFDFC-\uFE6F\uFE75\uFEFD-\uFF20\uFF3B-\uFF40\uFF5B-\uFF65\uFFBF-\uFFC1\uFFC8\uFFC9\uFFD0\uFFD1\uFFD8\uFFD9\uFFDD-\uFFFF]|\uD800[\uDC0C\uDC27\uDC3B\uDC3E\uDC4E\uDC4F\uDC5E-\uDC7F\uDCFB-\uDE7F\uDE9D-\uDE9F\uDED1-\uDEFF\uDF20-\uDF2C\uDF41\uDF4A-\uDF4F\uDF76-\uDF7F\uDF9E\uDF9F\uDFC4-\uDFC7\uDFD0-\uDFFF]|\uD801[\uDC9E-\uDCAF\uDCD4-\uDCD7\uDCFC-\uDCFF\uDD28-\uDD2F\uDD64-\uDD6F\uDD7B\uDD8B\uDD93\uDD96\uDDA2\uDDB2\uDDBA\uDDBD-\uDDFF\uDF37-\uDF3F\uDF56-\uDF5F\uDF68-\uDF7F\uDF86\uDFB1\uDFBB-\uDFFF]|\uD802[\uDC06\uDC07\uDC09\uDC36\uDC39-\uDC3B\uDC3D\uDC3E\uDC56-\uDC5F\uDC77-\uDC7F\uDC9F-\uDCDF\uDCF3\uDCF6-\uDCFF\uDD16-\uDD1F\uDD3A-\uDD7F\uDDB8-\uDDBD\uDDC0-\uDDFF\uDE01-\uDE0F\uDE14\uDE18\uDE36-\uDE5F\uDE7D-\uDE7F\uDE9D-\uDEBF\uDEC8\uDEE5-\uDEFF\uDF36-\uDF3F\uDF56-\uDF5F\uDF73-\uDF7F\uDF92-\uDFFF]|\uD803[\uDC49-\uDC7F\uDCB3-\uDCBF\uDCF3-\uDCFF\uDD24-\uDE7F\uDEAA-\uDEAF\uDEB2-\uDEFF\uDF1D-\uDF26\uDF28-\uDF2F\uDF46-\uDF6F\uDF82-\uDFAF\uDFC5-\uDFDF\uDFF7-\uDFFF]|\uD804[\uDC00-\uDC02\uDC38-\uDC70\uDC73\uDC74\uDC76-\uDC82\uDCB0-\uDCCF\uDCE9-\uDD02\uDD27-\uDD43\uDD45\uDD46\uDD48-\uDD4F\uDD73-\uDD75\uDD77-\uDD82\uDDB3-\uDDC0\uDDC5-\uDDD9\uDDDB\uDDDD-\uDDFF\uDE12\uDE2C-\uDE3E\uDE41-\uDE7F\uDE87\uDE89\uDE8E\uDE9E\uDEA9-\uDEAF\uDEDF-\uDF04\uDF0D\uDF0E\uDF11\uDF12\uDF29\uDF31\uDF34\uDF3A-\uDF3C\uDF3E-\uDF4F\uDF51-\uDF5C\uDF62-\uDFFF]|\uD805[\uDC35-\uDC46\uDC4B-\uDC5E\uDC62-\uDC7F\uDCB0-\uDCC3\uDCC6\uDCC8-\uDD7F\uDDAF-\uDDD7\uDDDC-\uDDFF\uDE30-\uDE43\uDE45-\uDE7F\uDEAB-\uDEB7\uDEB9-\uDEFF\uDF1B-\uDF3F\uDF47-\uDFFF]|\uD806[\uDC2C-\uDC9F\uDCE0-\uDCFE\uDD07\uDD08\uDD0A\uDD0B\uDD14\uDD17\uDD30-\uDD3E\uDD40\uDD42-\uDD9F\uDDA8\uDDA9\uDDD1-\uDDE0\uDDE2\uDDE4-\uDDFF\uDE01-\uDE0A\uDE33-\uDE39\uDE3B-\uDE4F\uDE51-\uDE5B\uDE8A-\uDE9C\uDE9E-\uDEAF\uDEF9-\uDFFF]|\uD807[\uDC09\uDC2F-\uDC3F\uDC41-\uDC71\uDC90-\uDCFF\uDD07\uDD0A\uDD31-\uDD45\uDD47-\uDD5F\uDD66\uDD69\uDD8A-\uDD97\uDD99-\uDEDF\uDEF3-\uDF01\uDF03\uDF11\uDF34-\uDFAF\uDFB1-\uDFFF]|\uD808[\uDF9A-\uDFFF]|\uD809[\uDC00-\uDC7F\uDD44-\uDFFF]|[\uD80A\uD80E-\uD810\uD812-\uD819\uD824-\uD82A\uD82D\uD82E\uD830-\uD834\uD836\uD83C-\uD83F\uD87B-\uD87D\uD87F\uD889-\uDBFF][\uDC00-\uDFFF]|\uD80B[\uDC00-\uDF8F\uDFF1-\uDFFF]|\uD80D[\uDC30-\uDC40\uDC47-\uDFFF]|\uD811[\uDE47-\uDFFF]|\uD81A[\uDE39-\uDE3F\uDE5F-\uDE6F\uDEBF-\uDECF\uDEEE-\uDEFF\uDF30-\uDF3F\uDF44-\uDF62\uDF78-\uDF7C\uDF90-\uDFFF]|\uD81B[\uDC00-\uDE3F\uDE80-\uDEFF\uDF4B-\uDF4F\uDF51-\uDF92\uDFA0-\uDFDF\uDFE2\uDFE4-\uDFFF]|\uD821[\uDFF8-\uDFFF]|\uD823[\uDCD6-\uDCFF\uDD09-\uDFFF]|\uD82B[\uDC00-\uDFEF\uDFF4\uDFFC\uDFFF]|\uD82C[\uDD23-\uDD31\uDD33-\uDD4F\uDD53\uDD54\uDD56-\uDD63\uDD68-\uDD6F\uDEFC-\uDFFF]|\uD82F[\uDC6B-\uDC6F\uDC7D-\uDC7F\uDC89-\uDC8F\uDC9A-\uDFFF]|\uD835[\uDC55\uDC9D\uDCA0\uDCA1\uDCA3\uDCA4\uDCA7\uDCA8\uDCAD\uDCBA\uDCBC\uDCC4\uDD06\uDD0B\uDD0C\uDD15\uDD1D\uDD3A\uDD3F\uDD45\uDD47-\uDD49\uDD51\uDEA6\uDEA7\uDEC1\uDEDB\uDEFB\uDF15\uDF35\uDF4F\uDF6F\uDF89\uDFA9\uDFC3\uDFCC-\uDFFF]|\uD837[\uDC00-\uDEFF\uDF1F-\uDF24\uDF2B-\uDFFF]|\uD838[\uDC00-\uDC2F\uDC6E-\uDCFF\uDD2D-\uDD36\uDD3E-\uDD4D\uDD4F-\uDE8F\uDEAE-\uDEBF\uDEEC-\uDFFF]|\uD839[\uDC00-\uDCCF\uDCEC-\uDFDF\uDFE7\uDFEC\uDFEF\uDFFF]|\uD83A[\uDCC5-\uDCFF\uDD44-\uDD4A\uDD4C-\uDFFF]|\uD83B[\uDC00-\uDDFF\uDE04\uDE20\uDE23\uDE25\uDE26\uDE28\uDE33\uDE38\uDE3A\uDE3C-\uDE41\uDE43-\uDE46\uDE48\uDE4A\uDE4C\uDE50\uDE53\uDE55\uDE56\uDE58\uDE5A\uDE5C\uDE5E\uDE60\uDE63\uDE65\uDE66\uDE6B\uDE73\uDE78\uDE7D\uDE7F\uDE8A\uDE9C-\uDEA0\uDEA4\uDEAA\uDEBC-\uDFFF]|\uD869[\uDEE0-\uDEFF]|\uD86D[\uDF3A-\uDF3F]|\uD86E[\uDC1E\uDC1F]|\uD873[\uDEA2-\uDEAF]|\uD87A[\uDFE1-\uDFFF]|\uD87E[\uDE1E-\uDFFF]|\uD884[\uDF4B-\uDF4F]|\uD888[\uDFB0-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])+)/g;
 var recursivelyApplyWhiteSpace = function recursivelyApplyWhiteSpace(children) {
   return Children.map(children, function (child) {
     return /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {