@algolia/satellite 1.0.0-beta.132 → 1.0.0-beta.135

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

@@ -1,5 +1,5 @@
 export = tooltipPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const tooltipPlugin: import('../tailwind-types').TailwindPlugin;
+declare const tooltipPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/esm/Tooltip/Tooltip.tailwind.js

@@ -1,13 +1,15 @@
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var tooltipPlugin = function tooltipPlugin(_ref) {
+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": {
@@ -22,7 +24,7 @@ var tooltipPlugin = function tooltipPlugin(_ref) {
         border: "1px solid currentColor",
         background: "initial",
         whiteSpace: "nowrap",
-        lineHeight: 2
+        lineHeight: "2"
       }
     },
     ".tooltip-dark": {
@@ -38,8 +40,8 @@ var tooltipPlugin = function tooltipPlugin(_ref) {
   addComponents({
     ".tooltip-wrapper": {
       display: "inline-block",
-      lineHeight: 0,
-      outline: 0
+      lineHeight: "0",
+      outline: "0px"
     },
     ".tooltip-wrapper-popper": {
       zIndex: theme("zIndex.tooltip"),
@@ -49,17 +51,17 @@ var tooltipPlugin = function tooltipPlugin(_ref) {
     ".tooltip-wrapper-arrow": {
       position: "absolute",
       display: "block",
-      width: arrowSize,
-      height: arrowSize,
+      width: "".concat(arrowSize, "px"),
+      height: "".concat(arrowSize, "px"),
       border: "".concat(arrowSize, "px solid transparent"),
       color: tooltipDarkBackground,
       '[data-popper-placement^="right"] > &': {
-        left: -arrowSize,
+        left: "".concat(-arrowSize, "px"),
         borderLeft: "none",
         borderRightColor: "currentColor"
       },
       '[data-popper-placement^="left"] > &': {
-        right: -arrowSize,
+        right: "".concat(-arrowSize, "px"),
         borderRight: "none",
         borderLeftColor: "currentColor"
       },
@@ -69,7 +71,7 @@ var tooltipPlugin = function tooltipPlugin(_ref) {
         borderTopColor: "currentColor"
       },
       '[data-popper-placement^="bottom"] > &': {
-        top: -arrowSize,
+        top: "".concat(-arrowSize, "px"),
         borderTop: "none",
         borderBottomColor: "currentColor"
       }
@@ -82,31 +84,30 @@ var tooltipPlugin = function tooltipPlugin(_ref) {
         border: "".concat(arrowSize - 1, "px solid transparent")
       },
       '[data-popper-placement^="left"] > &::after': {
-        right: 1,
+        right: "1px",
         transform: "translate(0, -50%)",
         borderRight: "none",
         borderLeftColor: tooltipLightBackground
       },
       '[data-popper-placement^="right"] > &::after': {
-        left: 1,
+        left: "1px",
         transform: "translate(0, -50%)",
         borderLeft: "none",
         borderRightColor: tooltipLightBackground
       },
       '[data-popper-placement^="top"] > &::after': {
-        bottom: 1,
+        bottom: "1px",
         transform: "translate(-50%, 0)",
         borderBottom: "none",
         borderTopColor: tooltipLightBackground
       },
       '[data-popper-placement^="bottom"] > &::after': {
-        top: 1,
+        top: "1px",
         transform: "translate(-50%, 0)",
         borderTop: "none",
         borderBottomColor: tooltipLightBackground
       }
     }
   });
-};
-
+});
 export default tooltipPlugin;

package/esm/Tooltip/TooltipWrapper.d.ts

@@ -22,6 +22,7 @@ export interface TooltipWrapperProps extends TooltipWrapperBaseProps {
      */
     interactive?: boolean;
     content: ReactNode;
+    children: ReactNode;
 }
 export declare const TooltipWrapper: FunctionComponent<TooltipWrapperProps>;
 export default TooltipWrapper;

package/esm/Tooltip/TooltipWrapper.js

@@ -12,8 +12,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import cx from "classnames";
 import throttle from "lodash.throttle";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
+import { useCreatePortal } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import Tooltip from "./Tooltip";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -45,6 +45,7 @@ export var TooltipWrapper = function TooltipWrapper(_ref) {
       noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow,
       _ref$interactive = _ref.interactive,
       interactive = _ref$interactive === void 0 ? true : _ref$interactive;
+  var createPortal = useCreatePortal();
   var isControlled = typeof show === "boolean";
 
   var _useState = useState(!!show),
@@ -177,7 +178,7 @@ export var TooltipWrapper = function TooltipWrapper(_ref) {
       }
     }), {}, {
       children: children
-    })), showTooltip && /*#__PURE__*/createPortal( /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
+    })), showTooltip && createPortal( /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
       style: styles.popper,
       className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tooltip-wrapper-popper"]))), tooltipClassName),
       ref: setPopperEl,
@@ -189,7 +190,7 @@ export var TooltipWrapper = function TooltipWrapper(_ref) {
         variant: tooltipVariant,
         children: tooltipContent
       })]
-    })), document.body)]
+    })))]
   });
 };
 export default TooltipWrapper;

package/esm/Tooltip/types.d.ts

@@ -1,4 +1,5 @@
 import type { Placement, StrictModifiers } from "@popperjs/core";
+import type { ReactNode } from "react";
 import type { TooltipVariant } from "./Tooltip";
 export interface TooltipWrapperBaseProps {
     /** Defines where to open the menu */
@@ -9,4 +10,5 @@ export interface TooltipWrapperBaseProps {
     /** Modifiers for the Popper menu */
     modifiers?: StrictModifiers[];
     noArrow?: boolean;
+    children: ReactNode;
 }

package/esm/Typography/Typography.tailwind.d.ts

@@ -1,17 +1,5 @@
-/**
- * @type {import('../tailwind-types').TailwindFunction}
- */
-declare const desktop: import('../tailwind-types').TailwindFunction;
-/**
- * @type {import('../tailwind-types').TailwindFunction}
- */
-declare const mobile: import('../tailwind-types').TailwindFunction;
-/**
- * @type {import("../tailwind-types").TailwindPlugin}
- */
-declare const typographyPlugin: import("../tailwind-types").TailwindPlugin;
-export declare namespace styles {
-    export { desktop };
-    export { mobile };
-}
-export { typographyPlugin as plugin };
+export = typographyPlugin;
+declare const typographyPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/esm/Typography/Typography.tailwind.js

@@ -4,135 +4,19 @@ 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) { _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 _plugin from "tailwindcss/plugin";
 import _require2 from "lodash";
 // @ts-check
-// @ts-ignore
 var _require = _require2,
     mapKeys = _require.mapKeys;
-/**
- * @type {import('../tailwind-types').TailwindFunction}
- */
-
-var desktop = function desktop(theme) {
-  return {
-    "display-xlarge": {
-      fontSize: theme("fontSize.3xl"),
-      lineHeight: theme("lineHeight.3xl"),
-      fontWeight: theme("fontWeight.semibold")
-    },
-    "display-large": {
-      fontSize: theme("fontSize.2xl"),
-      lineHeight: theme("lineHeight.2xl"),
-      fontWeight: theme("fontWeight.semibold")
-    },
-    "display-medium": {
-      fontSize: theme("fontSize.xl"),
-      lineHeight: theme("lineHeight.xl"),
-      fontWeight: theme("fontWeight.semibold")
-    },
-    "display-small": {
-      fontSize: theme("fontSize.lg"),
-      lineHeight: theme("lineHeight.lg"),
-      fontWeight: theme("fontWeight.normal")
-    },
-    "display-heading": {
-      fontSize: theme("fontSize.md"),
-      lineHeight: theme("lineHeight.md"),
-      fontWeight: theme("fontWeight.semibold")
-    },
-    "display-subheading": {
-      fontSize: theme("fontSize.sm"),
-      lineHeight: theme("lineHeight.sm"),
-      fontWeight: theme("fontWeight.semibold"),
-      textTransform: "uppercase"
-    },
-    "display-body": {
-      fontSize: theme("fontSize.base"),
-      lineHeight: theme("lineHeight.base"),
-      fontWeight: theme("fontWeight.normal")
-    },
-    "display-caption": {
-      fontSize: theme("fontSize.sm"),
-      lineHeight: theme("lineHeight.sm"),
-      fontWeight: theme("fontWeight.normal")
-    },
-    "display-code": {
-      fontFamily: theme("fontFamily.mono"),
-      fontSize: theme("fontSize.base"),
-      lineHeight: theme("lineHeight.base"),
-      fontWeight: theme("fontWeight.normal")
-    }
-  };
-};
-/**
- * @type {import('../tailwind-types').TailwindFunction}
- */
-
-
-var mobile = function mobile(theme) {
-  return {
-    "display-xlarge": {
-      lineHeight: theme("lineHeight.xl"),
-      fontSize: theme("fontSize.2xl"),
-      fontWeight: theme("fontWeight.semibold")
-    },
-    "display-large": {
-      lineHeight: theme("lineHeight.xl"),
-      fontSize: theme("fontSize.xl"),
-      fontWeight: theme("fontWeight.semibold")
-    },
-    "display-medium": {
-      lineHeight: theme("lineHeight.xl"),
-      fontSize: theme("fontSize.lg"),
-      fontWeight: theme("fontWeight.normal")
-    },
-    "display-small": {
-      lineHeight: theme("lineHeight.md"),
-      fontSize: theme("fontSize.md"),
-      fontWeight: theme("fontWeight.normal")
-    },
-    "display-heading": {
-      lineHeight: theme("lineHeight.md"),
-      fontSize: theme("fontSize.md"),
-      fontWeight: theme("fontWeight.semibold")
-    },
-    "display-subheading": {
-      lineHeight: theme("lineHeight.sm"),
-      fontSize: theme("fontSize.mobile"),
-      fontWeight: theme("fontWeight.semibold"),
-      textTransform: "uppercase"
-    },
-    "display-body": {
-      lineHeight: theme("lineHeight.md"),
-      fontSize: theme("fontSize.md"),
-      fontWeight: theme("fontWeight.normal")
-    },
-    "display-caption": {
-      lineHeight: theme("lineHeight.base"),
-      fontSize: theme("fontSize.mobile"),
-      fontWeight: theme("fontWeight.normal")
-    },
-    "display-code": {
-      fontFamily: theme("fontFamily.mono"),
-      lineHeight: theme("lineHeight.md"),
-      fontSize: theme("fontSize.md"),
-      fontWeight: theme("fontWeight.normal")
-    }
-  };
-};
-/**
- * @type {import("../tailwind-types").TailwindPlugin}
- */
-
-
-var typographyPlugin = function typographyPlugin(_ref) {
-  var addComponents = _ref.addComponents,
+var plugin = _plugin;
+var typographyPlugin = plugin(function (_ref) {
+  var theme = _ref.theme,
       addUtilities = _ref.addUtilities,
-      e = _ref.e,
-      theme = _ref.theme,
-      variants = _ref.variants;
-  var desktop = theme("typography.desktop", {})(theme);
-  var mobile = theme("typography.mobile", {})(theme);
+      addComponents = _ref.addComponents,
+      e = _ref.e;
+  var desktop = theme("typography.desktop", {});
+  var mobile = theme("typography.mobile", {});
   var common = {
     reversed: {
       color: theme("colors.white")
@@ -152,6 +36,8 @@ var typographyPlugin = function typographyPlugin(_ref) {
   }; // add utilities for manual typography declaration
   // Example: `className="typo-m-display-small lg:typo-display-small"`
 
+  /** @type {any} */
+
   var utilities = _objectSpread(_objectSpread(_objectSpread({}, mapKeys(common, function (_, key) {
     return ".typo-".concat(e(key));
   })), mapKeys(desktop, function (_, key) {
@@ -169,14 +55,118 @@ var typographyPlugin = function typographyPlugin(_ref) {
   })))); // register add-ons
 
 
-  addUtilities(utilities, variants("styles", ["responsive"]));
+  addUtilities(utilities);
   addComponents(components);
-};
-
-export default {
-  styles: {
-    desktop: desktop,
-    mobile: mobile
-  },
-  plugin: typographyPlugin
-};
+}, {
+  content: [],
+  theme: {
+    // @ts-ignore
+    typography: function typography(_ref2) {
+      var theme = _ref2.theme;
+      // Need to transform it to a string because in this context, Tailwind doesn't automagically turn it into a string value
+      // Asked here https://github.com/tailwindlabs/tailwindcss/discussions/8755
+      var monoFontFamily = theme("fontFamily.mono").join(",");
+      return {
+        desktop: {
+          "display-xlarge": {
+            fontSize: theme("fontSize.3xl"),
+            lineHeight: theme("lineHeight.3xl"),
+            fontWeight: theme("fontWeight.semibold")
+          },
+          "display-large": {
+            fontSize: theme("fontSize.2xl"),
+            lineHeight: theme("lineHeight.2xl"),
+            fontWeight: theme("fontWeight.semibold")
+          },
+          "display-medium": {
+            fontSize: theme("fontSize.xl"),
+            lineHeight: theme("lineHeight.xl"),
+            fontWeight: theme("fontWeight.semibold")
+          },
+          "display-small": {
+            fontSize: theme("fontSize.lg"),
+            lineHeight: theme("lineHeight.lg"),
+            fontWeight: theme("fontWeight.normal")
+          },
+          "display-heading": {
+            fontSize: theme("fontSize.md"),
+            lineHeight: theme("lineHeight.md"),
+            fontWeight: theme("fontWeight.semibold")
+          },
+          "display-subheading": {
+            fontSize: theme("fontSize.sm"),
+            lineHeight: theme("lineHeight.sm"),
+            fontWeight: theme("fontWeight.semibold"),
+            textTransform: "uppercase"
+          },
+          "display-body": {
+            fontSize: theme("fontSize.base"),
+            lineHeight: theme("lineHeight.base"),
+            fontWeight: theme("fontWeight.normal")
+          },
+          "display-caption": {
+            fontSize: theme("fontSize.sm"),
+            lineHeight: theme("lineHeight.sm"),
+            fontWeight: theme("fontWeight.normal")
+          },
+          "display-code": {
+            fontFamily: monoFontFamily,
+            fontSize: theme("fontSize.base"),
+            lineHeight: theme("lineHeight.base"),
+            fontWeight: theme("fontWeight.normal")
+          }
+        },
+        mobile: {
+          "display-xlarge": {
+            lineHeight: theme("lineHeight.xl"),
+            fontSize: theme("fontSize.2xl"),
+            fontWeight: theme("fontWeight.semibold")
+          },
+          "display-large": {
+            lineHeight: theme("lineHeight.xl"),
+            fontSize: theme("fontSize.xl"),
+            fontWeight: theme("fontWeight.semibold")
+          },
+          "display-medium": {
+            lineHeight: theme("lineHeight.xl"),
+            fontSize: theme("fontSize.lg"),
+            fontWeight: theme("fontWeight.normal")
+          },
+          "display-small": {
+            lineHeight: theme("lineHeight.md"),
+            fontSize: theme("fontSize.md"),
+            fontWeight: theme("fontWeight.normal")
+          },
+          "display-heading": {
+            lineHeight: theme("lineHeight.md"),
+            fontSize: theme("fontSize.md"),
+            fontWeight: theme("fontWeight.semibold")
+          },
+          "display-subheading": {
+            lineHeight: theme("lineHeight.sm"),
+            fontSize: theme("fontSize.mobile"),
+            fontWeight: theme("fontWeight.semibold"),
+            textTransform: "uppercase"
+          },
+          "display-body": {
+            lineHeight: theme("lineHeight.md"),
+            fontSize: theme("fontSize.md"),
+            fontWeight: theme("fontWeight.normal")
+          },
+          "display-caption": {
+            lineHeight: theme("lineHeight.base"),
+            fontSize: theme("fontSize.mobile"),
+            fontWeight: theme("fontWeight.normal")
+          },
+          "display-code": {
+            fontFamily: monoFontFamily,
+            lineHeight: theme("lineHeight.md"),
+            fontSize: theme("fontSize.md"),
+            fontWeight: theme("fontWeight.normal")
+          }
+        }
+      };
+    }
+  }
+});
+export default typographyPlugin;

package/esm/UserContent/UserContent.tailwind.d.ts

@@ -1,2 +1,5 @@
-declare const _exports: import('../tailwind-types').TailwindPlugin;
+declare const _exports: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};
 export = _exports;

package/esm/UserContent/UserContent.tailwind.js

@@ -4,21 +4,23 @@ 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) { _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 _require2 from "../styles/helpers/icons";
 import _rgba from "../styles/rgba";
+import _require2 from "../styles/helpers/icons";
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-var rgba = _rgba;
+var plugin = _plugin;
 var _require = _require2,
     toBG = _require.toBG;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-
-export default (function (_ref) {
+var rgba = _rgba;
+export default plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
-  var desktop = theme("typography.mobile", {})(theme);
-  var mobile = theme("typography.mobile", {})(theme);
+
+  /** @type {any} */
+  var desktop = theme("typography.desktop", {});
+  /** @type {any} */
+
+  var mobile = theme("typography.mobile", {});
   addComponents({
     ".usercontent": _defineProperty({
       "h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, table": {
@@ -110,7 +112,7 @@ export default (function (_ref) {
         borderColor: theme("colors.grey.200")
       },
       "b, strong, th": {
-        fontWeight: 600
+        fontWeight: "600"
       },
       table: {
         width: "100%",

package/esm/index.d.ts

@@ -8,7 +8,6 @@ export * from "./AnnouncementBadge";
 export * from "./AutoComplete";
 export * from "./Avatars";
 export * from "./Badge";
-export * from "./Banner";
 export * from "./Banners";
 export * from "./Button";
 export * from "./Card";

package/esm/index.js

@@ -8,7 +8,6 @@ export * from "./AnnouncementBadge";
 export * from "./AutoComplete";
 export * from "./Avatars";
 export * from "./Badge";
-export * from "./Banner";
 export * from "./Banners";
 export * from "./Button";
 export * from "./Card";

package/esm/styles/base.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = basePlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const basePlugin: import('../tailwind-types').TailwindPlugin;
+declare const basePlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/esm/styles/base.tailwind.js

@@ -1,9 +1,7 @@
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var basePlugin = function basePlugin(_ref) {
+var plugin = _plugin;
+var basePlugin = plugin(function (_ref) {
   var addBase = _ref.addBase,
       theme = _ref.theme;
   // https://polaris.shopify.com/design/typography#font-stack
@@ -37,6 +35,5 @@ var basePlugin = function basePlugin(_ref) {
       }
     }
   });
-};
-
+});
 export default basePlugin;