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

package/esm/Input/Input.tailwind.js

@@ -17,11 +17,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",
@@ -45,7 +51,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",
@@ -68,7 +77,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({
@@ -81,7 +100,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",
@@ -93,6 +112,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/esm/RadioGroup/RadioButton.tailwind.js

@@ -16,9 +16,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/esm/RangeSlider/RangeSlider.js

@@ -23,7 +23,7 @@ var getThumbCount = function getThumbCount(value) {
 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-200"]))), className)
+    className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-3 w-px bg-grey-500 group-hover:bg-grey-600"]))), className)
   });
 };
 
@@ -83,7 +83,7 @@ export var RangeSlider = function RangeSlider(_ref2) {
       })
     }), Array(thumbsCount).fill(undefined).map(function (_, idx) {
       return /*#__PURE__*/_jsxs(SliderThumb, {
-        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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: 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, {

package/esm/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/esm/Satellite/Satellite.js

@@ -1,26 +1,21 @@
-import { useEffect } from "react";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from "react";
 import SatelliteContext from "./SatelliteContext";
 import { router as defaultRouter } from "./SatelliteRouter";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var DEFAULT_PORTAL_TARGET_ID = "satellite-portal";
-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;
-};
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export var Satellite = function Satellite(_ref) {
   var _ref$router = _ref.router,
     router = _ref$router === void 0 ? defaultRouter : _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 = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    defaultPortalTarget = _useState2[0],
+    setDefaultPortalTarget = _useState2[1];
+  var portalTarget = customPortalTarget !== null && customPortalTarget !== void 0 ? customPortalTarget : defaultPortalTarget;
   useEffect(function () {
     if (!portalTarget) return;
     if (portalTarget === document.body) {
@@ -30,13 +25,15 @@ export 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__*/_jsx(SatelliteContext.Provider, {
+  return /*#__PURE__*/_jsxs(SatelliteContext.Provider, {
     value: {
       router: router,
       locales: locales,
       portalTarget: portalTarget
     },
-    children: children
+    children: [children, !customPortalTarget && /*#__PURE__*/_jsx("div", {
+      ref: setDefaultPortalTarget
+    })]
   });
 };
 export default Satellite;

package/esm/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/esm/Satellite/SatelliteContext.js

@@ -5,7 +5,8 @@ import { createContext, useContext } from "react";
 import { router } from "./SatelliteRouter";
 var DEFAULT_CONTEXT = {
   router: router,
-  locales: {}
+  locales: {},
+  portalTarget: null
 };
 export var SatelliteContext = /*#__PURE__*/createContext(DEFAULT_CONTEXT);
 export var useSatelliteContext = function useSatelliteContext() {

package/esm/Select/Select.tailwind.js

@@ -24,7 +24,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",
@@ -45,7 +45,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/esm/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/esm/Separator/Separator.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import * as RadixSeparator from "@radix-ui/react-separator";
+import cx from "clsx";
+import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Separator = function Separator(_ref) {
+  var className = _ref.className,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation;
+  return /*#__PURE__*/_jsx(RadixSeparator.Root, {
+    decorative: true,
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["separator"]))), className),
+    orientation: orientation
+  });
+};
+export default Separator;

package/esm/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/esm/Separator/Separator.tailwind.js

@@ -0,0 +1,24 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _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)
+      }
+    }
+  });
+});
+export default separatorPlugin;

package/esm/Separator/index.d.ts

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

package/esm/Separator/index.js

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

package/esm/Sidebar/SidebarButtonLink.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { useState } from "react";
@@ -16,17 +16,11 @@ var Tooltip = function Tooltip(_ref) {
   var content = _ref.content,
     children = _ref.children;
   return /*#__PURE__*/_jsx(TooltipWrapper, {
-    placement: "right",
+    side: "right",
+    sideOffset: 24,
     delay: 0,
     hideDelay: 0,
-    modifiers: [{
-      name: "offset",
-      options: {
-        offset: [0, 32]
-      }
-    }],
     content: content,
-    wrapperClassName: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["block"]))),
     interactive: false,
     children: children
   });
@@ -66,17 +60,17 @@ export var SidebarButtonLink = function SidebarButtonLink(props) {
       onBlur: function onBlur() {
         return setIsInteractedWith(false);
       },
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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__*/_jsx(Icon, {
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["", " ml-[-3px]"])), showColors ? "text-accent-600" : "text-grey-400"),
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", " ml-[-3px]"])), showColors ? "text-accent-600" : "text-grey-400"),
         height: 20,
         width: 20
       }), /*#__PURE__*/_jsx("span", {
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
         children: children
       }), isExternalLink && !collapsed && /*#__PURE__*/_jsx(ExternalLink, {
-        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["", " !ml-1 shrink-0"])), showColors ? "text-accent-600" : "typo-subdued"),
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["", " !ml-1 shrink-0"])), showColors ? "text-accent-600" : "typo-subdued"),
         size: "1em"
       })]
     }))

package/esm/Tag/Tag.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 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) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import cx from "clsx";
@@ -87,7 +87,7 @@ export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onRemove === null || onRemove === void 0 ? void 0 : onRemove(evt);
   };
   var content = /*#__PURE__*/_jsx("span", {
-    className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["truncate flex-1 leading-base"]))),
+    className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["truncate flex-1"]))),
     children: children
   });
   return /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread({}, props), {}, {
@@ -96,10 +96,9 @@ export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     children: [addable ? /*#__PURE__*/_jsx(TooltipWrapper, {
       content: addTooltip,
       hideDelay: 0,
-      placement: "bottom",
-      wrapperClassName: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["h-full"]))),
+      side: "bottom",
       children: /*#__PURE__*/_jsxs("button", {
-        className: cx(stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["tag-add-button"]))), !removable && stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["-mr-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        className: cx(stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["tag-add-button"]))), !removable && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["-mr-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
         type: "button",
         onClick: handleAdd,
         "aria-label": typeof locale.addButton === "function" ? locale.addButton(title) : locale.addButton,
@@ -110,9 +109,10 @@ export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }) : content, removable && /*#__PURE__*/_jsx(TooltipWrapper, {
       content: removeTooltip,
       hideDelay: 0,
-      placement: "bottom-start",
+      side: "bottom",
+      align: "start",
       children: /*#__PURE__*/_jsx("button", {
-        className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["tag-close-button p-1"]))), !addable && stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["ml-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        className: cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["tag-close-button p-1"]))), !addable && stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["ml-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
         type: "button",
         onClick: handleRemove,
         "aria-label": typeof locale.removeButton === "function" ? locale.removeButton(title) : locale.removeButton,

package/esm/Toggle/Toggle.js

@@ -2,13 +2,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import cx from "clsx";
 import { forwardRef, useState } from "react";
-import { Check, X } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -46,17 +45,8 @@ export var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
       type: "checkbox",
       role: "switch",
       ref: ref
-    })), /*#__PURE__*/_jsxs("div", {
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["toggle flex justify-around items-center"]))),
-      children: [/*#__PURE__*/_jsx(Check, {
-        size: 12,
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-white"]))),
-        "aria-hidden": true
-      }), /*#__PURE__*/_jsx(X, {
-        size: 12,
-        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["text-grey-300"]))),
-        "aria-hidden": true
-      })]
+    })), /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["toggle"])))
     })]
   });
 });

package/esm/Toggle/Toggle.tailwind.js

@@ -25,6 +25,12 @@ var togglePlugin = plugin(function (_ref) {
         "&:disabled": {
           cursor: "not-allowed"
         }
+      },
+      "&:hover .toggle:after": {
+        transform: "translateX(2px)"
+      },
+      "&:hover input:checked ~ .toggle:after": {
+        transform: "translateX(12px)"
       }
     },
     ".toggle": {
@@ -35,7 +41,7 @@ var togglePlugin = plugin(function (_ref) {
       height: "100%",
       pointerEvents: "none",
       borderRadius: "9999px",
-      background: theme("colors.grey.100"),
+      background: theme("colors.grey.500"),
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.2)),
       transition: transition,
       "&::after": {
@@ -58,7 +64,7 @@ var togglePlugin = plugin(function (_ref) {
         }
       },
       "input:disabled ~ &": {
-        opacity: "0.6"
+        background: theme("colors.grey.200")
       }
     }
   });

package/esm/Tooltip/OverflowTooltipWrapper.d.ts

@@ -1,6 +1,3 @@
-import type { FunctionComponent } from "react";
+/// <reference types="react" />
 import type { TooltipWrapperBaseProps } from "./types";
-/** @ignore */
-export declare const isOverflowing: (element: HTMLElement) => boolean;
-export declare const OverflowTooltipWrapper: FunctionComponent<TooltipWrapperBaseProps>;
-export default OverflowTooltipWrapper;
+export declare const OverflowTooltipWrapper: ({ children, ...props }: TooltipWrapperBaseProps) => JSX.Element;

package/esm/Tooltip/OverflowTooltipWrapper.js

@@ -1,94 +1,36 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3;
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject;
+var _excluded = ["children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import cx from "clsx";
 import { useState } from "react";
-import { usePopper } from "react-popper";
-import { useCreatePortal } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import TextWrap from "../TextWrap";
-import Tooltip from "./Tooltip";
-import { DEFAULT_TOOLTIP_POPPER_MODIFIERS } from "./TooltipWrapper";
+import { TooltipWrapper } from "./TooltipWrapper";
+import { isOverflowing } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-/** @ignore */
-export var isOverflowing = function isOverflowing(element) {
-  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
-};
 export var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
-  var _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
-    _ref$tooltipVariant = _ref.tooltipVariant,
-    tooltipVariant = _ref$tooltipVariant === void 0 ? "dark" : _ref$tooltipVariant,
-    wrapperClassName = _ref.wrapperClassName,
-    tooltipClassName = _ref.tooltipClassName,
-    children = _ref.children,
-    _ref$modifiers = _ref.modifiers,
-    modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
-    _ref$noArrow = _ref.noArrow,
-    noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow;
-  var createPortal = useCreatePortal();
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    targetEl = _useState2[0],
-    setTargetEl = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    popperEl = _useState4[0],
-    setPopperEl = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    arrowEl = _useState6[0],
-    setArrowEl = _useState6[1];
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    tooltipText = _useState8[0],
-    setTooltipText = _useState8[1];
-  var _usePopper = usePopper(targetEl, popperEl, {
-      placement: placement,
-      strategy: "fixed",
-      modifiers: [].concat(_toConsumableArray(DEFAULT_TOOLTIP_POPPER_MODIFIERS), [{
-        name: "arrow",
-        options: {
-          element: arrowEl
-        }
-      }], _toConsumableArray(modifiers))
-    }),
-    styles = _usePopper.styles,
-    attributes = _usePopper.attributes;
+    content = _useState2[0],
+    setContent = _useState2[1];
   var onMouseEnter = function onMouseEnter(evt) {
-    return setTooltipText(isOverflowing(evt.currentTarget) ? evt.currentTarget.textContent : null);
+    setContent(isOverflowing(evt.currentTarget) ? evt.currentTarget.textContent : null);
   };
-  var onMouseLeave = function onMouseLeave() {
-    return setTooltipText(null);
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
-      ref: setTargetEl,
-      className: cx(wrapperClassName, stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["truncate"])))),
+  return /*#__PURE__*/_jsx(TooltipWrapper, _objectSpread(_objectSpread({
+    content: content && /*#__PURE__*/_jsx(TextWrap, {
+      children: content
+    })
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["truncate"]))),
       onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
       children: children
-    }), !!tooltipText && createPortal( /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
-      style: styles.popper,
-      className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tooltip-wrapper-popper"]))), tooltipClassName),
-      ref: setPopperEl,
-      children: [!noArrow && /*#__PURE__*/_jsx("div", {
-        ref: setArrowEl,
-        style: styles.arrow,
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["tooltip-wrapper-arrow ", ""])), tooltipVariant === "light" && "tooltip-wrapper-arrow-light")
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        variant: tooltipVariant,
-        children: /*#__PURE__*/_jsx(TextWrap, {
-          children: tooltipText
-        })
-      })]
-    })))]
-  });
-};
-export default OverflowTooltipWrapper;
+    })
+  }));
+};

package/esm/Tooltip/Tooltip.d.ts

@@ -7,18 +7,18 @@ export interface TooltipProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivEl
  * Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.
  *
  * Use tooltips to identify or add a small amount of information to an element. Typically, tooltips are used to help users understand the meaning or purpose of icons, showing the full version of truncated text, or displaying the alt text for an image. Tooltips do not receive input focus.
- * When writing tooltips, be short and concise.. When you need to add more than a single line of extra information, consider using inline dialogs instead.
+ * When writing tooltips, be short and concise. When you need to add more than a single line of extra information, consider using inline dialogs instead.
  *
  * The position of tooltips is flexible and will change depending on how close the element is to the edge of the screen.
  *
  * ## Best practices
  * Tooltips should:
  *
- * - Provide useful, additional information or clarification
- * - Succinctly describe or expand on the element they point to
- * - Not be used to communicate critical information, including errors in forms or other interaction feedback
- * - Not contain any links or buttons
- * - Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience
+ * - Provide useful, additional information or clarification.
+ * - Succinctly describe or expand on the element they point to.
+ * - Not be used to communicate critical information, including errors in forms or other interaction feedback.
+ * - Not contain any links, inputs, or buttons.
+ * - Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.
  */
 export declare const Tooltip: import("react").ForwardRefExoticComponent<Pick<TooltipProps, "key" | "id" | "color" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Tooltip;