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

package/cjs/AutoComplete/AutoComplete.tailwind.js

@@ -20,9 +20,12 @@ var autoCompletePlugin = plugin(function (_ref) {
       cursor: "text",
       backgroundColor: theme("colors.white"),
       borderRadius: theme("borderRadius.DEFAULT"),
-      border: "1px solid ".concat(theme("colors.grey.200")),
+      border: "1px solid ".concat(theme("colors.grey.500")),
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       transition: "all 100ms ease-in-out",
+      "&:not(.autocomplete-disabled):hover": {
+        borderColor: theme("colors.grey.600")
+      },
       // Workaround for ie
       "&::after": {
         content: '" "',

package/cjs/Button/PolymorphicIconButton.d.ts

@@ -10,7 +10,7 @@ export interface IconButtonBaseProps {
     title: string;
     showTooltip?: boolean;
     /** @default "top" */
-    tooltipPlacement?: TooltipWrapperBaseProps["placement"];
+    tooltipSide?: TooltipWrapperBaseProps["side"];
     loading?: boolean;
 }
 export declare type PolymorphicIconButtonProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, IconButtonBaseProps>;

package/cjs/Button/PolymorphicIconButton.js

@@ -16,7 +16,7 @@ var _Tooltip = require("../Tooltip");
 var _styles = require("./styles");
 var _types = require("./types");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["as", "className", "variant", "size", "icon", "title", "showTooltip", "tooltipPlacement", "loading"];
+var _excluded = ["as", "className", "variant", "size", "icon", "title", "showTooltip", "tooltipSide", "loading"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -43,8 +43,8 @@ var PolymorphicIconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     Icon = props.icon,
     title = props.title,
     showTooltip = props.showTooltip,
-    _props$tooltipPlaceme = props.tooltipPlacement,
-    tooltipPlacement = _props$tooltipPlaceme === void 0 ? "top" : _props$tooltipPlaceme,
+    _props$tooltipSide = props.tooltipSide,
+    tooltipSide = _props$tooltipSide === void 0 ? "top" : _props$tooltipSide,
     _props$loading = props.loading,
     loading = _props$loading === void 0 ? false : _props$loading,
     cleanedProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -61,7 +61,7 @@ var PolymorphicIconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
     delay: 500,
     show: showTooltip,
-    placement: tooltipPlacement,
+    side: tooltipSide,
     content: title,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, _objectSpread(_objectSpread({}, cleanedProps), {}, {
       className: iconButtonClassName,

package/cjs/Checkbox/Checkbox.js

@@ -67,9 +67,9 @@ var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center ", ""])), textPosition === "left" && "flex-row-reverse"), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["group inline-flex items-center ", ""])), textPosition === "left" && "flex-row-reverse"), className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            checkbox\n            ", "\n            ", "\n            ", "\n          "])), indeterminate && "checkbox-indeterminate", isChecked && "checkbox-checked", disabled && "checkbox-disabled"), STATUS_CLASSNAMES[status]),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            checkbox\n            ", "\n            ", "\n            ", "\n            ", "\n          "])), !disabled && "group-hover:border-grey-900", indeterminate && "checkbox-indeterminate", isChecked && "checkbox-checked", disabled && "checkbox-disabled"), STATUS_CLASSNAMES[status]),
       style: {
         color: checkedColor
       },
@@ -78,7 +78,7 @@ var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, checkboxProps), {}, {
         "aria-checked": indeterminate ? "mixed" : isChecked,
         id: id,
-        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n              opacity-0 absolute inset-0 cursor-pointer\n              ", "\n            "])), disabled && "cursor-not-allowed"),
+        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n              opacity-0 absolute inset-0\n              ", "\n            "])), disabled ? "cursor-not-allowed" : "cursor-pointer"),
         type: "checkbox",
         ref: ref,
         onChange: handleChange,

package/cjs/Checkbox/Checkbox.tailwind.js

@@ -18,7 +18,7 @@ var checkboxPlugin = plugin(function (_ref) {
       overflow: "hidden",
       color: theme("colors.accent.600"),
       background: "linear-gradient(180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
-      border: "1px solid ".concat(theme("colors.grey.200")),
+      border: "1px solid ".concat(theme("colors.grey.500")),
       boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
       borderRadius: theme("borderRadius.DEFAULT"),
       transition: "all 250ms cubic-bezier(0.23, 1, 0.32, 1)",

package/cjs/HelpUnderline/HelpUnderline.d.ts

@@ -1,12 +1,11 @@
 import type { FunctionComponent } from "react";
 import { TooltipWrapperProps } from "../Tooltip";
-export interface HelpUnderlineProps {
+import type { TooltipWrapperBaseProps } from "../Tooltip/types";
+export declare type HelpUnderlineProps = {
     /** @ignore */
     className?: string;
-    placement?: TooltipWrapperProps["placement"];
-    tooltipClassName?: TooltipWrapperProps["tooltipClassName"];
     tooltipContent: TooltipWrapperProps["content"];
     children: string;
-}
+} & Omit<TooltipWrapperBaseProps, "children">;
 export declare const HelpUnderline: FunctionComponent<HelpUnderlineProps>;
 export default HelpUnderline;

package/cjs/HelpUnderline/HelpUnderline.js

@@ -5,29 +5,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.HelpUnderline = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _Tooltip = require("../Tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
+var _excluded = ["className", "children", "tooltipClassName", "tooltipContent"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HelpUnderline = function HelpUnderline(_ref) {
   var className = _ref.className,
     children = _ref.children,
     tooltipClassName = _ref.tooltipClassName,
     tooltipContent = _ref.tooltipContent,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "bottom" : _ref$placement;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
-    wrapperClassName: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["leading-inherit"]))), className),
-    tooltipClassName: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["max-w-64"]))), tooltipClassName),
-    content: tooltipContent,
-    placement: placement,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, _objectSpread(_objectSpread({
+    tooltipClassName: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["max-w-64"]))), tooltipClassName),
+    content: tooltipContent
+  }, props), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["help-underline"]))),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["help-underline leading-inherit"]))), className),
       children: children
     })
-  });
+  }));
 };
 exports.HelpUnderline = HelpUnderline;
 var _default = HelpUnderline;

package/cjs/Input/Input.tailwind.js

@@ -16,11 +16,17 @@ var inputPlugin = plugin(function (_ref) {
       fontSize: theme("fontSize.base"),
       lineHeight: theme("lineHeight.base"),
       backgroundColor: theme("colors.white"),
-      border: "1px solid ".concat(theme("colors.grey.200")),
+      border: "1px solid ".concat(theme("colors.grey.500")),
       borderRadius: theme("borderRadius.DEFAULT"),
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       overflow: "hidden",
       transition: "all 100ms ease-in-out",
+      "&:not(.input-disabled):hover": {
+        borderColor: theme("colors.grey.600"),
+        ".input-spinner-button": {
+          borderColor: theme("colors.grey.600")
+        }
+      },
       input: {
         flex: "1",
         minWidth: "0px",
@@ -44,7 +50,10 @@ var inputPlugin = plugin(function (_ref) {
     },
     ".input-focused, .input:focus-within": {
       borderColor: theme("colors.accent.600"),
-      boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5"))
+      boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
+      ".input-spinner-button": {
+        borderColor: theme("colors.accent.600")
+      }
     },
     ".input-disabled": {
       cursor: "not-allowed",
@@ -67,7 +76,17 @@ var inputPlugin = plugin(function (_ref) {
     },
     ".input-invalid:not(.input-disabled)": {
       backgroundColor: theme("colors.red.100"),
-      borderColor: theme("colors.red.700")
+      borderColor: theme("colors.red.700"),
+      ".input-spinner-button": {
+        background: theme("colors.red.100"),
+        borderColor: theme("colors.red.700")
+      },
+      "&:hover": {
+        borderColor: theme("colors.red.800"),
+        ".input-spinner-button": {
+          borderColor: theme("colors.red.800")
+        }
+      }
     }
   });
   addComponents({
@@ -80,7 +99,7 @@ var inputPlugin = plugin(function (_ref) {
     },
     ".input-spinner-button": {
       background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)"),
-      borderColor: theme("colors.grey.200"),
+      borderColor: theme("colors.grey.500"),
       borderStyle: "solid",
       borderLeftWidth: "1px",
       flex: "1",
@@ -92,6 +111,11 @@ var inputPlugin = plugin(function (_ref) {
       },
       "&:not(:last-child)": {
         borderBottomWidth: "1px"
+      },
+      // This is to counterbalance the width of the first button's bottom border
+      // so that the two buttons have the same height.
+      "&:last-child": {
+        paddingTop: "1px"
       }
     }
   });

package/cjs/RadioGroup/RadioButton.tailwind.js

@@ -15,9 +15,12 @@ var radioButtonPlugin = plugin(function (_ref) {
       appearance: "none",
       outline: "0px",
       background: theme("colors.white"),
-      border: "1px solid ".concat(theme("colors.grey.200")),
+      border: "1px solid ".concat(theme("colors.grey.500")),
       borderRadius: "50%",
       boxShadow: "inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.3)),
+      "&:hover": {
+        borderColor: theme("colors.grey.600")
+      },
       "&:focus": {
         borderColor: theme("colors.accent.600"),
         boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5"))

package/cjs/RangeSlider/RangeSlider.js

@@ -27,7 +27,7 @@ var getThumbCount = function getThumbCount(value) {
 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-200"]))), className)
+    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)
   });
 };
 
@@ -87,7 +87,7 @@ var RangeSlider = function RangeSlider(_ref2) {
       })
     }), Array(thumbsCount).fill(undefined).map(function (_, idx) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSlider.SliderThumb, {
-        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n              absolute -translate-x-1.5 -translate-y-3\n              w-3 h-6 rounded-[2px] border border-grey-200\n              bg-white bg-gradient-to-b from-white to-grey-50 shadow-[0_1px_0_0_rgb(35_38_59_/_5%)]\n            "]))),
+        className: (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, {

package/cjs/Satellite/Satellite.d.ts

@@ -7,6 +7,5 @@ export interface SatelliteProps {
     portalTarget?: HTMLElement;
     children: ReactNode;
 }
-export declare const DEFAULT_PORTAL_TARGET_ID = "satellite-portal";
 export declare const Satellite: FunctionComponent<SatelliteProps>;
 export default Satellite;

package/cjs/Satellite/Satellite.js

@@ -4,31 +4,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Satellite = exports.DEFAULT_PORTAL_TARGET_ID = void 0;
+exports["default"] = exports.Satellite = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _SatelliteContext = _interopRequireDefault(require("./SatelliteContext"));
 var _SatelliteRouter = require("./SatelliteRouter");
 var _jsxRuntime = require("react/jsx-runtime");
-var DEFAULT_PORTAL_TARGET_ID = "satellite-portal";
-exports.DEFAULT_PORTAL_TARGET_ID = DEFAULT_PORTAL_TARGET_ID;
-var portalElement;
-var getPortalElement = function getPortalElement() {
-  if (typeof document === "undefined") return;
-  if (!portalElement) {
-    var element = document.createElement("div");
-    element.setAttribute("id", DEFAULT_PORTAL_TARGET_ID);
-    document.body.appendChild(element);
-    portalElement = element;
-  }
-  return portalElement;
-};
 var Satellite = function Satellite(_ref) {
   var _ref$router = _ref.router,
     router = _ref$router === void 0 ? _SatelliteRouter.router : _ref$router,
     locales = _ref.locales,
     _ref$portalTarget = _ref.portalTarget,
-    portalTarget = _ref$portalTarget === void 0 ? getPortalElement() : _ref$portalTarget,
+    customPortalTarget = _ref$portalTarget === void 0 ? null : _ref$portalTarget,
     children = _ref.children;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    defaultPortalTarget = _useState2[0],
+    setDefaultPortalTarget = _useState2[1];
+  var portalTarget = customPortalTarget !== null && customPortalTarget !== void 0 ? customPortalTarget : defaultPortalTarget;
   (0, _react.useEffect)(function () {
     if (!portalTarget) return;
     if (portalTarget === document.body) {
@@ -38,13 +31,15 @@ var Satellite = function Satellite(_ref) {
     // Radix adds pointer-events: none; on the body for its modal, so we need to reenable it for other portaled elements (tooltips, menus, autocomplete)
     portalTarget.style.pointerEvents = "auto";
   }, [portalTarget]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SatelliteContext["default"].Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SatelliteContext["default"].Provider, {
     value: {
       router: router,
       locales: locales,
       portalTarget: portalTarget
     },
-    children: children
+    children: [children, !customPortalTarget && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: setDefaultPortalTarget
+    })]
   });
 };
 exports.Satellite = Satellite;

package/cjs/Satellite/SatelliteContext.d.ts

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

package/cjs/Satellite/SatelliteContext.js

@@ -12,7 +12,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DEFAULT_CONTEXT = {
   router: _SatelliteRouter.router,
-  locales: {}
+  locales: {},
+  portalTarget: null
 };
 var SatelliteContext = /*#__PURE__*/(0, _react.createContext)(DEFAULT_CONTEXT);
 exports.SatelliteContext = SatelliteContext;

package/cjs/Select/Select.tailwind.js

@@ -23,7 +23,7 @@ var selectPlugin = plugin(function (_ref) {
       backgroundPosition: "right ".concat(theme("spacing.4"), " center, 0 0"),
       backgroundRepeat: "no-repeat",
       borderRadius: theme("borderRadius.DEFAULT"),
-      border: "1px solid ".concat(theme("colors.grey.200")),
+      border: "1px solid ".concat(theme("colors.grey.500")),
       boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5")),
       "&::-moz-focus-inner, &:-moz-focusring": {
         outline: "none",
@@ -44,7 +44,7 @@ var selectPlugin = plugin(function (_ref) {
       },
       "&:hover": {
         backgroundImage: "\n          ".concat(selectIconBG(theme("colors.grey.500")), ",\n          linear-gradient(-180deg, ").concat(theme("colors.grey.50"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n        "),
-        borderColor: theme("colors.grey.200")
+        borderColor: theme("colors.grey.600")
       },
       "&:focus": {
         backgroundImage: "\n          ".concat(selectIconBG(theme("colors.grey.500")), ",\n          linear-gradient(-180deg, ").concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n        "),

package/cjs/Separator/Separator.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import * as RadixSeparator from "@radix-ui/react-separator";
+export interface SeparatorProps {
+    className?: string;
+    orientation?: RadixSeparator.SeparatorProps["orientation"];
+}
+export declare const Separator: ({ className, orientation }: SeparatorProps) => JSX.Element;
+export default Separator;

package/cjs/Separator/Separator.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Separator = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var RadixSeparator = _interopRequireWildcard(require("@radix-ui/react-separator"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var Separator = function Separator(_ref) {
+  var className = _ref.className,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixSeparator.Root, {
+    decorative: true,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["separator"]))), className),
+    orientation: orientation
+  });
+};
+exports.Separator = Separator;
+var _default = Separator;
+exports["default"] = _default;

package/cjs/Separator/Separator.tailwind.d.ts

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

package/cjs/Separator/Separator.tailwind.js

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

package/cjs/Separator/index.d.ts

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

package/cjs/Separator/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 _Separator["default"];
+  }
+});
+var _Separator = _interopRequireWildcard(require("./Separator"));
+Object.keys(_Separator).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Separator[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Separator[key];
+    }
+  });
+});
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/Sidebar/SidebarButtonLink.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SidebarButtonLink = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _reactFeather = require("react-feather");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
@@ -15,24 +15,18 @@ var _Tooltip = require("../Tooltip");
 var _useLinkProps = _interopRequireDefault(require("../utils/useLinkProps"));
 var _SidebarContext = require("./SidebarContext");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Tooltip = function Tooltip(_ref) {
   var content = _ref.content,
     children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
-    placement: "right",
+    side: "right",
+    sideOffset: 24,
     delay: 0,
     hideDelay: 0,
-    modifiers: [{
-      name: "offset",
-      options: {
-        offset: [0, 32]
-      }
-    }],
     content: content,
-    wrapperClassName: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["block"]))),
     interactive: false,
     children: children
   });
@@ -72,17 +66,17 @@ var SidebarButtonLink = function SidebarButtonLink(props) {
       onBlur: function onBlur() {
         return setIsInteractedWith(false);
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n          h-8 min-w-8 w-full rounded\n          flex items-center space-x-3\n          border border-transparent\n          display-body\n          hover:no-underline focus:no-underline\n          ", "\n          ", "\n          ", "\n          ", "\n        "])), disabled ? "cursor-not-allowed opacity-70" : "focus:border-grey-500", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
+      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          h-8 min-w-8 w-full rounded\n          flex items-center space-x-3\n          border border-transparent\n          display-body\n          hover:no-underline focus:no-underline\n          ", "\n          ", "\n          ", "\n          ", "\n        "])), disabled ? "cursor-not-allowed opacity-70" : "focus:border-grey-500", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
       "aria-current": isActive,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["", " ml-[-3px]"])), showColors ? "text-accent-600" : "text-grey-400"),
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["", " ml-[-3px]"])), showColors ? "text-accent-600" : "text-grey-400"),
         height: 20,
         width: 20
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
         children: children
       }), isExternalLink && !collapsed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ExternalLink, {
-        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["", " !ml-1 shrink-0"])), showColors ? "text-accent-600" : "typo-subdued"),
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["", " !ml-1 shrink-0"])), showColors ? "text-accent-600" : "typo-subdued"),
         size: "1em"
       })]
     }))

package/cjs/Tag/Tag.js

@@ -16,7 +16,7 @@ var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satel
 var _Tooltip = require("../Tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "variant", "className", "onAdd", "addTooltip", "onRemove", "removeTooltip", "locale"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DEFAULT_TAG_LOCALE = {
@@ -93,7 +93,7 @@ var Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onRemove === null || onRemove === void 0 ? void 0 : onRemove(evt);
   };
   var content = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["truncate flex-1 leading-base"]))),
+    className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["truncate flex-1"]))),
     children: children
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", _objectSpread(_objectSpread({}, props), {}, {
@@ -102,10 +102,9 @@ var Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     children: [addable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
       content: addTooltip,
       hideDelay: 0,
-      placement: "bottom",
-      wrapperClassName: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["h-full"]))),
+      side: "bottom",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["tag-add-button"]))), !removable && (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["-mr-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["tag-add-button"]))), !removable && (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["-mr-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
         type: "button",
         onClick: handleAdd,
         "aria-label": typeof locale.addButton === "function" ? locale.addButton(title) : locale.addButton,
@@ -116,9 +115,10 @@ var Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }) : content, removable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
       content: removeTooltip,
       hideDelay: 0,
-      placement: "bottom-start",
+      side: "bottom",
+      align: "start",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["tag-close-button p-1"]))), !addable && (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["ml-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["tag-close-button p-1"]))), !addable && (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["ml-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
         type: "button",
         onClick: handleRemove,
         "aria-label": typeof locale.removeButton === "function" ? locale.removeButton(title) : locale.removeButton,

package/cjs/Toggle/Toggle.js

@@ -11,10 +11,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
-var _reactFeather = require("react-feather");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2;
 var _excluded = ["className", "checked", "defaultChecked"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -52,17 +51,8 @@ var Toggle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       type: "checkbox",
       role: "switch",
       ref: ref
-    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["toggle flex justify-around items-center"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.Check, {
-        size: 12,
-        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-white"]))),
-        "aria-hidden": true
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
-        size: 12,
-        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"]))),
-        "aria-hidden": true
-      })]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["toggle"])))
     })]
   });
 });