@algolia/satellite 1.1.0 → 1.1.1

package/dist/esm/RadioGroup/RadioButton.tailwind.js

@@ -1,85 +0,0 @@
-import _rgba from "../styles/rgba";
-import _disabledColor from "../styles/disabledColor";
-import _plugin from "tailwindcss/plugin";
-// @ts-check
-var plugin = _plugin;
-var disabledColor = _disabledColor;
-var rgba = _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"
-        }
-      }
-    },
-    ".radio-button-invalid:not(.radio-button:disabled)": {
-      borderColor: theme("colors.red.700"),
-      "&:hover": {
-        background: theme("colors.red.50"),
-        borderColor: theme("colors.red.700")
-      },
-      "&:focus": {
-        borderColor: theme("colors.red.700"),
-        boxShadow: "\n          0 0 0 1px ".concat(theme("colors.red.700"), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
-      },
-      "&:checked": {
-        borderColor: theme("colors.red.700"),
-        "&::after": {
-          background: theme("colors.red.700")
-        },
-        "&:hover": {
-          borderColor: theme("colors.red.700")
-        },
-        "&:focus": {
-          boxShadow: "\n            0 0 0 1px ".concat(theme("colors.red.700"), ",\n            0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n          ")
-        }
-      }
-    }
-  });
-});
-export default radioButtonPlugin;

package/dist/esm/RadioGroup/RadioGroup.js

@@ -1,148 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-var _excluded = ["value", "disabled", "required", "children"];
-import cx from "clsx";
-import { Children, cloneElement, forwardRef, useMemo, useState } from "react";
-import { Card } from "../Card";
-import { useField } from "../Field";
-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,
-    required = _ref.required,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useRadioGroupContext = useRadioGroupContext(),
-    id = _useRadioGroupContext.id,
-    name = _useRadioGroupContext.name,
-    contextDisabled = _useRadioGroupContext.disabled,
-    contextRequired = _useRadioGroupContext.required,
-    _onChange = _useRadioGroupContext.onChange,
-    contextValue = _useRadioGroupContext.value,
-    _useRadioGroupContext2 = _useRadioGroupContext.textPosition,
-    textPosition = _useRadioGroupContext2 === void 0 ? "left" : _useRadioGroupContext2,
-    descriptionId = _useRadioGroupContext.descriptionId,
-    state = _useRadioGroupContext.state,
-    ref = _useRadioGroupContext.ref;
-  var isFirstChild = props.childIndex === 0;
-  var isInvalid = (state === null || state === void 0 ? void 0 : state.status) === "invalid";
-  var checked = value === contextValue;
-  disabled = contextDisabled || disabled;
-  required = contextRequired || required;
-  var labelId = useMemo(
-  // eslint-disable-next-line @algolia/stl/prefer-stl-helper
-  function () {
-    return uniqueId("stl-radio-group-label-");
-  }, []);
-  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      ", "\n      ", ""])), disabled ? "text-grey-300" : "hover:bg-grey-100", disabled ? "cursor-not-allowed" : "cursor-pointer", textPosition === "right" && "flex-row-reverse", isInvalid && "hover:bg-red-50"),
-    children: [/*#__PURE__*/_jsx("span", {
-      id: labelId,
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-1 truncate ", ""])), textPosition === "right" ? "ml-2" : "mr-2"),
-      children: children
-    }), /*#__PURE__*/_jsx(RadioButton, {
-      id: checked || isFirstChild && !contextValue ? id : undefined,
-      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,
-      required: required,
-      "aria-invalid": isInvalid,
-      "aria-labelledby": labelId,
-      "aria-describedby": descriptionId,
-      ref: isFirstChild ? ref : undefined
-    })]
-  });
-};
-
-// This function is used to clone the children of the `RadioGroup` component
-// and pass the `childIndex` prop to the `RadioGroupItem` children.
-function applyChildIndexRecursively(children) {
-  return Children.map(children, function (child, index) {
-    var _child$props;
-    if (child.type === RadioGroupItem) {
-      return /*#__PURE__*/cloneElement(child, {
-        childIndex: index
-      });
-    }
-    if ((_child$props = child.props) !== null && _child$props !== void 0 && _child$props.children) {
-      return /*#__PURE__*/cloneElement(child, {
-        children: applyChildIndexRecursively(child.props.children)
-      });
-    }
-    return child;
-  });
-}
-
-/**
- * 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 = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var id = _ref2.id,
-    className = _ref2.className,
-    name = _ref2.name,
-    value = _ref2.value,
-    disabled = _ref2.disabled,
-    _ref2$required = _ref2.required,
-    required = _ref2$required === void 0 ? false : _ref2$required,
-    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 _useField = useField({
-      required: required
-    }),
-    state = _useField.state,
-    labelId = _useField.labelId,
-    descriptionId = _useField.descriptionId,
-    inputId = _useField.inputId;
-  var contextValue = {
-    id: id !== null && id !== void 0 ? id : inputId,
-    name: name,
-    value: value,
-    disabled: disabled,
-    required: required,
-    onChange: onChange,
-    textPosition: textPosition,
-    labelId: labelId,
-    descriptionId: descriptionId,
-    state: state,
-    ref: ref
-  };
-  return /*#__PURE__*/_jsx(Card, {
-    fullBleed: true,
-    className: cx(className, stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["border ", ""])), state.status === "invalid" ? "bg-red-100 border-red-700" : "border-transparent")),
-    children: /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
-      value: contextValue,
-      children: /*#__PURE__*/_jsx("fieldset", {
-        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["min-w-0"]))),
-        children: /*#__PURE__*/_jsx("div", {
-          className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex flex-col py-1"]))),
-          children: applyChildIndexRecursively(children)
-        })
-      })
-    })
-  });
-});
-RadioGroup.displayName = "RadioGroup";
-RadioGroup.Item = RadioGroupItem;

package/dist/esm/RangeSlider/RangeSlider.js

@@ -1,115 +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 = ["id", "className", "value", "defaultValue", "onChange", "onCommit", "disabled", "required", "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 { useField } from "../Field";
-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 idProp = _ref2.id,
-    className = _ref2.className,
-    value = _ref2.value,
-    defaultValue = _ref2.defaultValue,
-    onChange = _ref2.onChange,
-    onCommit = _ref2.onCommit,
-    disabled = _ref2.disabled,
-    _ref2$required = _ref2.required,
-    required = _ref2$required === void 0 ? false : _ref2$required,
-    _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
-  };
-  var _useField = useField({
-      required: required
-    }),
-    state = _useField.state,
-    labelId = _useField.labelId,
-    descriptionId = _useField.descriptionId,
-    inputId = _useField.inputId;
-  var isInvalid = state.status === "invalid";
-  var id = idProp !== null && idProp !== void 0 ? idProp : inputId;
-  return /*#__PURE__*/_jsxs(SliderRoot, _objectSpread(_objectSpread({}, 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 ", ""])), isInvalid && "bg-red-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 ", ""])), isInvalid && "bg-red-700"), TRACK_SHADOWS_CLASSNAME),
-        style: {
-          backgroundColor: trackColors.track1
-        }
-      })
-    }), Array(thumbsCount).fill(undefined).map(function (_, idx) {
-      return /*#__PURE__*/_jsxs(SliderThumb, {
-        ref: ref,
-        id: id && (idx === 0 ? id : "".concat(id, "-").concat(idx)),
-        "aria-labelledby": labelId,
-        "aria-describedby": descriptionId,
-        "aria-required": required,
-        "aria-invalid": isInvalid,
-        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              ", "\n            "])), isInvalid ? "border-red-700 hover:border-red-700 focus:outline-red-700" : "hover:border-grey-600"),
-        children: [/*#__PURE__*/_jsx(ThumbGroove, {
-          className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["absolute top-1.5 right-1.5 ", ""])), isInvalid && "bg-red-700 group-hover:bg-red-700")
-        }), /*#__PURE__*/_jsx(ThumbGroove, {
-          className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["absolute top-1.5 left-1.5 ", ""])), isInvalid && "bg-red-700 group-hover:bg-red-700")
-        })]
-      }, "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,67 +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", "required"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-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, Fragment } from "react";
-import { useField } from "../Field";
-import { CheckIcon, XIcon } from "../Icons";
-import stl from "../styles/helpers/satellitePrefixer";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } 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"])))
-};
-var InvalidIcon = function InvalidIcon() {
-  return /*#__PURE__*/_jsx(XIcon, {
-    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["h-4 w-4 mr-10 text-white bg-red-700 p-px rounded-full absolute top-1/2 right-0 -translate-y-1/2"])))
-  });
-};
-var ValidatedIcon = function ValidatedIcon() {
-  return /*#__PURE__*/_jsx(CheckIcon, {
-    className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["h-4 w-4 mr-10 text-white bg-accent-600 p-px rounded-full absolute top-1/2 right-0 -translate-y-1/2"])))
-  });
-};
-
-/**
- * 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 _props$id;
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "medium" : _ref$variant,
-    className = _ref.className,
-    required = _ref.required,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useField = useField({
-      required: required
-    }),
-    state = _useField.state,
-    labelId = _useField.labelId,
-    descriptionId = _useField.descriptionId,
-    inputId = _useField.inputId;
-  var isValidated = state.status === "validated";
-  var isInvalid = state.status === "invalid";
-  var StatusIcon = isInvalid ? InvalidIcon : state.status === "validated" ? ValidatedIcon : Fragment;
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["relative w-full"]))),
-    children: [/*#__PURE__*/_jsx("select", _objectSpread(_objectSpread({
-      "aria-labelledby": labelId,
-      "aria-describedby": descriptionId
-    }, props), {}, {
-      id: (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : inputId,
-      required: required,
-      "aria-invalid": isInvalid,
-      className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["select-input display-body"]))), VARIANT_CLASSNAMES[variant], isInvalid && stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["select-input-invalid"]))), isValidated && stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["select-input-validated"]))), className),
-      ref: ref
-    })), /*#__PURE__*/_jsx(StatusIcon, {})]
-  });
-});
-Select.displayName = "Select";

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

@@ -1,96 +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")),
-      transition: "all 100ms ease-in-out",
-      "&::-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"
-    },
-    ".select-input-invalid, .select-input-validated": {
-      padding: "0 ".concat(theme("spacing.16"), " 0 ").concat(theme("spacing.4"))
-    },
-    ".select-input-invalid": {
-      borderColor: theme("colors.red.700"),
-      backgroundColor: theme("colors.red.100"),
-      backgroundImage: selectIconBG(theme("colors.red.700")),
-      "&:hover": {
-        borderColor: theme("colors.red.700"),
-        backgroundColor: theme("colors.red.50"),
-        backgroundImage: selectIconBG(theme("colors.red.700"))
-      },
-      "&:focus": {
-        backgroundImage: selectIconBG(theme("colors.red.700")),
-        borderColor: theme("colors.red.700"),
-        boxShadow: "\n          0 0 0 1px ".concat(theme("colors.red.700"), ",\n          0 2px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
-      }
-    }
-  });
-});
-export default selectPlugin;