@algolia/satellite 1.0.0-beta.160 → 1.0.0-beta.162

package/cjs/Dropdown/components/DropdownTitle.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type DropdownTitleProps = JSX.IntrinsicElements["h4"] & {
     children: ReactNode;
 };
-export declare const DropdownTitle: FunctionComponent<DropdownTitleProps>;
+export declare const DropdownTitle: VFC<DropdownTitleProps>;
 export default DropdownTitle;

package/cjs/Dropdown/components/DropdownToggleItem.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import { ToggleProps } from "../../Toggle";
 import type { IconComponentType } from "../../types";
 import { DropdownBaseItemProps } from "../useDropdownItemProps";
@@ -7,10 +7,5 @@ export interface DropdownToggleItemProps extends ToggleProps, DropdownBaseItemPr
     startIcon?: IconComponentType;
     children?: ReactNode;
 }
-export declare const DropdownToggleItem: {
-    (props: DropdownToggleItemProps): JSX.Element;
-    defaultProps: {
-        toggle: boolean;
-    };
-};
+export declare const DropdownToggleItem: VFC<DropdownToggleItemProps>;
 export default DropdownToggleItem;

package/cjs/Dropzone/Dropzone.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { VFC } from "react";
 import { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
 export declare type DropzoneLocale = {
     clearInput?: string;
@@ -16,5 +16,5 @@ export interface DropzoneBaseProps {
     locale?: DropzoneLocale;
 }
 export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "onDropAccepted" | "onDropRejected" | "multiple">;
-export declare const Dropzone: FC<DropzoneProps>;
+export declare const Dropzone: VFC<DropzoneProps>;
 export default Dropzone;

package/cjs/EmptyState/EmptyState.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { EmptyStateProps } from "./types";
 /**
  * Empty states are used when a list, table, chart or page has no items or data to show. This is an opportunity to provide explanation or guidance to help users progress. This can also be shown when a features hasn't been enable.
@@ -24,5 +24,5 @@ import type { EmptyStateProps } from "./types";
  * - Use illustrations thoughtfully
  * - Use only one primary call-to-action button
  */
-export declare const EmptyState: (props: EmptyStateProps) => JSX.Element;
+export declare const EmptyState: VFC<EmptyStateProps>;
 export default EmptyState;

package/cjs/Field/Field.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactChild, ReactNode } from "react";
+import type { ReactChild, ReactNode, VFC } from "react";
 import { FieldState } from "./FieldStateContext";
 export interface FieldProps {
     /** @ignore */
@@ -50,5 +50,5 @@ export interface FieldProps {
  * - If you need to ask users to provide optional information, mark the field optional by placing the text “(optional)” at the end of the field's label
  * - Don't mark required fields with asterisks
  */
-export declare const Field: FunctionComponent<FieldProps>;
+export declare const Field: VFC<FieldProps>;
 export default Field;

package/cjs/Flag/Flag.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent } from "react";
+import type { VFC } from "react";
 import type { Notification } from "./types";
 export declare type FlagLocale = Notification["locale"];
 export declare type FlagProps = Omit<Notification, "id" | "content">;
-export declare const Flag: FunctionComponent<FlagProps>;
+export declare const Flag: VFC<FlagProps>;
 export default Flag;

package/cjs/Flag/Flags.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { Notification } from "./types";
 export interface FlagsProps {
     /**
@@ -44,5 +44,5 @@ export interface FlagsProps {
  *
  * When there are multiple flags, they will stack on top of one another with the most recent flag on top. When a user dismisses a flag, any older flags 'below' will come to the top. Careful consideration should be taken to take into account the ordering and priority of flags in the stack. Never use dismissible and non-dismissible flags in a stack as flags that automatically dismiss can do so and not be visible to the user.
  */
-export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const Flags: VFC<FlagsProps>;
 export default Flags;

package/cjs/FlexGrid/FlexGrid.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type FlexGridDirection = "row" | "column";
 export declare type FlexGridAlignment = "leading" | "trailing" | "center" | "fill" | "baseline";
 export declare type FlexGridDistribution = "equalSpacing" | "leading" | "trailing" | "center" | "fill" | "fillEvenly";
@@ -47,5 +47,5 @@ export interface FlexGridProps {
     spacing?: FlexGridSpacing;
     children: ReactNode;
 }
-export declare const FlexGrid: FunctionComponent<FlexGridProps>;
+export declare const FlexGrid: VFC<FlexGridProps>;
 export default FlexGrid;

package/cjs/HelpUnderline/HelpUnderline.d.ts

@@ -1,12 +1,11 @@
-import type { FunctionComponent } from "react";
+import type { VFC } from "react";
 import { TooltipWrapperProps } from "../Tooltip";
-export interface HelpUnderlineProps {
+import type { TooltipWrapperBaseProps } from "../Tooltip/types";
+export declare type HelpUnderlineProps = {
     /** @ignore */
     className?: string;
-    placement?: TooltipWrapperProps["placement"];
-    tooltipClassName?: TooltipWrapperProps["tooltipClassName"];
     tooltipContent: TooltipWrapperProps["content"];
     children: string;
-}
-export declare const HelpUnderline: FunctionComponent<HelpUnderlineProps>;
+} & Omit<TooltipWrapperBaseProps, "children">;
+export declare const HelpUnderline: VFC<HelpUnderlineProps>;
 export default HelpUnderline;

package/cjs/HelpUnderline/HelpUnderline.js

@@ -5,29 +5,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.HelpUnderline = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _Tooltip = require("../Tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
+var _excluded = ["className", "children", "tooltipClassName", "tooltipContent"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HelpUnderline = function HelpUnderline(_ref) {
   var className = _ref.className,
     children = _ref.children,
     tooltipClassName = _ref.tooltipClassName,
     tooltipContent = _ref.tooltipContent,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "bottom" : _ref$placement;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
-    wrapperClassName: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["leading-inherit"]))), className),
-    tooltipClassName: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["max-w-64"]))), tooltipClassName),
-    content: tooltipContent,
-    placement: placement,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, _objectSpread(_objectSpread({
+    tooltipClassName: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["max-w-64"]))), tooltipClassName),
+    content: tooltipContent
+  }, props), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["help-underline"]))),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["help-underline leading-inherit"]))), className),
       children: children
     })
-  });
+  }));
 };
 exports.HelpUnderline = HelpUnderline;
 var _default = HelpUnderline;

package/cjs/Input/Input.tailwind.js

@@ -16,11 +16,17 @@ var inputPlugin = plugin(function (_ref) {
       fontSize: theme("fontSize.base"),
       lineHeight: theme("lineHeight.base"),
       backgroundColor: theme("colors.white"),
-      border: "1px solid ".concat(theme("colors.grey.200")),
+      border: "1px solid ".concat(theme("colors.grey.500")),
       borderRadius: theme("borderRadius.DEFAULT"),
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       overflow: "hidden",
       transition: "all 100ms ease-in-out",
+      "&:not(.input-disabled):hover": {
+        borderColor: theme("colors.grey.600"),
+        ".input-spinner-button": {
+          borderColor: theme("colors.grey.600")
+        }
+      },
       input: {
         flex: "1",
         minWidth: "0px",
@@ -44,7 +50,10 @@ var inputPlugin = plugin(function (_ref) {
     },
     ".input-focused, .input:focus-within": {
       borderColor: theme("colors.accent.600"),
-      boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5"))
+      boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
+      ".input-spinner-button": {
+        borderColor: theme("colors.accent.600")
+      }
     },
     ".input-disabled": {
       cursor: "not-allowed",
@@ -67,7 +76,17 @@ var inputPlugin = plugin(function (_ref) {
     },
     ".input-invalid:not(.input-disabled)": {
       backgroundColor: theme("colors.red.100"),
-      borderColor: theme("colors.red.700")
+      borderColor: theme("colors.red.700"),
+      ".input-spinner-button": {
+        background: theme("colors.red.100"),
+        borderColor: theme("colors.red.700")
+      },
+      "&:hover": {
+        borderColor: theme("colors.red.800"),
+        ".input-spinner-button": {
+          borderColor: theme("colors.red.800")
+        }
+      }
     }
   });
   addComponents({
@@ -80,7 +99,7 @@ var inputPlugin = plugin(function (_ref) {
     },
     ".input-spinner-button": {
       background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)"),
-      borderColor: theme("colors.grey.200"),
+      borderColor: theme("colors.grey.500"),
       borderStyle: "solid",
       borderLeftWidth: "1px",
       flex: "1",
@@ -92,6 +111,11 @@ var inputPlugin = plugin(function (_ref) {
       },
       "&:not(:last-child)": {
         borderBottomWidth: "1px"
+      },
+      // This is to counterbalance the width of the first button's bottom border
+      // so that the two buttons have the same height.
+      "&:last-child": {
+        paddingTop: "1px"
       }
     }
   });

package/cjs/Insert/Insert.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import { BadgeVariants } from "../Badge";
 declare type InsertContext = {
     label: string;
@@ -41,5 +41,5 @@ export interface InsertProps {
 * ## Accessibility
 * TODO
  */
-export declare const Insert: FC<InsertProps>;
+export declare const Insert: VFC<InsertProps>;
 export default Insert;

package/cjs/KeyboardKey/KeyboardKey.d.ts

@@ -1,7 +1,7 @@
-import type { FC } from "react";
+import type { VFC } from "react";
 export interface KeyboardKeyProps {
     /** @ignore */
     className?: string;
     value: string;
 }
-export declare const KeyboardKey: FC<KeyboardKeyProps>;
+export declare const KeyboardKey: VFC<KeyboardKeyProps>;

package/cjs/Medallion/Medallion.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { IconComponentType } from "../types";
 import type { MedallionSize, MedallionVariant } from "./types";
 export interface MedallionProps {
@@ -7,5 +7,5 @@ export interface MedallionProps {
     size?: MedallionSize;
     className?: string;
 }
-export declare const Medallion: ({ icon: Icon, variant, size, className }: MedallionProps) => JSX.Element;
+export declare const Medallion: VFC<MedallionProps>;
 export default Medallion;

package/cjs/Modal/Modal.d.ts

@@ -1,5 +1,7 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import type { XOR } from "../types";
+import ModalFooter from "./components/ModalFooter";
+import ModalSection from "./components/ModalSection";
 export declare type ModalSizeVariant = "medium" | "large";
 export declare type ModalLocale = {
     dismissText?: string;
@@ -46,9 +48,9 @@ export declare type ModalProps = XOR<ModalControlledProps, ModalUncontrolledProp
     autoFocusOnOpenElement?: HTMLElement | null | false;
     children: ReactNode;
 };
-export declare const Modal: {
-    ({ title, className, children, open, onDismiss, fullBleed, animate, hideCloseIcon, size, centerY, autoFocusOnOpenElement, autoFocusOnCloseElement, triggerButton, locale: propsLocale, }: ModalProps): JSX.Element;
-    Footer: import("react").FunctionComponent<import("./components/ModalFooter").ModalFooterProps>;
-    Section: ({ children, className, fullBleed }: import("./components/ModalSection").ModalSectionProps) => JSX.Element;
+declare type ModalSubComponents = {
+    Footer: typeof ModalFooter;
+    Section: typeof ModalSection;
 };
+export declare const Modal: VFC<ModalProps> & ModalSubComponents;
 export default Modal;

package/cjs/Modal/components/ModalFooter.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent, HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode, VFC } from "react";
 export declare type ModalFooterProps = HTMLAttributes<HTMLElement> & {
     children: ReactNode;
 };
-export declare const ModalFooter: FunctionComponent<ModalFooterProps>;
+export declare const ModalFooter: VFC<ModalFooterProps>;
 export default ModalFooter;

package/cjs/Modal/components/ModalSection.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type ModalSectionProps = {
     children: ReactNode;
     /** @ignore */
@@ -6,5 +6,5 @@ export declare type ModalSectionProps = {
     /** Negates the modal default horizontal padding when true */
     fullBleed?: boolean;
 };
-export declare const ModalSection: ({ children, className, fullBleed }: ModalSectionProps) => JSX.Element;
+export declare const ModalSection: VFC<ModalSectionProps>;
 export default ModalSection;

package/cjs/Pagination/CompactPagination/CompactPagination.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 export declare type CompactPaginationLabel = "complete" | "compact" | "none";
 export declare type CompactPaginationLocale = {
     goToFirstPage?: string;
@@ -27,5 +27,5 @@ export declare type CompactPaginationProps = DeterminateCompactPaginationProps |
 export declare const isDeterminateCompactPaginationProps: (props: CompactPaginationProps) => props is DeterminateCompactPaginationProps;
 /** @ignore */
 export declare const isIndeterminateCompactPaginationProps: (props: CompactPaginationProps) => props is IndeterminateCompactPaginationProps;
-export declare const CompactPagination: (props: CompactPaginationProps) => JSX.Element;
+export declare const CompactPagination: VFC<CompactPaginationProps>;
 export default CompactPagination;

package/cjs/Pagination/Pagination/Pagination.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 export declare type PaginationLocale = {
     goToPage?(page: number): string;
     goToNextPage?: string;
@@ -18,5 +18,5 @@ export interface PaginationProps {
  * - Don't use on list with less than 20 items
  * - Place the pagination at the bottom of the split item
  */
-export declare const Pagination: ({ currentPage, nbPages, onChange, maxButtons: maxButtonsParam, locale: propsLocale, }: PaginationProps) => JSX.Element;
+export declare const Pagination: VFC<PaginationProps>;
 export default Pagination;

package/cjs/ProgressBar/ProgressBar.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from "react";
+import type { HTMLAttributes, VFC } from "react";
 export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
     barClassName?: string;
     value: number;
@@ -9,5 +9,5 @@ export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
  * - Progress bars show an indication of how much of the task has been completed and how much is still left.
  * - You should indicate either a percentage or other numeric values (such as - 234/4092 queries processed)
  */
-export declare const ProgressBar: ({ value, className, barClassName, ...props }: ProgressBarProps) => JSX.Element;
+export declare const ProgressBar: VFC<ProgressBarProps>;
 export default ProgressBar;

package/cjs/ProgressSpinner/ProgressSpinner.d.ts

@@ -1,9 +1,9 @@
-import type { SVGAttributes } from "react";
+import type { SVGAttributes, VFC } from "react";
 export declare type ProgressSpinnerAlign = "left" | "center" | "right";
 export interface ProgressSpinnerProps extends SVGAttributes<SVGSVGElement> {
     size?: number;
     thickness?: number;
     align?: ProgressSpinnerAlign;
 }
-export declare const ProgressSpinner: ({ className, size, thickness, align, ...svgProps }: ProgressSpinnerProps) => JSX.Element;
+export declare const ProgressSpinner: VFC<ProgressSpinnerProps>;
 export default ProgressSpinner;

package/cjs/RadioGroup/RadioButton.tailwind.js

@@ -15,9 +15,12 @@ var radioButtonPlugin = plugin(function (_ref) {
       appearance: "none",
       outline: "0px",
       background: theme("colors.white"),
-      border: "1px solid ".concat(theme("colors.grey.200")),
+      border: "1px solid ".concat(theme("colors.grey.500")),
       borderRadius: "50%",
       boxShadow: "inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.3)),
+      "&:hover": {
+        borderColor: theme("colors.grey.600")
+      },
       "&:focus": {
         borderColor: theme("colors.accent.600"),
         boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5"))

package/cjs/RadioGroup/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export interface RadioGroupProps {
     className?: string;
     name?: string;
@@ -17,7 +17,10 @@ export interface RadioGroupItemProps {
     disabled?: boolean;
     children?: ReactNode;
 }
-export declare const RadioGroupItem: FunctionComponent<RadioGroupItemProps>;
+declare type RadioGroupSubComponents = {
+    Item: VFC<RadioGroupItemProps>;
+};
+export declare const RadioGroupItem: VFC<RadioGroupItemProps>;
 /**
  * Use radio buttons when users have to make a single selection from a list of options.
  *
@@ -33,8 +36,5 @@ export declare const RadioGroupItem: FunctionComponent<RadioGroupItemProps>;
  * - If you need to have an unselected state, just add a radio button with a *None* option.
  * - Sometimes, you might want to include an *Other* option (Usually followed by a text input if a user needs to provide a specific answer)
  */
-export declare const RadioGroup: {
-    ({ className, name, value, disabled, textPosition, children, onChange }: RadioGroupProps): JSX.Element;
-    Item: FunctionComponent<RadioGroupItemProps>;
-};
+export declare const RadioGroup: VFC<RadioGroupProps> & RadioGroupSubComponents;
 export default RadioGroup;

package/cjs/RangeSlider/RangeSlider.js

@@ -27,7 +27,7 @@ var getThumbCount = function getThumbCount(value) {
 var ThumbGroove = function ThumbGroove(_ref) {
   var className = _ref.className;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-3 w-px bg-grey-200"]))), className)
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-3 w-px bg-grey-500 group-hover:bg-grey-600"]))), className)
   });
 };
 
@@ -87,7 +87,7 @@ var RangeSlider = function RangeSlider(_ref2) {
       })
     }), Array(thumbsCount).fill(undefined).map(function (_, idx) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSlider.SliderThumb, {
-        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n              absolute -translate-x-1.5 -translate-y-3\n              w-3 h-6 rounded-[2px] border border-grey-200\n              bg-white bg-gradient-to-b from-white to-grey-50 shadow-[0_1px_0_0_rgb(35_38_59_/_5%)]\n            "]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["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            "]))),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbGroove, {
           className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["absolute top-1.5 right-1.5"])))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbGroove, {

package/cjs/Satellite/Satellite.d.ts

@@ -1,4 +1,4 @@
-import { type FunctionComponent, type ReactNode } from "react";
+import { type ReactNode, type VFC } from "react";
 import type { ComponentsLocales } from "./locale";
 import type { SatelliteRouter } from "./SatelliteRouter";
 export interface SatelliteProps {
@@ -7,6 +7,5 @@ export interface SatelliteProps {
     portalTarget?: HTMLElement;
     children: ReactNode;
 }
-export declare const DEFAULT_PORTAL_TARGET_ID = "satellite-portal";
-export declare const Satellite: FunctionComponent<SatelliteProps>;
+export declare const Satellite: VFC<SatelliteProps>;
 export default Satellite;

package/cjs/Satellite/Satellite.js

@@ -4,38 +4,49 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Satellite = exports.DEFAULT_PORTAL_TARGET_ID = void 0;
+exports["default"] = exports.Satellite = void 0;
 var _react = require("react");
 var _SatelliteContext = _interopRequireDefault(require("./SatelliteContext"));
 var _SatelliteRouter = require("./SatelliteRouter");
 var _jsxRuntime = require("react/jsx-runtime");
-var DEFAULT_PORTAL_TARGET_ID = "satellite-portal";
-exports.DEFAULT_PORTAL_TARGET_ID = DEFAULT_PORTAL_TARGET_ID;
-var portalElement;
-var getPortalElement = function getPortalElement() {
-  if (typeof document === "undefined") return;
-  if (!portalElement) {
-    var element = document.createElement("div");
-    element.setAttribute("id", DEFAULT_PORTAL_TARGET_ID);
-    document.body.appendChild(element);
-    portalElement = element;
+var DEFAULT_PORTAL_ID = "satellite-portal";
+var createDefaultPortalTarget = function createDefaultPortalTarget() {
+  if (typeof document === "undefined") {
+    return null;
   }
-  return portalElement;
+  var div = document.createElement("div");
+  div.setAttribute("id", DEFAULT_PORTAL_ID);
+  div.setAttribute("data-testid", DEFAULT_PORTAL_ID);
+  return div;
+};
+var isDefaultPortalTarget = function isDefaultPortalTarget(el) {
+  return el.getAttribute("id") === DEFAULT_PORTAL_ID;
 };
 var Satellite = function Satellite(_ref) {
+  var _ref2;
   var _ref$router = _ref.router,
     router = _ref$router === void 0 ? _SatelliteRouter.router : _ref$router,
     locales = _ref.locales,
     _ref$portalTarget = _ref.portalTarget,
-    portalTarget = _ref$portalTarget === void 0 ? getPortalElement() : _ref$portalTarget,
+    customPortalTarget = _ref$portalTarget === void 0 ? null : _ref$portalTarget,
     children = _ref.children;
+  var portalTarget = (_ref2 = customPortalTarget !== null && customPortalTarget !== void 0 ? customPortalTarget : document.getElementById(DEFAULT_PORTAL_ID)) !== null && _ref2 !== void 0 ? _ref2 : createDefaultPortalTarget();
+
+  // Auto append / remove default target as necessary
+  (0, _react.useEffect)(function () {
+    if (!portalTarget || !isDefaultPortalTarget(portalTarget)) return;
+    document.body.appendChild(portalTarget);
+    return function () {
+      return portalTarget.remove();
+    };
+  }, [portalTarget]);
+
+  // Radix adds pointer-events: none; on the body for its modal, so we need to reenable it for other portaled elements (tooltips, menus, autocomplete)
   (0, _react.useEffect)(function () {
-    if (!portalTarget) return;
+    if (!portalTarget || typeof document === "undefined") return;
     if (portalTarget === document.body) {
       console.warn("Avoid using the document body as a portal target.");
     }
-
-    // Radix adds pointer-events: none; on the body for its modal, so we need to reenable it for other portaled elements (tooltips, menus, autocomplete)
     portalTarget.style.pointerEvents = "auto";
   }, [portalTarget]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SatelliteContext["default"].Provider, {

package/cjs/Satellite/SatelliteContext.d.ts

@@ -3,8 +3,8 @@ import type { ComponentsLocales } from "./locale";
 import { SatelliteRouter } from "./SatelliteRouter";
 export interface SatelliteContextType {
     router: SatelliteRouter;
+    portalTarget: HTMLElement | null;
     locales?: ComponentsLocales;
-    portalTarget?: HTMLElement;
 }
 export declare const SatelliteContext: import("react").Context<SatelliteContextType>;
 export declare const useSatelliteContext: () => SatelliteContextType;

package/cjs/Satellite/SatelliteContext.js

@@ -12,7 +12,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DEFAULT_CONTEXT = {
   router: _SatelliteRouter.router,
-  locales: {}
+  locales: {},
+  portalTarget: null
 };
 var SatelliteContext = /*#__PURE__*/(0, _react.createContext)(DEFAULT_CONTEXT);
 exports.SatelliteContext = SatelliteContext;

package/cjs/ScrollIndicator/ScrollIndicator.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, FunctionComponent, ReactHTML, ReactNode } from "react";
+import type { CSSProperties, ReactHTML, ReactNode, VFC } from "react";
 export declare type ScrollIndicatorVariant = "light" | "dark";
 export interface ScrollIndicatorProps {
     wrapperClassName?: string;
@@ -10,5 +10,5 @@ export interface ScrollIndicatorProps {
     variant?: ScrollIndicatorVariant;
     children: ReactNode;
 }
-export declare const ScrollIndicator: FunctionComponent<ScrollIndicatorProps>;
+export declare const ScrollIndicator: VFC<ScrollIndicatorProps>;
 export default ScrollIndicator;

package/cjs/Select/Select.tailwind.js

@@ -23,7 +23,7 @@ var selectPlugin = plugin(function (_ref) {
       backgroundPosition: "right ".concat(theme("spacing.4"), " center, 0 0"),
       backgroundRepeat: "no-repeat",
       borderRadius: theme("borderRadius.DEFAULT"),
-      border: "1px solid ".concat(theme("colors.grey.200")),
+      border: "1px solid ".concat(theme("colors.grey.500")),
       boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5")),
       "&::-moz-focus-inner, &:-moz-focusring": {
         outline: "none",
@@ -44,7 +44,7 @@ var selectPlugin = plugin(function (_ref) {
       },
       "&:hover": {
         backgroundImage: "\n          ".concat(selectIconBG(theme("colors.grey.500")), ",\n          linear-gradient(-180deg, ").concat(theme("colors.grey.50"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n        "),
-        borderColor: theme("colors.grey.200")
+        borderColor: theme("colors.grey.600")
       },
       "&:focus": {
         backgroundImage: "\n          ".concat(selectIconBG(theme("colors.grey.500")), ",\n          linear-gradient(-180deg, ").concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n        "),

package/cjs/Separator/Separator.d.ts

@@ -0,0 +1,8 @@
+import * as RadixSeparator from "@radix-ui/react-separator";
+import type { VFC } from "react";
+export interface SeparatorProps {
+    className?: string;
+    orientation?: RadixSeparator.SeparatorProps["orientation"];
+}
+export declare const Separator: VFC<SeparatorProps>;
+export default Separator;

package/cjs/Separator/Separator.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Separator = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var RadixSeparator = _interopRequireWildcard(require("@radix-ui/react-separator"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var Separator = function Separator(_ref) {
+  var className = _ref.className,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixSeparator.Root, {
+    decorative: true,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["separator"]))), className),
+    orientation: orientation
+  });
+};
+exports.Separator = Separator;
+var _default = Separator;
+exports["default"] = _default;