@algolia/satellite 1.0.0-beta.161 → 1.0.0-beta.163

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

@@ -1,4 +1,4 @@
-import type { FC, MouseEvent, ReactNode } from "react";
+import type { MouseEvent, ReactNode, VFC } from "react";
 export interface DropdownCollapsibleItemProps {
     title: ReactNode;
     name?: string;
@@ -6,5 +6,5 @@ export interface DropdownCollapsibleItemProps {
     onClick?: (evt: MouseEvent<HTMLElement>, name: string, expandedItems: readonly string[]) => void;
     children: ReactNode;
 }
-export declare const DropdownCollapsibleItem: FC<DropdownCollapsibleItemProps>;
+export declare const DropdownCollapsibleItem: VFC<DropdownCollapsibleItemProps>;
 export default DropdownCollapsibleItem;

package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type DropdownCollapsibleItemsGroupProps = {
     expandedItems: string[];
     onItemClick(name: string): void;
     children: ReactNode;
 };
-export declare const DropdownCollapsibleItemsGroup: ({ expandedItems, onItemClick, children, }: DropdownCollapsibleItemsGroupProps) => JSX.Element;
+export declare const DropdownCollapsibleItemsGroup: VFC<DropdownCollapsibleItemsGroupProps>;

package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type DropdownCollapsibleItemsMultiGroupProps = {
     initialExpandedItems?: string[];
     children: ReactNode;
@@ -6,4 +6,4 @@ export declare type DropdownCollapsibleItemsMultiGroupProps = {
 /**
  * Multiple collapsible item can be open at a given time
  */
-export declare const DropdownCollapsibleItemsMultiGroup: ({ initialExpandedItems, children, }: DropdownCollapsibleItemsMultiGroupProps) => JSX.Element;
+export declare const DropdownCollapsibleItemsMultiGroup: VFC<DropdownCollapsibleItemsMultiGroupProps>;

package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type DropdownCollapsibleItemsExclusiveGroupProps = {
     initialExpandedItem?: string;
     children: ReactNode;
@@ -6,4 +6,4 @@ export declare type DropdownCollapsibleItemsExclusiveGroupProps = {
 /**
  * Only one collapsible item can be open at a given time (unless you manually override)
  */
-export declare const DropdownCollapsibleItemsSingleGroup: ({ initialExpandedItem, children, }: DropdownCollapsibleItemsExclusiveGroupProps) => JSX.Element;
+export declare const DropdownCollapsibleItemsSingleGroup: VFC<DropdownCollapsibleItemsExclusiveGroupProps>;

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

@@ -1,7 +1,7 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 declare type DropdownFooterItemProps = {
     className?: string;
     children: ReactNode;
 };
-export declare const DropdownFooterItem: ({ children, className, ...props }: DropdownFooterItemProps) => JSX.Element | null;
+export declare const DropdownFooterItem: VFC<DropdownFooterItemProps>;
 export default DropdownFooterItem;

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

@@ -1,15 +1,10 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { IconComponentType } from "../../types";
-import { DropdownBaseItemProps } from "../useDropdownItemProps";
+import type { DropdownBaseItemProps } from "../useDropdownItemProps";
 export declare type DropdownLinkItemProps = DropdownBaseItemProps<HTMLAnchorElement> & JSX.IntrinsicElements["a"] & {
     href: string;
     /** Left aligned icon */
     startIcon?: IconComponentType;
 };
-export declare const DropdownLinkItem: {
-    (props: DropdownLinkItemProps): JSX.Element;
-    defaultProps: {
-        toggle: boolean;
-    };
-};
+export declare const DropdownLinkItem: VFC<DropdownLinkItemProps>;
 export default DropdownLinkItem;

package/cjs/Dropdown/components/DropdownLinkItem.js

@@ -9,17 +9,19 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _reactFeather = require("react-feather");
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 var _useLinkProps = _interopRequireDefault(require("../../utils/useLinkProps"));
 var _useDropdownItemProps = _interopRequireDefault(require("../useDropdownItemProps"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var _excluded = ["toggle", "disabled", "startIcon", "className", "children"];
 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 DropdownLinkItem = function DropdownLinkItem(props) {
   var dropdownItemProps = (0, _useDropdownItemProps["default"])(props);
   var linkProps = (0, _useLinkProps["default"])(_objectSpread(_objectSpread({}, props), dropdownItemProps));
+  var isExternalLink = linkProps.target === "_blank";
   // `toggle` and `disabled` is destructured here because we don't want them passed to the `a`
   var _props$dropdownItemPr = _objectSpread(_objectSpread(_objectSpread({}, props), dropdownItemProps), linkProps),
     toggle = _props$dropdownItemPr.toggle,
@@ -37,6 +39,9 @@ var DropdownLinkItem = function DropdownLinkItem(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full truncate"]))),
       children: children
+    }), isExternalLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ExternalLink, {
+      className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["ml-1 shrink-0"]))),
+      size: "1em"
     })]
   }));
 };

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

@@ -1,13 +1,8 @@
-import type { ReactNode } from "react";
-import { RadioButtonProps } from "../../RadioGroup";
-import { DropdownBaseItemProps } from "../useDropdownItemProps";
+import type { ReactNode, VFC } from "react";
+import type { RadioButtonProps } from "../../RadioGroup";
+import type { DropdownBaseItemProps } from "../useDropdownItemProps";
 export interface DropdownRadioItemProps extends RadioButtonProps, DropdownBaseItemProps<HTMLInputElement> {
     children?: ReactNode;
 }
-export declare const DropdownRadioItem: {
-    (props: DropdownRadioItemProps): JSX.Element;
-    defaultProps: {
-        toggle: boolean;
-    };
-};
+export declare const DropdownRadioItem: VFC<DropdownRadioItemProps>;
 export default DropdownRadioItem;

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,16 +1,11 @@
-import type { ReactNode } from "react";
-import { ToggleProps } from "../../Toggle";
+import type { ReactNode, VFC } from "react";
+import type { ToggleProps } from "../../Toggle";
 import type { IconComponentType } from "../../types";
-import { DropdownBaseItemProps } from "../useDropdownItemProps";
+import type { DropdownBaseItemProps } from "../useDropdownItemProps";
 export interface DropdownToggleItemProps extends ToggleProps, DropdownBaseItemProps<HTMLInputElement> {
     /** Left aligned icon */
     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,7 +1,8 @@
-import type { FC } from "react";
-import { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
+import type { VFC } from "react";
+import type { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
 export declare type DropzoneLocale = {
     clearInput?: string;
+    placeholder?: (multiple: boolean) => string;
 };
 export interface DropzoneBaseProps {
     id?: string;
@@ -16,5 +17,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/Dropzone/Dropzone.js

@@ -22,7 +22,7 @@ var _formatters = require("../utils/formatters");
 var _uniqueId = require("../utils/uniqueId");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onChange", "className", "locale"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 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 DropzoneFileItem = function DropzoneFileItem(_ref) {
@@ -32,22 +32,20 @@ var DropzoneFileItem = function DropzoneFileItem(_ref) {
     children: [file.name, " - ", (0, _formatters.formatHumanSize)(file.size)]
   });
 };
-var STATUS_CLASSNAMES = {
-  "default": "",
-  invalid: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["input-invalid"]))),
-  validated: ""
-};
 var DEFAULT_DROPZONE_LOCALE = {
-  clearInput: "Clear input"
+  clearInput: "Clear input",
+  placeholder: function placeholder(multiple) {
+    return "Drop ".concat(multiple ? "files" : "file", " here or click to select.");
+  }
 };
 var InvalidIcon = function InvalidIcon() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
-    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
   });
 };
 var ValidatedIcon = function ValidatedIcon() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.Check, {
-    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
   });
 };
 var Dropzone = function Dropzone(_ref2) {
@@ -98,10 +96,11 @@ var Dropzone = function Dropzone(_ref2) {
     return id !== null && id !== void 0 ? id : (0, _uniqueId.uniqueId)("dropzone");
   }, [id]);
   var isValueEmpty = files.length === 0;
-  var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
+  var isInvalid = status === "invalid";
+  var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, getRootProps({
     "aria-controls": dropzoneId,
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n            input group\n            ", "\n            ", "\n            min-h-16 cursor-pointer\n            ", ""])), focused && "input-focused", disabled && "input-disabled cursor-not-allowed", isDragReject ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500" : null), STATUS_CLASSNAMES[status], className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n            relative flex items-center group/dropzone\n            border border-grey-500 rounded\n            shadow-field\n            overflow-hidden transition-all ease-in-out delay-100\n            focus-within:border-accent-600 focus-within:shadow-field-focused\n            min-h-16\n            ", "\n            ", "\n            ", "\n            ", ""])), focused && "border-accent-600 shadow-field-focused", disabled ? "cursor-not-allowed border-grey-200/30 shadow-none bg-gradient-to-b from-white to-grey-100" : "cursor-pointer", isDragReject && !disabled ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500 cursor-pointer" : null, isInvalid ? "bg-red-100 border-red-700 hover:bg-red-50" : "bg-white hover:bg-grey-50"), className),
     onClick: function onClick(evt) {
       // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
       if (evt.target.closest("label")) {
@@ -118,7 +117,7 @@ var Dropzone = function Dropzone(_ref2) {
         return setFocused(false);
       }
     }))), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
       children: files.length > 0 ? files.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
         children: files.map(function (file) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
@@ -130,19 +129,19 @@ var Dropzone = function Dropzone(_ref2) {
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DropzoneFileItem, {
         file: files[0]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center space-x-2 display-body"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center space-x-2 display-body"]))),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.UploadCloud, {
           size: "1rem",
-          className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
+          className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
-          children: placeholder || "Drop ".concat(multiple ? "files" : "file", " here or click to select.")
+          className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
+          children: placeholder || locale.placeholder(multiple)
         })]
       })
     }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])([""]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])([""]))),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-        className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
+        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover/dropzone:visible"),
         title: locale.clearInput,
         icon: _reactFeather.X,
         variant: "subtle",

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,5 +1,5 @@
-import type { FunctionComponent, ReactChild, ReactNode } from "react";
-import { FieldState } from "./FieldStateContext";
+import type { ReactChild, ReactNode, VFC } from "react";
+import type { FieldState } from "./FieldStateContext";
 export interface FieldProps {
     /** @ignore */
     className?: string;
@@ -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,5 +1,5 @@
-import type { FunctionComponent } from "react";
-import { TooltipWrapperProps } from "../Tooltip";
+import type { VFC } from "react";
+import type { TooltipWrapperProps } from "../Tooltip";
 import type { TooltipWrapperBaseProps } from "../Tooltip/types";
 export declare type HelpUnderlineProps = {
     /** @ignore */
@@ -7,5 +7,5 @@ export declare type HelpUnderlineProps = {
     tooltipContent: TooltipWrapperProps["content"];
     children: string;
 } & Omit<TooltipWrapperBaseProps, "children">;
-export declare const HelpUnderline: FunctionComponent<HelpUnderlineProps>;
+export declare const HelpUnderline: VFC<HelpUnderlineProps>;
 export default HelpUnderline;

package/cjs/HelpUnderline/HelpUnderline.js

@@ -27,7 +27,7 @@ var HelpUnderline = function HelpUnderline(_ref) {
     content: tooltipContent
   }, props), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["help-underline leading-inherit"]))), className),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["help-underline"]))), className),
       children: children
     })
   }));

package/cjs/Input/Input.tailwind.js

@@ -21,7 +21,7 @@ var inputPlugin = plugin(function (_ref) {
       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": {
+      "&:not(.input-disabled, .input-focused):hover": {
         borderColor: theme("colors.grey.600"),
         ".input-spinner-button": {
           borderColor: theme("colors.grey.600")

package/cjs/Insert/Insert.d.ts

@@ -1,5 +1,5 @@
-import type { FC, ReactNode } from "react";
-import { BadgeVariants } from "../Badge";
+import type { ReactNode, VFC } from "react";
+import type { BadgeVariants } from "../Badge";
 declare type InsertContext = {
     label: string;
     variant?: BadgeVariants;
@@ -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 } 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: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>>;
 export default ProgressBar;

package/cjs/ProgressBar/ProgressBar.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
@@ -21,12 +22,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * - 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)
  */
-var ProgressBar = function ProgressBar(_ref) {
+var ProgressBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var value = _ref.value,
     className = _ref.className,
     barClassName = _ref.barClassName,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["progress-bar"]))), className),
     role: "progressbar",
     "aria-valuenow": value,
@@ -40,7 +43,8 @@ var ProgressBar = function ProgressBar(_ref) {
       }
     })
   }));
-};
+});
 exports.ProgressBar = ProgressBar;
+ProgressBar.displayName = "ProgressBar";
 var _default = ProgressBar;
 exports["default"] = _default;

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/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.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+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> {
@@ -20,6 +20,7 @@ export interface RangeSliderProps<Value extends RangeSliderValue = number> {
     track1Color?: string;
     track2Color?: string;
 }
+declare const RangeSliderInternal: <Value extends RangeSliderValue = number>({ className, value, defaultValue, onChange, onCommit, disabled, min, max, track1Color, track2Color, ...otherProps }: RangeSliderProps<Value>, ref: ForwardedRef<HTMLSpanElement>) => JSX.Element;
 /**
  * A range slider is an input field where users select one or two numeric values within a given range (minimum and maximum values).
  *
@@ -27,8 +28,9 @@ export interface RangeSliderProps<Value extends RangeSliderValue = number> {
  * - Provide min and max value whenever possible
  * - Provide text input for better accessibility
  */
-export declare const RangeSlider: {
-    <Value extends RangeSliderValue = number>({ className, value, defaultValue, onChange, onCommit, disabled, min, max, track1Color, track2Color, ...otherProps }: RangeSliderProps<Value>): JSX.Element;
-    displayName: string;
+export declare const RangeSlider: (<Value extends RangeSliderValue>(props: RangeSliderProps<Value> & {
+    ref?: ForwardedRef<HTMLSpanElement> | undefined;
+}) => ReturnType<typeof RangeSliderInternal>) & {
+    displayName?: string | undefined;
 };
 export default RangeSlider;