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

package/esm/TextArea/TextArea.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject;
+var _excluded = ["className"];
+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 } from "react";
+import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("textarea", _objectSpread(_objectSpread({}, otherProps), {}, {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["text-area"]))), className),
+    ref: ref
+  }));
+});
+TextArea.displayName = "TextArea";
+export default TextArea;

package/esm/TextArea/TextArea.tailwind.d.ts

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

package/esm/TextArea/TextArea.tailwind.js

@@ -0,0 +1,40 @@
+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 textAreaPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".text-area": {
+      width: "100%",
+      padding: theme("spacing.4"),
+      backgroundColor: theme("colors.white"),
+      border: "1px solid ".concat(theme("colors.grey.200")),
+      borderRadius: theme("borderRadius.DEFAULT"),
+      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
+      transition: "all 100ms ease-in-out",
+      fontSize: theme("fontSize.base"),
+      lineHeight: theme("lineHeight.base"),
+      "&::placeholder": {
+        color: theme("colors.grey.600")
+      },
+      "&:focus": {
+        borderColor: theme("colors.accent.600"),
+        boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
+        outline: "none"
+      },
+      "&:disabled": {
+        cursor: "not-allowed",
+        color: theme("colors.grey.300"),
+        background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
+        borderColor: disabledColor(theme("colors.grey.200")),
+        boxShadow: "none"
+      }
+    }
+  });
+});
+export default textAreaPlugin;

package/esm/TextArea/index.d.ts

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

package/esm/TextArea/index.js

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

package/esm/TextWrap/TextWrap.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface TextWrapProps extends Omit<JSX.IntrinsicElements["span"], "children"> {
+    /** The max number of lines before the text is cut with an ellipsis */
+    maxLines?: number;
+    children: string;
+}
+export declare const TextWrap: ({ children: text, maxLines, style, ...spanProps }: TextWrapProps) => JSX.Element;
+export default TextWrap;

package/esm/TextWrap/TextWrap.js

@@ -0,0 +1,47 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["children", "maxLines", "style"];
+var _templateObject;
+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 stl from "../styles/helpers/satellitePrefixer";
+import isCssPropertySupported from "../utils/isCssPropertySupported";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BASE_STYLES = isCssPropertySupported("overflowWrap", "anywhere") ? {
+  whiteSpace: "normal",
+  overflowWrap: "anywhere"
+} : {
+  wordBreak: "break-all"
+};
+var SEPARATOR_ELEMENT = /*#__PURE__*/_jsx("span", {
+  className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["invisible"]))),
+  "aria-hidden": "true",
+  children: "\u200B"
+});
+export var TextWrap = function TextWrap(_ref) {
+  var text = _ref.children,
+    maxLines = _ref.maxLines,
+    style = _ref.style,
+    spanProps = _objectWithoutProperties(_ref, _excluded);
+  var clampStyle = typeof maxLines !== "undefined" && maxLines >= 1 ? _objectSpread(_objectSpread({}, BASE_STYLES), {}, {
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: maxLines,
+    overflow: "hidden"
+  }) : BASE_STYLES;
+  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+    style: _objectSpread(_objectSpread({}, clampStyle), style)
+  }, spanProps), {}, {
+    children: text.split(/([\W_]+)/).flatMap(function (part, idx) {
+      if (!part) {
+        return null;
+      }
+      return idx % 2 === 0 ? part : /*#__PURE__*/_jsxs("span", {
+        children: [part, SEPARATOR_ELEMENT]
+      }, "".concat(idx, "-").concat(part));
+    }).filter(Boolean)
+  }));
+};
+export default TextWrap;

package/esm/TextWrap/index.d.ts

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

package/esm/TextWrap/index.js

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

package/esm/Toggle/Toggle.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, InputHTMLAttributes } from "react";
+export declare type ToggleProps = Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "onChange" | "required" | "autoFocus" | "disabled" | "checked" | "defaultChecked">;
+/**
+ * Toggles are a quick way to view and switch between enabled or disabled states. Use toggles to turn something on or off instantly.
+ *
+ * - Toggles should not require a Save button to apply the changes
+ * - If a Save button is needed, try using Radio groups or Checkboxes instead
+ */
+export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "required" | "disabled" | "autoFocus" | "checked" | "defaultChecked" | "onChange"> & import("react").RefAttributes<HTMLInputElement>>;
+export default Toggle;

package/esm/Toggle/Toggle.js

@@ -0,0 +1,64 @@
+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 _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";
+/**
+ * Toggles are a quick way to view and switch between enabled or disabled states. Use toggles to turn something on or off instantly.
+ *
+ * - Toggles should not require a Save button to apply the changes
+ * - If a Save button is needed, try using Radio groups or Checkboxes instead
+ */
+export var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    checked = _ref.checked,
+    defaultChecked = _ref.defaultChecked,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  var isControlled = typeof checked === "boolean";
+  var _useState = useState(Boolean(isControlled ? checked : defaultChecked)),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalChecked = _useState2[0],
+    setInternalChecked = _useState2[1];
+  var isChecked = Boolean(isControlled ? checked : internalChecked);
+  var handleChange = function handleChange(evt) {
+    var _inputProps$onChange;
+    (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, evt);
+    if (!isControlled && !evt.isDefaultPrevented()) {
+      setInternalChecked(evt.currentTarget.checked);
+    }
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    translate: "yes",
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["toggle-container"]))), className),
+    children: [/*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+      onChange: handleChange,
+      checked: isChecked,
+      "aria-checked": isChecked,
+      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
+      })]
+    })]
+  });
+});
+Toggle.displayName = "Toggle";
+export default Toggle;

package/esm/Toggle/Toggle.tailwind.d.ts

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

package/esm/Toggle/Toggle.tailwind.js

@@ -0,0 +1,66 @@
+import _rgba from "../styles/rgba";
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var rgba = _rgba;
+var togglePlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  var transition = "all 72ms ease-in-out";
+  addComponents({
+    ".toggle-container": {
+      position: "relative",
+      display: "block",
+      height: "18px",
+      width: "32px",
+      overflow: "hidden",
+      "& input": {
+        position: "absolute",
+        top: "0px",
+        left: "0px",
+        width: "100%",
+        height: "100%",
+        opacity: "0",
+        cursor: "pointer",
+        "&:disabled": {
+          cursor: "not-allowed"
+        }
+      }
+    },
+    ".toggle": {
+      position: "absolute",
+      top: "0px",
+      left: "0px",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      borderRadius: "9999px",
+      background: theme("colors.grey.100"),
+      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.2)),
+      transition: transition,
+      "&::after": {
+        position: "absolute",
+        top: "1px",
+        left: "1px",
+        width: "16px",
+        height: "16px",
+        content: '" "',
+        borderRadius: "9999px",
+        background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)"),
+        boxShadow: "0px 1px 1px 0px ".concat(theme("colors.shadow.10")),
+        transition: transition
+      },
+      "input:checked ~ &": {
+        background: theme("colors.accent.600"),
+        boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.900"), 0.1)),
+        "&:after": {
+          transform: "translateX(14px)"
+        }
+      },
+      "input:disabled ~ &": {
+        opacity: "0.6"
+      }
+    }
+  });
+});
+export default togglePlugin;

package/esm/Toggle/index.d.ts

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

package/esm/Toggle/index.js

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

package/esm/Tooltip/OverflowTooltipWrapper.d.ts

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

package/esm/Tooltip/OverflowTooltipWrapper.js

@@ -0,0 +1,94 @@
+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;
+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 { 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 _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;
+  var onMouseEnter = function onMouseEnter(evt) {
+    return setTooltipText(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"])))),
+      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

@@ -0,0 +1,24 @@
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+export declare type TooltipVariant = "dark" | "light";
+export interface TooltipProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    variant?: TooltipVariant;
+}
+/**
+ * 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.
+ *
+ * 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
+ */
+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;

package/esm/Tooltip/Tooltip.js

@@ -0,0 +1,45 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["className", "variant"];
+var _templateObject, _templateObject2, _templateObject3;
+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 } from "react";
+import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+var VARIANT_CLASSNAMES = {
+  dark: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tooltip-dark"]))),
+  light: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tooltip-light"])))
+};
+
+/**
+ * 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.
+ *
+ * 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
+ */
+export var Tooltip = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "dark" : _ref$variant,
+    divProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, divProps), {}, {
+    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["tooltip typo-display-body"]))), VARIANT_CLASSNAMES[variant], className),
+    ref: ref
+  }));
+});
+Tooltip.displayName = "Tooltip";
+export default Tooltip;

package/esm/Tooltip/Tooltip.tailwind.d.ts

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

package/esm/Tooltip/Tooltip.tailwind.js

@@ -0,0 +1,113 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var tooltipPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  var arrowSize = 4;
+
+  /** @type {string} */
+  var tooltipDarkBackground = theme("colors.grey.900");
+  /** @type {string} */
+  var tooltipLightBackground = theme("colors.white");
+  addComponents({
+    ".tooltip": {
+      padding: "".concat(theme("spacing.1"), " ").concat(theme("spacing.2")),
+      backgroundColor: tooltipDarkBackground,
+      color: theme("colors.white"),
+      boxShadow: theme("boxShadow.z200"),
+      borderRadius: theme("borderRadius.DEFAULT"),
+      // Used on the dashboard, should probably move over there
+      code: {
+        color: "currentColor",
+        border: "1px solid currentColor",
+        background: "initial",
+        whiteSpace: "nowrap",
+        lineHeight: "2"
+      }
+    },
+    ".tooltip-dark": {
+      ".typo-link": {
+        color: theme("colors.accent.300"),
+        textDecoration: "underline"
+      }
+    },
+    ".tooltip-light": {
+      color: theme("colors.grey.900"),
+      backgroundColor: tooltipLightBackground
+    }
+  });
+  addComponents({
+    ".tooltip-wrapper": {
+      display: "inline-block",
+      lineHeight: "0",
+      outline: "0px"
+    },
+    ".tooltip-wrapper-popper": {
+      zIndex: theme("zIndex.tooltip"),
+      userSelect: "none",
+      maxWidth: theme("spacing.64")
+    },
+    ".tooltip-wrapper-arrow": {
+      position: "absolute",
+      display: "block",
+      width: "".concat(arrowSize, "px"),
+      height: "".concat(arrowSize, "px"),
+      border: "".concat(arrowSize, "px solid transparent"),
+      color: tooltipDarkBackground,
+      '[data-popper-placement^="right"] > &': {
+        left: "".concat(-arrowSize, "px"),
+        borderLeft: "none",
+        borderRightColor: "currentColor"
+      },
+      '[data-popper-placement^="left"] > &': {
+        right: "".concat(-arrowSize, "px"),
+        borderRight: "none",
+        borderLeftColor: "currentColor"
+      },
+      '[data-popper-placement^="top"] > &': {
+        top: "100%",
+        borderBottom: "none",
+        borderTopColor: "currentColor"
+      },
+      '[data-popper-placement^="bottom"] > &': {
+        top: "".concat(-arrowSize, "px"),
+        borderTop: "none",
+        borderBottomColor: "currentColor"
+      }
+    },
+    ".tooltip-wrapper-arrow-light": {
+      color: theme("colors.shadow.10"),
+      "&::after": {
+        position: "absolute",
+        content: '" "',
+        border: "".concat(arrowSize - 1, "px solid transparent")
+      },
+      '[data-popper-placement^="left"] > &::after': {
+        right: "1px",
+        transform: "translate(0, -50%)",
+        borderRight: "none",
+        borderLeftColor: tooltipLightBackground
+      },
+      '[data-popper-placement^="right"] > &::after': {
+        left: "1px",
+        transform: "translate(0, -50%)",
+        borderLeft: "none",
+        borderRightColor: tooltipLightBackground
+      },
+      '[data-popper-placement^="top"] > &::after': {
+        bottom: "1px",
+        transform: "translate(-50%, 0)",
+        borderBottom: "none",
+        borderTopColor: tooltipLightBackground
+      },
+      '[data-popper-placement^="bottom"] > &::after': {
+        top: "1px",
+        transform: "translate(-50%, 0)",
+        borderTop: "none",
+        borderBottomColor: tooltipLightBackground
+      }
+    }
+  });
+});
+export default tooltipPlugin;

package/esm/Tooltip/TooltipWrapper.d.ts

@@ -0,0 +1,28 @@
+import type { FunctionComponent, ReactNode } from "react";
+import { StrictModifier } from "react-popper";
+import type { TooltipWrapperBaseProps } from "./types";
+export declare const DEFAULT_TOOLTIP_POPPER_MODIFIERS: StrictModifier[];
+export interface TooltipWrapperProps extends TooltipWrapperBaseProps {
+    show?: boolean;
+    /**
+     * Controls how long you should hover the wrapped element before displaying the tooltip (in ms)
+     * @default 0
+     * */
+    delay?: number;
+    /**
+     * Controls how long the tooltip should stay displayed when leaving the wrapped element (in ms)
+     * @default 500
+     * */
+    hideDelay?: number;
+    /**
+     * Indicates whether the tooltip itself should be considered when computing the tooltip target.
+     * Useful when the tooltip itself contains selectable text or interactive elements, and thus
+     * shouldn't be dismissed when the mouse hovers it
+     * @default true
+     */
+    interactive?: boolean;
+    content: ReactNode;
+    children: ReactNode;
+}
+export declare const TooltipWrapper: FunctionComponent<TooltipWrapperProps>;
+export default TooltipWrapper;