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

package/esm/Input/Input.tailwind.js

@@ -17,11 +17,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",
@@ -45,7 +51,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",
@@ -68,7 +77,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({
@@ -81,7 +100,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",
@@ -93,6 +112,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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/RadioGroup/RadioButton.tailwind.js

@@ -16,9 +16,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/esm/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/esm/RangeSlider/RangeSlider.js

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

package/esm/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/esm/Satellite/Satellite.js

@@ -2,32 +2,44 @@ import { useEffect } from "react";
 import SatelliteContext from "./SatelliteContext";
 import { router as defaultRouter } from "./SatelliteRouter";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var DEFAULT_PORTAL_TARGET_ID = "satellite-portal";
-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;
 };
 export var Satellite = function Satellite(_ref) {
+  var _ref2;
   var _ref$router = _ref.router,
     router = _ref$router === void 0 ? defaultRouter : _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
+  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)
   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__*/_jsx(SatelliteContext.Provider, {

package/esm/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/esm/Satellite/SatelliteContext.js

@@ -5,7 +5,8 @@ import { createContext, useContext } from "react";
 import { router } from "./SatelliteRouter";
 var DEFAULT_CONTEXT = {
   router: router,
-  locales: {}
+  locales: {},
+  portalTarget: null
 };
 export var SatelliteContext = /*#__PURE__*/createContext(DEFAULT_CONTEXT);
 export var useSatelliteContext = function useSatelliteContext() {

package/esm/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/esm/Select/Select.tailwind.js

@@ -24,7 +24,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",
@@ -45,7 +45,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/esm/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/esm/Separator/Separator.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import * as RadixSeparator from "@radix-ui/react-separator";
+import cx from "clsx";
+import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Separator = function Separator(_ref) {
+  var className = _ref.className,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation;
+  return /*#__PURE__*/_jsx(RadixSeparator.Root, {
+    decorative: true,
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["separator"]))), className),
+    orientation: orientation
+  });
+};
+export default Separator;

package/esm/Separator/Separator.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = separatorPlugin;
+declare const separatorPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss").Config> | undefined;
+};

package/esm/Separator/Separator.tailwind.js

@@ -0,0 +1,24 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var separatorPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  var margin = theme("spacing.4");
+  addComponents({
+    ".separator": {
+      backgroundColor: theme("colors.grey.200"),
+      '&[data-orientation="horizontal"]': {
+        height: "1px",
+        width: "100%",
+        margin: "".concat(margin, " 0")
+      },
+      '&[data-orientation="vertical"]': {
+        height: "100%",
+        width: "1px",
+        margin: "0 ".concat(margin)
+      }
+    }
+  });
+});
+export default separatorPlugin;

package/esm/Separator/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Separator";
+export { default } from "./Separator";

package/esm/Separator/index.js

@@ -0,0 +1,2 @@
+export * from "./Separator";
+export { default } from "./Separator";

package/esm/Sidebar/Sidebar.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import type { SidebarLocale, SidebarLocation, SidebarVariant } from "./types";
 export interface SidebarProps {
     id?: string;
@@ -32,4 +32,4 @@ export interface SidebarProps {
     location: SidebarLocation;
     children?: ReactNode;
 }
-export declare const Sidebar: FC<SidebarProps>;
+export declare const Sidebar: VFC<SidebarProps>;

package/esm/Sidebar/SidebarButtonLink.d.ts

@@ -1,4 +1,4 @@
-import type { FC, MouseEventHandler, ReactNode } from "react";
+import type { MouseEventHandler, ReactNode, VFC } from "react";
 import type { IconComponentType } from "../types";
 export declare type SidebarButtonLinkIcon = IconComponentType | {
     active: IconComponentType;
@@ -17,4 +17,4 @@ export interface SidebarButtonLinkProps {
     tooltipContent?: ReactNode;
     children: ReactNode;
 }
-export declare const SidebarButtonLink: FC<SidebarButtonLinkProps>;
+export declare const SidebarButtonLink: VFC<SidebarButtonLinkProps>;

package/esm/Sidebar/SidebarButtonLink.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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) { _defineProperty(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; }
 import { useState } from "react";
@@ -16,17 +16,11 @@ var Tooltip = function Tooltip(_ref) {
   var content = _ref.content,
     children = _ref.children;
   return /*#__PURE__*/_jsx(TooltipWrapper, {
-    placement: "right",
+    side: "right",
+    sideOffset: 24,
     delay: 0,
     hideDelay: 0,
-    modifiers: [{
-      name: "offset",
-      options: {
-        offset: [0, 32]
-      }
-    }],
     content: content,
-    wrapperClassName: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["block"]))),
     interactive: false,
     children: children
   });
@@ -66,17 +60,17 @@ export var SidebarButtonLink = function SidebarButtonLink(props) {
       onBlur: function onBlur() {
         return setIsInteractedWith(false);
       },
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          h-8 min-w-8 w-full rounded\n          flex items-center space-x-3\n          border border-transparent\n          display-body\n          hover:no-underline focus:no-underline\n          ", "\n          ", "\n          ", "\n          ", "\n        "])), disabled ? "cursor-not-allowed opacity-70" : "focus:border-grey-500", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          h-8 min-w-8 w-full rounded\n          flex items-center space-x-3\n          border border-transparent\n          display-body\n          hover:no-underline focus:no-underline\n          ", "\n          ", "\n          ", "\n          ", "\n        "])), disabled ? "cursor-not-allowed opacity-70" : "focus:border-grey-500", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
       "aria-current": isActive,
       children: [/*#__PURE__*/_jsx(Icon, {
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["", " ml-[-3px]"])), showColors ? "text-accent-600" : "text-grey-400"),
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", " ml-[-3px]"])), showColors ? "text-accent-600" : "text-grey-400"),
         height: 20,
         width: 20
       }), /*#__PURE__*/_jsx("span", {
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
         children: children
       }), isExternalLink && !collapsed && /*#__PURE__*/_jsx(ExternalLink, {
-        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["", " !ml-1 shrink-0"])), showColors ? "text-accent-600" : "typo-subdued"),
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["", " !ml-1 shrink-0"])), showColors ? "text-accent-600" : "typo-subdued"),
         size: "1em"
       })]
     }))

package/esm/Sidebar/SidebarHeader.d.ts

@@ -1,6 +1,6 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type SidebarHeaderProps = {
     className?: string;
     children?: ReactNode;
 };
-export declare const SidebarHeader: FC<SidebarHeaderProps>;
+export declare const SidebarHeader: VFC<SidebarHeaderProps>;

package/esm/Sidebar/SidebarHeading.d.ts

@@ -1,7 +1,7 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 export declare type SidebarHeadingProps = {
     id?: string;
     className?: string;
     children: ReactNode;
 };
-export declare const SidebarHeading: FC<SidebarHeadingProps>;
+export declare const SidebarHeading: VFC<SidebarHeadingProps>;

package/esm/Sidebar/SidebarLink.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import type { IconComponentType } from "../types";
 export declare type SidebarLinkProps = {
     icon: IconComponentType;
@@ -6,4 +6,4 @@ export declare type SidebarLinkProps = {
     disabled?: boolean;
     children: ReactNode;
 } & Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "id" | "className" | "target" | "rel" | "aria-label" | "onClick">;
-export declare const SidebarLink: FC<SidebarLinkProps>;
+export declare const SidebarLink: VFC<SidebarLinkProps>;

package/esm/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.d.ts

@@ -1,8 +1,8 @@
-import type { FC } from "react";
+import type { VFC } from "react";
 declare type ActiveLinkIndicatorProps = {
     className?: string;
     activeIndex?: number;
     linksCount: number;
 };
-export declare const ActiveLinkIndicator: FC<ActiveLinkIndicatorProps>;
+export declare const ActiveLinkIndicator: VFC<ActiveLinkIndicatorProps>;
 export {};

package/esm/Sidebar/SidebarLinksGroup/SidebarGroupLink.d.ts

@@ -1,7 +1,7 @@
-import type { FC } from "react";
+import type { VFC } from "react";
 import type { SidebarLinksGroupLink } from "./types";
 declare type LinkProps = SidebarLinksGroupLink & {
     active: boolean;
 };
-export declare const SidebarGroupLink: FC<LinkProps>;
+export declare const SidebarGroupLink: VFC<LinkProps>;
 export {};

package/esm/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import type { IconComponentType } from "../../types";
 import type { SidebarLinksGroupLink } from "./types";
 declare type SidebarLinksGroupBaseProps = {
@@ -19,5 +19,5 @@ export declare type CollapsibleSidebarLinksGroupProps = SidebarLinksGroupBasePro
     onGroupToggle?: (open: boolean) => void;
 };
 export declare type SidebarLinksGroupProps = StaticSidebarLinksGroupProps | CollapsibleSidebarLinksGroupProps;
-export declare const SidebarLinksGroup: (props: SidebarLinksGroupProps) => JSX.Element;
+export declare const SidebarLinksGroup: VFC<SidebarLinksGroupProps>;
 export {};