@algolia/satellite 1.0.0-beta.17 → 1.0.0-beta.170

package/cjs/RadioGroup/RadioButton.tailwind.js

@@ -0,0 +1,61 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var disabledColor = require("../styles/disabledColor");
+var rgba = require("../styles/rgba");
+var radioButtonPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".radio-button": {
+      position: "relative",
+      width: "16px",
+      height: "16px",
+      appearance: "none",
+      outline: "0px",
+      background: theme("colors.white"),
+      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"))
+      },
+      "&:checked": {
+        borderColor: theme("colors.accent.600"),
+        boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5")),
+        "&::after": {
+          position: "absolute",
+          right: "4px",
+          left: "4px",
+          top: "4px",
+          bottom: "4px",
+          content: '" "',
+          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          ")
+        }
+      },
+      "&:disabled": {
+        backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
+        borderColor: disabledColor(theme("colors.grey.200")),
+        boxShadow: "none",
+        cursor: "not-allowed",
+        "&:checked::after": {
+          background: disabledColor(theme("colors.grey.200")),
+          boxShadow: "none"
+        }
+      }
+    }
+  });
+});
+module.exports = radioButtonPlugin;

package/cjs/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode, VFC } from "react";
+export interface RadioGroupProps {
+    /** @ignore */
+    className?: string;
+    name?: string;
+    value: string;
+    disabled?: boolean;
+    /**
+     * `RadioGroupItem` text position
+     * @default left
+     */
+    textPosition?: "left" | "right";
+    onChange: (newValue: string) => void;
+    children?: ReactNode;
+}
+export interface RadioGroupItemProps {
+    value: string;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+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.
+ *
+ * - Use radio buttons when a user has to choose from at least 2 options.
+ * - Whenever possible, provide a default, preselected option.
+ * - Choices provided in the list of options should be mutually exclusive so that a user doesn't struggle between two values. Provide a clear distinction.
+ * - Radio groups are always stacked vertically.
+ * - List options in a radio group in a logical order, for example:
+ *   - Most likely to least likely to be selected.
+ *   - Simplest to most complex operation.
+ *   - Least to most risk.
+ *   - etc.
+ * - 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: VFC<RadioGroupProps> & RadioGroupSubComponents;
+export default RadioGroup;

package/cjs/RadioGroup/RadioGroup.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.RadioGroupItem = exports.RadioGroup = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("react");
+var _Card = _interopRequireDefault(require("../Card"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _uniqueId = _interopRequireDefault(require("../utils/uniqueId"));
+var _RadioButton = _interopRequireDefault(require("./RadioButton"));
+var _RadiogroupContext = require("./RadiogroupContext");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var RadioGroupItem = exports.RadioGroupItem = function RadioGroupItem(_ref) {
+  var value = _ref.value,
+    disabled = _ref.disabled,
+    children = _ref.children;
+  var _useRadioGroupContext = (0, _RadiogroupContext.useRadioGroupContext)(),
+    name = _useRadioGroupContext.name,
+    contextDisabled = _useRadioGroupContext.disabled,
+    _onChange = _useRadioGroupContext.onChange,
+    contextValue = _useRadioGroupContext.value,
+    _useRadioGroupContext2 = _useRadioGroupContext.textPosition,
+    textPosition = _useRadioGroupContext2 === void 0 ? "left" : _useRadioGroupContext2;
+  var checked = value === contextValue;
+  disabled = contextDisabled || disabled;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n      flex items-center justify-between\n      min-h-10 px-4 py-2\n      ", "\n      ", "\n      ", ""])), disabled ? "text-grey-300" : "hover:bg-grey-100", disabled ? "cursor-not-allowed" : "cursor-pointer", textPosition === "right" && "flex-row-reverse"),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex-1 truncate ", ""])), textPosition === "right" ? "ml-2" : "mr-2"),
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton["default"], {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 self-start mt-1"]))),
+      value: value,
+      checked: checked,
+      name: name,
+      onChange: function onChange() {
+        if (!disabled && !checked) {
+          _onChange(value);
+        }
+      },
+      disabled: disabled
+    })]
+  });
+};
+
+/**
+ * Use radio buttons when users have to make a single selection from a list of options.
+ *
+ * - Use radio buttons when a user has to choose from at least 2 options.
+ * - Whenever possible, provide a default, preselected option.
+ * - Choices provided in the list of options should be mutually exclusive so that a user doesn't struggle between two values. Provide a clear distinction.
+ * - Radio groups are always stacked vertically.
+ * - List options in a radio group in a logical order, for example:
+ *   - Most likely to least likely to be selected.
+ *   - Simplest to most complex operation.
+ *   - Least to most risk.
+ *   - etc.
+ * - 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)
+ */
+var RadioGroup = exports.RadioGroup = function RadioGroup(_ref2) {
+  var className = _ref2.className,
+    name = _ref2.name,
+    value = _ref2.value,
+    disabled = _ref2.disabled,
+    textPosition = _ref2.textPosition,
+    children = _ref2.children,
+    onChange = _ref2.onChange;
+  var _useState = (0, _react.useState)(function () {
+      return (0, _uniqueId["default"])("RadioGroupName-");
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+    componentDefaultName = _useState2[0];
+  name = name || componentDefaultName;
+  var contextValue = {
+    name: name,
+    value: value,
+    disabled: disabled,
+    onChange: onChange,
+    textPosition: textPosition
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card["default"], {
+    fullBleed: true,
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadiogroupContext.RadioGroupContext.Provider, {
+      value: contextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["min-w-0"]))),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col py-1"]))),
+          children: children
+        })
+      })
+    })
+  });
+};
+RadioGroup.Item = RadioGroupItem;
+var _default = exports["default"] = RadioGroup;

package/cjs/RadioGroup/RadiogroupContext.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface RadioGroupContextType {
+    name: string;
+    value: string;
+    disabled?: boolean;
+    /** `RadioGroupItem` text position */
+    textPosition?: "left" | "right";
+    onChange: (newValue: string) => void;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextType | null>;
+export declare const useRadioGroupContext: () => RadioGroupContextType;

package/cjs/RadioGroup/RadiogroupContext.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRadioGroupContext = exports.RadioGroupContext = void 0;
+var _react = require("react");
+var RadioGroupContext = exports.RadioGroupContext = /*#__PURE__*/(0, _react.createContext)(null);
+var useRadioGroupContext = exports.useRadioGroupContext = function useRadioGroupContext() {
+  var contextValue = (0, _react.useContext)(RadioGroupContext);
+  if (!contextValue) {
+    throw new Error("Invalid usage of useRadioGroupContext outside of RadioGroupContext");
+  }
+  return contextValue;
+};

package/cjs/RadioGroup/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./RadioGroup";
+export * from "./RadioButton";
+export * from "./RadiogroupContext";
+export { default } from "./RadioGroup";

package/cjs/RadioGroup/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _RadioGroup["default"];
+  }
+});
+var _RadioGroup = _interopRequireWildcard(require("./RadioGroup"));
+Object.keys(_RadioGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RadioGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _RadioGroup[key];
+    }
+  });
+});
+var _RadioButton = require("./RadioButton");
+Object.keys(_RadioButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RadioButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _RadioButton[key];
+    }
+  });
+});
+var _RadiogroupContext = require("./RadiogroupContext");
+Object.keys(_RadiogroupContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RadiogroupContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _RadiogroupContext[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/cjs/RangeSlider/RangeSlider.d.ts

@@ -0,0 +1,38 @@
+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> {
+    value?: WidenNumber<Value>;
+    defaultValue?: WidenNumber<Value>;
+    /** Event handler called when the value changes. */
+    onChange?: (value: WidenNumber<Value>) => void;
+    /** Event handler called when the value changes at the end of an interaction. */
+    onCommit?: (value: WidenNumber<Value>) => void;
+    id?: string;
+    name?: string;
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    "aria-label"?: string;
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    minStepsBetweenThumbs?: 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).
+ *
+ * - Range sliders should always be used with a label
+ * - Provide min and max value whenever possible
+ * - Provide text input for better accessibility
+ */
+export declare const RangeSlider: (<Value extends RangeSliderValue>(props: RangeSliderProps<Value> & {
+    ref?: ForwardedRef<HTMLSpanElement> | undefined;
+}) => ReturnType<typeof RangeSliderInternal>) & {
+    displayName?: string | undefined;
+};
+export default RangeSlider;

package/cjs/RangeSlider/RangeSlider.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.RangeSlider = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _reactSlider = require("@radix-ui/react-slider");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _colors = _interopRequireDefault(require("../styles/colors"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "value", "defaultValue", "onChange", "onCommit", "disabled", "min", "max", "track1Color", "track2Color"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8; // Prevents unwanted number narrowing
+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) { (0, _defineProperty2["default"])(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; }
+var TRACK_SHADOWS_CLASSNAME = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["shadow-[inset_0_1px_3px_0_rgb(0_0_0_/_10%),0_0.5px_0_0_rgb(255_255_255_/_5%)]"])));
+var coerceToRadixValue = function coerceToRadixValue(value) {
+  return typeof value === "number" ? [value] : value;
+};
+var getThumbCount = function getThumbCount(value) {
+  return Array.isArray(value) ? value.length : 1;
+};
+var ThumbGroove = function ThumbGroove(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-3 w-px bg-grey-500 group-hover:bg-grey-600"]))), className)
+  });
+};
+var RangeSliderInternal = function RangeSliderInternal(_ref2, ref) {
+  var className = _ref2.className,
+    value = _ref2.value,
+    defaultValue = _ref2.defaultValue,
+    onChange = _ref2.onChange,
+    onCommit = _ref2.onCommit,
+    disabled = _ref2.disabled,
+    _ref2$min = _ref2.min,
+    min = _ref2$min === void 0 ? 0 : _ref2$min,
+    _ref2$max = _ref2.max,
+    max = _ref2$max === void 0 ? 100 : _ref2$max,
+    track1Color = _ref2.track1Color,
+    track2Color = _ref2.track2Color,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var thumbsCount = getThumbCount(value !== null && value !== void 0 ? value : defaultValue);
+  var trackColors = {
+    track1: disabled ? _colors["default"].grey[200] : track1Color,
+    track2: disabled ? _colors["default"].grey[100] : track2Color
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSlider.Root, _objectSpread(_objectSpread({
+    ref: ref
+  }, otherProps), {}, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["relative h-6 min-w-[200px] flex items-center select-none touch-none aria-disabled:opacity-70 cursor-pointer aria-disabled:cursor-not-allowed"]))), className),
+    value: coerceToRadixValue(value),
+    defaultValue: coerceToRadixValue(defaultValue),
+    onValueChange: function onValueChange(value) {
+      return (// @ts-expect-error
+        onChange === null || onChange === void 0 ? void 0 : onChange(value.length === 1 ? value[0] : value)
+      );
+    },
+    onValueCommit: function onValueCommit(value) {
+      return (// @ts-expect-error
+        onCommit === null || onCommit === void 0 ? void 0 : onCommit(value.length === 1 ? value[0] : value)
+      );
+    },
+    disabled: disabled,
+    max: max,
+    min: min,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSlider.SliderTrack, {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["relative h-1 flex-1 rounded bg-grey-100"]))), TRACK_SHADOWS_CLASSNAME),
+      style: {
+        backgroundColor: trackColors.track2
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSlider.SliderRange, {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["absolute rounded-full h-full bg-accent-600"]))), TRACK_SHADOWS_CLASSNAME),
+        style: {
+          backgroundColor: trackColors.track1
+        }
+      })
+    }), Array(thumbsCount).fill(undefined).map(function (_, idx) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSlider.SliderThumb, {
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["group absolute -translate-x-1.5 -translate-y-3\n              w-3 h-6 rounded-[2px] border border-grey-500\n              bg-white bg-gradient-to-b from-white to-grey-50 shadow-[0_1px_0_0_rgb(35_38_59_/_5%)]\n              hover:border-grey-600\n            "]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbGroove, {
+          className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["absolute top-1.5 right-1.5"])))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbGroove, {
+          className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["absolute top-1.5 left-1.5"])))
+        })]
+      }, "thumb_".concat(idx));
+    })]
+  }));
+};
+
+/**
+ * A range slider is an input field where users select one or two numeric values within a given range (minimum and maximum values).
+ *
+ * - Range sliders should always be used with a label
+ * - Provide min and max value whenever possible
+ * - Provide text input for better accessibility
+ */
+var RangeSlider = exports.RangeSlider = /*#__PURE__*/(0, _react.forwardRef)(RangeSliderInternal);
+RangeSlider.displayName = "RangeSlider";
+var _default = exports["default"] = RangeSlider;

package/cjs/RangeSlider/index.d.ts

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

package/cjs/RangeSlider/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _RangeSlider["default"];
+  }
+});
+var _RangeSlider = _interopRequireWildcard(require("./RangeSlider"));
+Object.keys(_RangeSlider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RangeSlider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _RangeSlider[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/cjs/Satellite/Satellite.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode, type VFC } from "react";
+import type { ComponentsLocales } from "./locale";
+import type { SatelliteRouter } from "./SatelliteRouter";
+export interface SatelliteProps {
+    router?: SatelliteRouter;
+    locales?: ComponentsLocales;
+    portalTarget?: HTMLElement;
+    children: ReactNode;
+}
+export declare const Satellite: VFC<SatelliteProps>;
+export default Satellite;

package/cjs/Satellite/Satellite.js

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

package/cjs/Satellite/SatelliteContext.d.ts

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

package/cjs/Satellite/SatelliteContext.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSatelliteContext = exports["default"] = exports.SatelliteContext = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _SatelliteRouter = require("./SatelliteRouter");
+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) { (0, _defineProperty2["default"])(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; }
+var DEFAULT_CONTEXT = {
+  router: _SatelliteRouter.router,
+  locales: {},
+  portalTarget: null
+};
+var SatelliteContext = exports.SatelliteContext = /*#__PURE__*/(0, _react.createContext)(DEFAULT_CONTEXT);
+var useSatelliteContext = exports.useSatelliteContext = function useSatelliteContext() {
+  var context = (0, _react.useContext)(SatelliteContext);
+  return _objectSpread(_objectSpread({}, DEFAULT_CONTEXT), context);
+};
+var _default = exports["default"] = SatelliteContext;

package/cjs/Satellite/SatelliteRouter.d.ts

@@ -0,0 +1,21 @@
+import "../utils/event-polyfill";
+import type { ParsedLocation } from "../utils/parseUrl";
+export interface LocationDescriptor {
+    url: string;
+    state?: any;
+}
+export interface SatelliteRouter {
+    push(locationDescriptor: LocationDescriptor): void;
+    replace(locationDescriptor: LocationDescriptor): void;
+    isExternalLocation(location: ParsedLocation): boolean;
+    shouldOpenInNewTab(location: ParsedLocation): boolean;
+    transformHref(href: string): string;
+}
+export declare class DefaultRouter implements SatelliteRouter {
+    push({ url, state }: LocationDescriptor): void;
+    replace({ url, state }: LocationDescriptor): void;
+    isExternalLocation(parsedLocation: ParsedLocation): boolean;
+    shouldOpenInNewTab(parsedLocation: ParsedLocation): boolean;
+    transformHref(href: string): string;
+}
+export declare const router: DefaultRouter;

package/cjs/Satellite/SatelliteRouter.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.router = exports.DefaultRouter = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+require("../utils/event-polyfill");
+var DefaultRouter = exports.DefaultRouter = /*#__PURE__*/function () {
+  function DefaultRouter() {
+    (0, _classCallCheck2["default"])(this, DefaultRouter);
+  }
+  (0, _createClass2["default"])(DefaultRouter, [{
+    key: "push",
+    value: function push(_ref) {
+      var url = _ref.url,
+        state = _ref.state;
+      window.history.pushState(state, "", url);
+    }
+  }, {
+    key: "replace",
+    value: function replace(_ref2) {
+      var url = _ref2.url,
+        state = _ref2.state;
+      window.history.replaceState(state, "", url);
+    }
+  }, {
+    key: "isExternalLocation",
+    value: function isExternalLocation(parsedLocation) {
+      return parsedLocation.hostname !== window.location.hostname;
+    }
+  }, {
+    key: "shouldOpenInNewTab",
+    value: function shouldOpenInNewTab(parsedLocation) {
+      return this.isExternalLocation(parsedLocation);
+    }
+  }, {
+    key: "transformHref",
+    value: function transformHref(href) {
+      return href;
+    }
+  }]);
+  return DefaultRouter;
+}();
+var router = exports.router = new DefaultRouter();