@algolia/satellite 1.0.0 → 1.1.1

package/dist/esm/RadioGroup/RadioGroup.d.ts

@@ -1,31 +0,0 @@
-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>;
-/**
- * The `RadioGroup` component presents mutually exclusive options, allowing users to make a single selection from a list.
- *
- * See the [Radio Group documentation page](https://satellite.algolia.com/components/controls/radio-group) for more information.
- */
-export declare const RadioGroup: VFC<RadioGroupProps> & RadioGroupSubComponents;
-export {};

package/dist/esm/RadioGroup/RadioGroup.js

@@ -1,86 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-import { useState } from "react";
-import { Card } from "../Card";
-import stl from "../styles/helpers/satellitePrefixer";
-import { uniqueId } from "../utils/uniqueId";
-import { RadioButton } from "./RadioButton";
-import { RadioGroupContext, useRadioGroupContext } from "./RadiogroupContext";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var RadioGroupItem = function RadioGroupItem(_ref) {
-  var value = _ref.value,
-    disabled = _ref.disabled,
-    children = _ref.children;
-  var _useRadioGroupContext = 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__*/_jsxs("label", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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__*/_jsx("span", {
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-1 truncate ", ""])), textPosition === "right" ? "ml-2" : "mr-2"),
-      children: children
-    }), /*#__PURE__*/_jsx(RadioButton, {
-      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["shrink-0 self-start mt-1"]))),
-      value: value,
-      checked: checked,
-      name: name,
-      onChange: function onChange() {
-        if (!disabled && !checked) {
-          _onChange(value);
-        }
-      },
-      disabled: disabled
-    })]
-  });
-};
-
-/**
- * The `RadioGroup` component presents mutually exclusive options, allowing users to make a single selection from a list.
- *
- * See the [Radio Group documentation page](https://satellite.algolia.com/components/controls/radio-group) for more information.
- */
-export var 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 = useState(function () {
-      return uniqueId("RadioGroupName-");
-    }),
-    _useState2 = _slicedToArray(_useState, 1),
-    componentDefaultName = _useState2[0];
-  name = name || componentDefaultName;
-  var contextValue = {
-    name: name,
-    value: value,
-    disabled: disabled,
-    onChange: onChange,
-    textPosition: textPosition
-  };
-  return /*#__PURE__*/_jsx(Card, {
-    fullBleed: true,
-    className: className,
-    children: /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
-      value: contextValue,
-      children: /*#__PURE__*/_jsx("fieldset", {
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["min-w-0"]))),
-        children: /*#__PURE__*/_jsx("div", {
-          className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex flex-col py-1"]))),
-          children: children
-        })
-      })
-    })
-  });
-};
-RadioGroup.Item = RadioGroupItem;

package/dist/esm/RadioGroup/RadiogroupContext.d.ts

@@ -1,11 +0,0 @@
-/// <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/dist/esm/RangeSlider/RangeSlider.d.ts

@@ -1,36 +0,0 @@
-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;
-/**
- * The `RangeSlider` component is an input field where users select one or two numeric values within a given range (minimum and maximum values).
- *
- * See the [Range Slider documentation page](https://satellite.algolia.com/components/controls/range-slider) for more information.
- */
-export declare const RangeSlider: (<Value extends RangeSliderValue>(props: RangeSliderProps<Value> & {
-    ref?: ForwardedRef<HTMLSpanElement> | undefined;
-}) => ReturnType<typeof RangeSliderInternal>) & {
-    displayName?: string | undefined;
-};
-export {};

package/dist/esm/RangeSlider/RangeSlider.js

@@ -1,98 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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(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";
-import colors from "../styles/colors";
-import stl from "../styles/helpers/satellitePrefixer";
-
-// Prevents unwanted number narrowing
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var TRACK_SHADOWS_CLASSNAME = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["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__*/_jsx("span", {
-    className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["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 = _objectWithoutProperties(_ref2, _excluded);
-  var thumbsCount = getThumbCount(value !== null && value !== void 0 ? value : defaultValue);
-  var trackColors = {
-    track1: disabled ? colors.grey[200] : track1Color,
-    track2: disabled ? colors.grey[100] : track2Color
-  };
-  return /*#__PURE__*/_jsxs(SliderRoot, _objectSpread(_objectSpread({
-    ref: ref
-  }, otherProps), {}, {
-    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["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__*/_jsx(SliderTrack, {
-      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["relative h-1 flex-1 rounded bg-grey-100"]))), TRACK_SHADOWS_CLASSNAME),
-      style: {
-        backgroundColor: trackColors.track2
-      },
-      children: /*#__PURE__*/_jsx(SliderRange, {
-        className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["absolute rounded-full h-full bg-accent-600"]))), TRACK_SHADOWS_CLASSNAME),
-        style: {
-          backgroundColor: trackColors.track1
-        }
-      })
-    }), Array(thumbsCount).fill(undefined).map(function (_, idx) {
-      return /*#__PURE__*/_jsxs(SliderThumb, {
-        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, {
-          className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["absolute top-1.5 left-1.5"])))
-        })]
-      }, "thumb_".concat(idx));
-    })]
-  }));
-};
-
-/**
- * The `RangeSlider` component is an input field where users select one or two numeric values within a given range (minimum and maximum values).
- *
- * See the [Range Slider documentation page](https://satellite.algolia.com/components/controls/range-slider) for more information.
- */
-export var RangeSlider = /*#__PURE__*/forwardRef(RangeSliderInternal);
-RangeSlider.displayName = "RangeSlider";

package/dist/esm/ScrollIndicator/ScrollIndicator.js

@@ -1,84 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-import cx from "clsx";
-import { createElement, useCallback, useMemo, useState } from "react";
-import useMeasure from "react-use/lib/useMeasure";
-import useScroll from "react-use/lib/useScroll";
-import stl from "../styles/helpers/satellitePrefixer";
-import { jsx as _jsx } from "react/jsx-runtime";
-var useScrollIndicators = function useScrollIndicators() {
-  /**
-   * We don't use the actual measurements from the hook because they're not as precise
-   * (see limitations https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
-   *
-   * This is mostly used as a side-effect to force the component to rerender when its size changes
-   */
-  var _useMeasure = useMeasure(),
-    _useMeasure2 = _slicedToArray(_useMeasure, 1),
-    setMeasureRef = _useMeasure2[0];
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    element = _useState2[0],
-    setElement = _useState2[1];
-  var setScrollIndicatorsRef = useCallback(function (element) {
-    setElement(element);
-    // Types are wrong, a ref callback must be able to accept null
-    // @ts-ignore
-    setMeasureRef(element);
-  }, [setMeasureRef]);
-  var fakeScrollRef = useMemo(function () {
-    return {
-      current: element
-    };
-  }, [element]);
-  var _useScroll = useScroll(fakeScrollRef),
-    scrollTop = _useScroll.y;
-  var result = {
-    showTopIndicator: false,
-    showBottomIndicator: false,
-    setScrollIndicatorsRef: setScrollIndicatorsRef
-  };
-  if (element) {
-    var scrollHeight = element.scrollHeight - element.clientHeight;
-    if (scrollHeight > 0) {
-      var percent = Math.floor(scrollTop / scrollHeight * 100);
-      result.showTopIndicator = percent > 0;
-      result.showBottomIndicator = percent < 100;
-    }
-  }
-  return result;
-};
-var VARIANT_CLASSNAMES = {
-  light: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["scroll-indicator"]))),
-  dark: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["scroll-indicator scroll-indicator-dark"])))
-};
-
-/**
- * The `ScrollIndicator` component is used to display a top and bottom color gradient depending on the scroll position.
- *
- * See the [Scroll Indicator documentation page](https://satellite.algolia.com/layouts/scroll-indicator) for more information.
- */
-export var ScrollIndicator = function ScrollIndicator(_ref) {
-  var _ref$tagName = _ref.tagName,
-    tagName = _ref$tagName === void 0 ? "div" : _ref$tagName,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "light" : _ref$variant,
-    className = _ref.className,
-    wrapperClassName = _ref.wrapperClassName,
-    style = _ref.style,
-    children = _ref.children;
-  var _useScrollIndicators = useScrollIndicators(),
-    showTopIndicator = _useScrollIndicators.showTopIndicator,
-    showBottomIndicator = _useScrollIndicators.showBottomIndicator,
-    setScrollIndicatorsRef = _useScrollIndicators.setScrollIndicatorsRef;
-  return /*#__PURE__*/_jsx("div", {
-    className: cx(VARIANT_CLASSNAMES[variant], stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          ", "\n          ", "\n        "])), showTopIndicator && "scroll-indicator-top", showBottomIndicator && "scroll-indicator-bottom"), wrapperClassName),
-    children: /*#__PURE__*/createElement(tagName, {
-      style: style,
-      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["scroll-indicator-content"]))), className),
-      ref: setScrollIndicatorsRef,
-      tabIndex: 0
-    }, children)
-  });
-};

package/dist/esm/ScrollIndicator/ScrollIndicator.tailwind.js

@@ -1,50 +0,0 @@
-import _rgba from "../styles/rgba";
-import _plugin from "tailwindcss/plugin";
-// @ts-check
-var plugin = _plugin;
-var rgba = _rgba;
-var scrollIndicatorPlugin = plugin(function (_ref) {
-  var addComponents = _ref.addComponents,
-    theme = _ref.theme;
-  addComponents({
-    ".scroll-indicator": {
-      position: "relative",
-      overflow: "hidden",
-      "&::before, &::after": {
-        position: "absolute",
-        width: "100%",
-        height: "48px",
-        left: "0px",
-        pointerEvents: "none"
-      },
-      "&::before": {
-        top: "0px",
-        backgroundImage: "linear-gradient(0, ".concat(rgba(theme("colors.white"), 0), " 0%, ").concat(theme("colors.white"), " 100%)")
-      },
-      "&::after": {
-        bottom: "0px",
-        backgroundImage: "linear-gradient(180deg, ".concat(rgba(theme("colors.white"), 0), " 0%, ").concat(theme("colors.white"), " 100%)")
-      }
-    },
-    ".scroll-indicator-dark": {
-      "&::before": {
-        backgroundImage: "linear-gradient(0, ".concat(rgba(theme("colors.grey.900"), 0), " 0%, ").concat(theme("colors.grey.900"), " 100%)")
-      },
-      "&::after": {
-        backgroundImage: "linear-gradient(180deg, ".concat(rgba(theme("colors.grey.900"), 0), " 0%, ").concat(theme("colors.grey.900"), " 100%)")
-      }
-    },
-    ".scroll-indicator-top::before": {
-      content: '" "'
-    },
-    ".scroll-indicator-bottom::after": {
-      content: '" "'
-    },
-    ".scroll-indicator-content": {
-      display: "block",
-      height: "100%",
-      overflowY: "auto"
-    }
-  });
-});
-export default scrollIndicatorPlugin;

package/dist/esm/Select/Select.js

@@ -1,33 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["variant", "className"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-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 { jsx as _jsx } from "react/jsx-runtime";
-var VARIANT_CLASSNAMES = {
-  small: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["select-input-small"]))),
-  medium: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["select-input-medium"]))),
-  large: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["select-input-large"])))
-};
-
-/**
- * The `Select` component provides a dropdown menu, allowing users to choose one option from a list.
- *
- * See the [Select documentation page](https://satellite.algolia.com/components/forms/select) for more information.
- */
-export var Select = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "medium" : _ref$variant,
-    className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx("select", _objectSpread(_objectSpread({}, props), {}, {
-    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["select-input display-body"]))), VARIANT_CLASSNAMES[variant], className),
-    ref: ref
-  }));
-});
-Select.displayName = "Select";

package/dist/esm/Select/Select.tailwind.js

@@ -1,77 +0,0 @@
-import _require2 from "../styles/helpers/icons";
-import _disabledColor from "../styles/disabledColor";
-import _plugin from "tailwindcss/plugin";
-// @ts-check
-var plugin = _plugin;
-var disabledColor = _disabledColor;
-var _require = _require2,
-  selectIconBG = _require.selectIconBG;
-var selectPlugin = plugin(function (_ref) {
-  var addComponents = _ref.addComponents,
-    theme = _ref.theme;
-  addComponents({
-    // I chose .select-input to avoid name collision with tailwindcss.com/docs/user-select/
-    ".select-input": {
-      appearance: "none",
-      outline: "none",
-      cursor: "pointer",
-      position: "relative",
-      padding: "0 ".concat(theme("spacing.10"), " 0 ").concat(theme("spacing.4")),
-      width: "100%",
-      color: theme("colors.grey.900"),
-      backgroundColor: theme("colors.white"),
-      backgroundImage: "\n        ".concat(selectIconBG(theme("colors.grey.500")), ",\n        linear-gradient(-180deg, ").concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)\n      "),
-      backgroundPosition: "right ".concat(theme("spacing.4"), " center, 0 0"),
-      backgroundRepeat: "no-repeat",
-      borderRadius: theme("borderRadius.DEFAULT"),
-      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",
-        color: "transparent",
-        textShadow: "0 0 0 ".concat(theme("colors.grey.900"))
-      },
-      "&:focus::-ms-value": {
-        color: theme("colors.grey.900")
-      },
-      "& > option": {
-        textShadow: "none",
-        "&:not(:checked)": {
-          color: theme("colors.grey.900")
-        },
-        "&:disabled": {
-          color: theme("colors.grey.300")
-        }
-      },
-      "&: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.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        "),
-        borderColor: theme("colors.accent.600"),
-        boxShadow: "\n          0 0 0 1px ".concat(theme("colors.accent.600"), ",\n          0 2px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
-      },
-      "&:disabled": {
-        cursor: "not-allowed",
-        color: theme("colors.grey.300"),
-        backgroundImage: "\n          ".concat(selectIconBG(theme("colors.grey.300")), ",\n          linear-gradient(-180deg, ").concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n        "),
-        borderColor: disabledColor(theme("colors.grey.200")),
-        boxShadow: "none"
-      }
-    },
-    ".select-input-small": {
-      height: theme("spacing.8"),
-      backgroundSize: "8px, auto"
-    },
-    ".select-input-medium": {
-      height: theme("spacing.10"),
-      backgroundSize: "10px, auto"
-    },
-    ".select-input-large": {
-      height: theme("spacing.12"),
-      backgroundSize: "12px, auto"
-    }
-  });
-});
-export default selectPlugin;

package/dist/esm/Separator/Separator.js

@@ -1,33 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-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";
-/**
- * The `Separator` component is used to visually separate content.
- *
- * See the [Separator documentation page](https://satellite.algolia.com/components/misc/separator) for more information.
- */
-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;
-  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));
-};

package/dist/esm/Sidebar/Sidebar.js

@@ -1,60 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _templateObject, _templateObject2, _templateObject3;
-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";
-import { ScrollIndicator } from "../ScrollIndicator";
-import stl from "../styles/helpers/satellitePrefixer";
-import { matchLocation } from "../utils/matchLocation";
-import { SidebarContext } from "./SidebarContext";
-import { jsx as _jsx } from "react/jsx-runtime";
-var DEFAULT_SIDEBAR_LOCALE = {
-  primarySidebarLabel: "Primary Navigation Sidebar",
-  secondarySidebarLabel: "Secondary Navigation Sidebar"
-};
-
-/**
- * The `Sidebar` component is used to display a sidebar of links.
- *
- * See the [Sidebar documentation page](https://satellite.algolia.com/layouts/sidebar) for more information.
- */
-export var Sidebar = function Sidebar(_ref) {
-  var id = _ref.id,
-    className = _ref.className,
-    labelProp = _ref.label,
-    localeProp = _ref.locale,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "primary" : _ref$variant,
-    _ref$collapsed = _ref.collapsed,
-    collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
-    _ref$isLinkActive = _ref.isLinkActive,
-    isLinkActiveProp = _ref$isLinkActive === void 0 ? matchLocation : _ref$isLinkActive,
-    location = _ref.location,
-    children = _ref.children;
-  var isLinkActive = useCallback(function (href) {
-    return isLinkActiveProp(href, location);
-  }, [isLinkActiveProp, location]);
-  var contextLocale = useLocale("sidebar");
-  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_SIDEBAR_LOCALE), contextLocale), localeProp);
-  var label = typeof labelProp === "string" ? labelProp : variant === "primary" ? locale.primarySidebarLabel : locale.secondarySidebarLabel;
-  return /*#__PURE__*/_jsx(SidebarContext.Provider, {
-    value: {
-      collapsed: collapsed,
-      variant: variant,
-      isLinkActive: isLinkActive
-    },
-    children: /*#__PURE__*/_jsx("aside", {
-      id: id,
-      "aria-label": label,
-      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            display-body border-r border-grey-200/50\n            ", "\n            ", "\n          "])), collapsed ? "w-14" : "w-56", variant === "primary" ? "bg-grey-100" : "bg-white"), className),
-      children: /*#__PURE__*/_jsx(ScrollIndicator, {
-        wrapperClassName: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-full -mr-px"]))),
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["relative px-3 pb-7 flex flex-col no-scrollbar overflow-x-hidden"]))),
-        children: children
-      })
-    })
-  });
-};

package/dist/esm/Sidebar/SidebarButtonLink.d.ts

@@ -1,20 +0,0 @@
-import type { MouseEventHandler, ReactNode, VFC } from "react";
-import type { IconComponentType } from "../Icons";
-export declare type SidebarButtonLinkIcon = IconComponentType | {
-    active: IconComponentType;
-    inactive: IconComponentType;
-};
-export interface SidebarButtonLinkProps {
-    id?: string;
-    icon: SidebarButtonLinkIcon;
-    href: string;
-    onClick?: MouseEventHandler<HTMLAnchorElement>;
-    disabled?: boolean;
-    /**
-     * Alternative content for the tooltip.
-     * @default children
-     */
-    tooltipContent?: ReactNode;
-    children: ReactNode;
-}
-export declare const SidebarButtonLink: VFC<SidebarButtonLinkProps>;