@algolia/satellite 1.0.0-beta.164 → 1.0.0-beta.165

package/esm/Popover/Popover.js

@@ -0,0 +1,129 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _excluded = ["children", "title", "subtitle", "content", "footer", "open", "onDismiss", "side", "sideOffset", "align", "alignOffset", "noArrow", "avoidCollisions", "autoFocusOnOpenElement", "locale"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import cx from "clsx";
+import { useMemo, useRef } from "react";
+import { Fragment } from "react";
+import { X } from "react-feather";
+import { IconButton } from "../Button";
+import { useCreatePortal, useLocale } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import { uniqueId } from "../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_POPOVER_LOCALE = {
+  dismissText: "Dismiss"
+};
+export var POPOVER_ARROW_TEST_ID = "arrow";
+export var Popover = function Popover(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    content = _ref.content,
+    footer = _ref.footer,
+    open = _ref.open,
+    onDismiss = _ref.onDismiss,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? "top" : _ref$side,
+    _ref$sideOffset = _ref.sideOffset,
+    sideOffset = _ref$sideOffset === void 0 ? 0 : _ref$sideOffset,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "center" : _ref$align,
+    _ref$alignOffset = _ref.alignOffset,
+    alignOffset = _ref$alignOffset === void 0 ? 0 : _ref$alignOffset,
+    _ref$noArrow = _ref.noArrow,
+    noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow,
+    _ref$avoidCollisions = _ref.avoidCollisions,
+    avoidCollisions = _ref$avoidCollisions === void 0 ? true : _ref$avoidCollisions,
+    autoFocusOnOpenElement = _ref.autoFocusOnOpenElement,
+    propsLocale = _ref.locale,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var contextLocale = useLocale("popover");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_POPOVER_LOCALE), contextLocale), propsLocale);
+  var titleId = useMemo(function () {
+    return uniqueId("popover-title-");
+  }, []);
+  var isControlled = typeof open !== "undefined";
+  var triggerRef = useRef(null);
+  var createPortal = useCreatePortal();
+  if (children.type === Fragment) {
+    throw new Error("Popover component doesn't accept a Fragment as a child.");
+  }
+  return /*#__PURE__*/_jsxs(PopoverPrimitive.Root, {
+    open: open,
+    onOpenChange: function onOpenChange(open) {
+      if (!open) {
+        onDismiss === null || onDismiss === void 0 || onDismiss();
+      }
+    },
+    children: [/*#__PURE__*/_jsx(PopoverPrimitive.Trigger, {
+      ref: triggerRef,
+      asChild: true,
+      children: children
+    }), createPortal( /*#__PURE__*/_jsxs(PopoverPrimitive.Content, _objectSpread(_objectSpread({}, props), {}, {
+      "aria-labelledby": titleId,
+      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["text-grey-900 bg-white z-popover shadow-z200 min-w-48 max-w-128 rounded typo-display-body animate-slide"]))), props.className),
+      side: side,
+      sideOffset: 8 + sideOffset,
+      align: align,
+      alignOffset: alignOffset,
+      avoidCollisions: avoidCollisions,
+      onOpenAutoFocus: function onOpenAutoFocus(e) {
+        if (autoFocusOnOpenElement === false) {
+          e.preventDefault();
+        } else if (autoFocusOnOpenElement instanceof HTMLElement) {
+          e.preventDefault();
+          autoFocusOnOpenElement.focus();
+        }
+      },
+      onInteractOutside: function onInteractOutside(e) {
+        var _triggerRef$current;
+        if (isControlled && (e.target === triggerRef.current || (_triggerRef$current = triggerRef.current) !== null && _triggerRef$current !== void 0 && _triggerRef$current.contains(e.target))) {
+          e.preventDefault();
+        }
+      },
+      onEscapeKeyDown: function onEscapeKeyDown(e) {
+        if (isControlled) {
+          e.preventDefault();
+          onDismiss === null || onDismiss === void 0 || onDismiss();
+        }
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["relative p-4 flex flex-col gap-2 overflow-auto min-h-20 max-h-[calc(var(--radix-popover-content-available-height)-theme(spacing.4))]"]))),
+        children: [/*#__PURE__*/_jsx("div", {
+          id: titleId,
+          className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["font-semibold pr-8"]))),
+          children: title
+        }), !!subtitle && /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display-caption typo-subdued"]))),
+          children: subtitle
+        }), /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["typo-display-body"]))),
+          children: content
+        }), !!footer && /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mt-2"]))),
+          children: footer
+        }), /*#__PURE__*/_jsx(PopoverPrimitive.Close, {
+          className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["absolute top-2 right-2"]))),
+          asChild: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            icon: X,
+            title: locale.dismissText,
+            variant: "subtle",
+            showTooltip: false
+          })
+        })]
+      }), !noArrow && /*#__PURE__*/_jsx(PopoverPrimitive.Arrow, {
+        width: 16,
+        height: 8,
+        className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["arrow-light"])))
+      })]
+    })))]
+  });
+};
+export default Popover;

package/esm/Popover/index.d.ts

@@ -0,0 +1,3 @@
+export { Popover } from "./Popover";
+export * from "./types";
+export { default } from "./Popover";

package/esm/Popover/index.js

@@ -0,0 +1,3 @@
+export { Popover } from "./Popover";
+export * from "./types";
+export { default } from "./Popover";

package/esm/Popover/types.d.ts

@@ -0,0 +1,74 @@
+import type { PopoverContentProps } from "@radix-ui/react-popover";
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+export declare type PopoverLocale = {
+    dismissText?: string;
+};
+export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Defines the trigger element of the `Popover`.
+     * It should be a button element.
+     */
+    children: ReactElement;
+    /**
+     * Defines the title of the `Popover`.
+     */
+    title: ReactNode;
+    /**
+     * Defines the subtitle of the `Popover`.
+     */
+    subtitle?: ReactNode;
+    /**
+     * Defines the content of the `Popover`.
+     */
+    content: ReactNode;
+    /**
+     * Defines the footer of the `Popover`.
+     */
+    footer?: ReactNode;
+    /**
+     * Defines whether the `Popover` should be opened or not.
+     */
+    open?: boolean;
+    /**
+     * Defines the event handler called when the `Popover` is dismissed.
+     */
+    onDismiss?: () => void;
+    /**
+     * Defines the side of the trigger element where the `Popover` should be displayed.
+     * Will be reversed when collisions occur and `avoidCollisions` is enabled.
+     * @default "top"
+     */
+    side?: PopoverContentProps["side"];
+    /**
+     * Defines the offset in pixels of the `Popover` from the trigger element.
+     */
+    sideOffset?: PopoverContentProps["sideOffset"];
+    /**
+     * Defines the preferred alignment of the `Popover` against the trigger element.
+     * May change when collisions occur.
+     */
+    align?: PopoverContentProps["align"];
+    /**
+     * Defines the offset in pixels of the `Popover` along the trigger element.
+     * It only works when the `align` option is set to "start" or "end".
+     */
+    alignOffset?: PopoverContentProps["alignOffset"];
+    /**
+     * Defines whether the `Popover` arrow should be hidden.
+     */
+    noArrow?: boolean;
+    /**
+     * Defines whether the `Popover` should avoid collisions with the viewport.
+     */
+    avoidCollisions?: boolean;
+    /**
+     * The element that should receive focus once the `Popover` is opened.
+     * If `undefined` or `null` is passed, the first focusable element will be focused.
+     * If `false`, no element will be focused.
+     */
+    autoFocusOnOpenElement?: HTMLElement | null | false;
+    /**
+     * Defines the locale of the `Popover`.
+     */
+    locale?: PopoverLocale;
+}

package/esm/Popover/types.js

@@ -0,0 +1 @@
+export {};

package/esm/ProgressBar/ProgressBar.js

@@ -3,11 +3,12 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _templateObject, _templateObject2;
 var _excluded = ["value", "className", "barClassName"];
-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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import cx from "clsx";
 import { forwardRef } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
+import { prefersReducedMotion } from "../utils/prefersReducedMotion";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Progress bars visually represent the completion of a task or operation.
@@ -32,7 +33,7 @@ export var ProgressBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["progress-bar-progress"]))), barClassName),
       style: {
         width: "".concat(value, "%"),
-        transition: "all 150ms ease-in-out"
+        transition: prefersReducedMotion ? "width 150ms ease-in-out" : "width 500ms ease-in-out"
       }
     })
   }));

package/esm/ProgressBar/ProgressBar.tailwind.d.ts

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

package/esm/ProgressSpinner/ProgressSpinner.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["className", "size", "thickness", "align"];
 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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/ProgressSpinner/ProgressSpinner.tailwind.d.ts

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

package/esm/ProgressSpinner/ProgressSpinner.tailwind.js

@@ -12,8 +12,16 @@ var progressSpinnerPlugin = plugin(function (_ref) {
     ".progress-spinner": {
       color: theme("colors.accent.600"),
       stroke: "currentColor",
+      // eslint-disable-next-line @algolia/satellite/prefer-stl-helper
       animation: "stl-spinner 1.4s linear infinite"
     },
+    "@media (prefers-reduced-motion: reduce)": {
+      ".progress-spinner": {
+        // eslint-disable-next-line @algolia/satellite/prefer-stl-helper
+        animation: "stl-spinner 2.8s linear infinite"
+      }
+    },
+    // eslint-disable-next-line @algolia/satellite/prefer-stl-helper
     "@keyframes stl-spinner": {
       "0%": {
         transform: "rotate(0deg)",

package/esm/RadioGroup/RadioButton.d.ts

@@ -1,4 +1,4 @@
 import type { HTMLAttributes, InputHTMLAttributes } from "react";
 export declare type RadioButtonProps = HTMLAttributes<HTMLInputElement> & Pick<InputHTMLAttributes<HTMLInputElement>, "value" | "name" | "checked" | "defaultChecked" | "onChange" | "required" | "autoFocus" | "disabled">;
-export declare const RadioButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & Pick<InputHTMLAttributes<HTMLInputElement>, "required" | "name" | "value" | "disabled" | "autoFocus" | "checked" | "defaultChecked" | "onChange"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const RadioButton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & Pick<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultChecked" | "onChange" | "autoFocus" | "disabled" | "name" | "checked" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
 export default RadioButton;

package/esm/RadioGroup/RadioButton.js

@@ -3,8 +3,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _templateObject;
 var _excluded = ["className"];
-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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import cx from "clsx";
 import { forwardRef } from "react";
 import stl from "../styles/helpers/satellitePrefixer";

package/esm/RadioGroup/RadioButton.tailwind.d.ts

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

package/esm/RadioGroup/RadioButton.tailwind.js

@@ -39,6 +39,9 @@ var radioButtonPlugin = plugin(function (_ref) {
           background: theme("colors.accent.600"),
           borderRadius: "50%"
         },
+        "&:hover": {
+          borderColor: theme("colors.accent.700")
+        },
         "&:focus": {
           boxShadow: "\n            0 0 0 1px ".concat(theme("colors.accent.600"), ",\n            0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n          ")
         }

package/esm/RadioGroup/RadioGroup.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode, VFC } from "react";
 export interface RadioGroupProps {
+    /** @ignore */
     className?: string;
     name?: string;
     value: string;

package/esm/RadioGroup/RadiogroupContext.d.ts

@@ -3,10 +3,7 @@ export interface RadioGroupContextType {
     name: string;
     value: string;
     disabled?: boolean;
-    /**
-     * `RadioGroupItem` text position
-     * @default left
-     */
+    /** `RadioGroupItem` text position */
     textPosition?: "left" | "right";
     onChange: (newValue: string) => void;
 }

package/esm/RangeSlider/RangeSlider.d.ts

@@ -10,7 +10,9 @@ export interface RangeSliderProps<Value extends RangeSliderValue = number> {
     onCommit?: (value: WidenNumber<Value>) => void;
     id?: string;
     name?: string;
+    /** @ignore */
     className?: string;
+    /** @ignore */
     "aria-label"?: string;
     disabled?: boolean;
     min?: number;

package/esm/RangeSlider/RangeSlider.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["className", "value", "defaultValue", "onChange", "onCommit", "disabled", "min", "max", "track1Color", "track2Color"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { SliderRange, Root as SliderRoot, SliderThumb, SliderTrack } from "@radix-ui/react-slider";
 import cx from "clsx";
 import { forwardRef } from "react";

package/esm/Satellite/Satellite.js

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useLayoutEffect } from "react";
 import SatelliteContext from "./SatelliteContext";
 import { router as defaultRouter } from "./SatelliteRouter";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -23,10 +23,10 @@ export var Satellite = function Satellite(_ref) {
     _ref$portalTarget = _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();
+  var portalTarget = typeof document === "undefined" ? null : (_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 () {
+  useLayoutEffect(function () {
     if (!portalTarget || !isDefaultPortalTarget(portalTarget)) return;
     document.body.appendChild(portalTarget);
     return function () {
@@ -35,7 +35,7 @@ export var Satellite = function Satellite(_ref) {
   }, [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 () {
+  useLayoutEffect(function () {
     if (!portalTarget || typeof document === "undefined") return;
     if (portalTarget === document.body) {
       console.warn("Avoid using the document body as a portal target.");

package/esm/Satellite/SatelliteContext.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { createContext, useContext } from "react";
 import { router } from "./SatelliteRouter";
 var DEFAULT_CONTEXT = {

package/esm/Satellite/locale.d.ts

@@ -9,6 +9,7 @@ import type { ModalLocale } from "../Modal";
 import type { PaginationLocale } from "../Pagination";
 import type { CompactPaginationLocale } from "../Pagination/CompactPagination";
 import type { DotPaginationLocale } from "../Pagination/DotPagination";
+import type { PopoverLocale } from "../Popover/types";
 import type { SidebarLocale } from "../Sidebar";
 import type { DataTableLocale } from "../Tables/DataTable";
 import type { TagLocale } from "../Tag";
@@ -24,6 +25,7 @@ export declare type ComponentsLocales = {
     input?: InputPropsLocale;
     modal?: ModalLocale;
     pagination?: PaginationLocale;
+    popover?: PopoverLocale;
     sidebar?: SidebarLocale;
     tag?: TagLocale;
     userAvatar?: UserAvatarLocale;

package/esm/ScrollIndicator/ScrollIndicator.tailwind.d.ts

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

package/esm/Select/Select.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["variant", "className"];
 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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import cx from "clsx";
 import { forwardRef } from "react";
 import stl from "../styles/helpers/satellitePrefixer";

package/esm/Select/Select.tailwind.d.ts

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

package/esm/Separator/Separator.d.ts

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

package/esm/Separator/Separator.js

@@ -1,17 +1,29 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
+var _templateObject, _templateObject2;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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,
+    interactive = _ref.interactive,
     _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),
+  var interactiveProps = interactive ? {
+    decorative: false,
+    tabIndex: 0,
+    "aria-valuemax": 100,
+    "aria-valuemin": 0,
+    "aria-valuenow": 50
+  } : {
+    decorative: true
+  };
+  return /*#__PURE__*/_jsx(RadixSeparator.Root, _objectSpread({
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["separator"]))), className, interactive && stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["interactive"])))),
     orientation: orientation
-  });
+  }, interactiveProps));
 };
 export default Separator;

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

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

package/esm/Separator/Separator.tailwind.js

@@ -8,15 +8,44 @@ var separatorPlugin = plugin(function (_ref) {
   addComponents({
     ".separator": {
       backgroundColor: theme("colors.grey.200"),
+      "&.interactive:hover": {
+        backgroundColor: theme("colors.xenon.600")
+      },
+      "&.interactive:focus": {
+        backgroundColor: theme("colors.xenon.600"),
+        outline: "solid 1px ".concat(theme("colors.xenon.600"))
+      },
       '&[data-orientation="horizontal"]': {
         height: "1px",
         width: "100%",
-        margin: "".concat(margin, " 0")
+        margin: "".concat(margin, " 0"),
+        "&.interactive": {
+          position: "relative",
+          "&::after": {
+            position: "absolute",
+            right: "0px",
+            left: "0px",
+            top: "-10px",
+            height: "20px",
+            content: '" "'
+          }
+        }
       },
       '&[data-orientation="vertical"]': {
         height: "100%",
         width: "1px",
-        margin: "0 ".concat(margin)
+        margin: "0 ".concat(margin),
+        "&.interactive": {
+          position: "relative",
+          "&::after": {
+            position: "absolute",
+            width: "20px",
+            left: "-10px",
+            top: "0px",
+            bottom: "0px",
+            content: '" "'
+          }
+        }
       }
     }
   });

package/esm/Sidebar/Sidebar.d.ts

@@ -2,6 +2,7 @@ import type { ReactNode, VFC } from "react";
 import type { SidebarLocale, SidebarLocation, SidebarVariant } from "./types";
 export interface SidebarProps {
     id?: string;
+    /** @ignore */
     className?: string;
     label?: string;
     locale?: SidebarLocale;

package/esm/Sidebar/Sidebar.js

@@ -1,8 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _templateObject, _templateObject2, _templateObject3;
-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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import cx from "clsx";
 import { useCallback } from "react";
 import { useLocale } from "../Satellite";

package/esm/Sidebar/SidebarButtonLink.js

@@ -2,8 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useState } from "react";
 import { ExternalLink } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";

package/esm/Sidebar/SidebarHeader.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode, VFC } from "react";
 export declare type SidebarHeaderProps = {
+    /** @ignore */
     className?: string;
     children?: ReactNode;
 };