@algolia/satellite 1.0.0-beta.17 → 1.0.0-beta.170

package/cjs/Tooltip/Tooltip.tailwind.js

@@ -0,0 +1,47 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var tooltipPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  /** @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-content": {
+      zIndex: theme("zIndex.tooltip"),
+      userSelect: "none",
+      maxWidth: theme("spacing.64")
+    }
+  });
+});
+module.exports = tooltipPlugin;

package/cjs/Tooltip/TooltipWrapper.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode, VFC } from "react";
+import type { TooltipWrapperBaseProps } from "./types";
+export interface TooltipWrapperProps extends TooltipWrapperBaseProps {
+    /**
+     * Defines whether the `Tooltip` should be displayed or not.
+     * @default undefined
+     */
+    show?: boolean;
+    /**
+     * Defines the content of the `Tooltip`.
+     */
+    content: ReactNode;
+}
+export declare const TooltipWrapper: VFC<TooltipWrapperProps>;

package/cjs/Tooltip/TooltipWrapper.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var Tooltip = _interopRequireWildcard(require("@radix-ui/react-tooltip"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _isReactText = require("../utils/isReactText");
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var TooltipWrapper = exports.TooltipWrapper = function TooltipWrapper(_ref) {
+  var show = _ref.show,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 250 : _ref$delay,
+    _ref$hideDelay = _ref.hideDelay,
+    hideDelay = _ref$hideDelay === void 0 ? 500 : _ref$hideDelay,
+    tooltipContent = _ref.content,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? "bottom" : _ref$side,
+    _ref$sideOffset = _ref.sideOffset,
+    sideOffset = _ref$sideOffset === void 0 ? 0 : _ref$sideOffset,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "center" : _ref$align,
+    _ref$alignOffset = _ref.alignOffset,
+    alignOffset = _ref$alignOffset === void 0 ? 0 : _ref$alignOffset,
+    _ref$tooltipVariant = _ref.tooltipVariant,
+    tooltipVariant = _ref$tooltipVariant === void 0 ? "dark" : _ref$tooltipVariant,
+    tooltipClassName = _ref.tooltipClassName,
+    children = _ref.children,
+    _ref$noArrow = _ref.noArrow,
+    noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow,
+    _ref$interactive = _ref.interactive,
+    interactive = _ref$interactive === void 0 ? true : _ref$interactive,
+    _ref$avoidCollisions = _ref.avoidCollisions,
+    avoidCollisions = _ref$avoidCollisions === void 0 ? true : _ref$avoidCollisions;
+  var createPortal = (0, _Satellite.useCreatePortal)();
+  if (!tooltipContent) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children
+  });
+  var hasTextChildren = (0, _isReactText.isReactText)(children);
+  if (!hasTextChildren && children.type === _react.Fragment) throw new Error("TooltipWrapper component doesn't accept a Fragment as a child.");
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip.Provider, {
+    delayDuration: delay,
+    skipDelayDuration: 300,
+    disableHoverableContent: !interactive,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tooltip.Root, {
+      open: show,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip.Trigger, {
+        asChild: !hasTextChildren,
+        children: children
+      }), createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tooltip.Content, {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tooltip-content animate-slide"]))), tooltipClassName),
+        style: {
+          "--slide-hide-delay": "".concat(hideDelay, "ms")
+        },
+        side: side,
+        sideOffset: (noArrow ? 8 : 4) + sideOffset,
+        align: align,
+        alignOffset: alignOffset,
+        avoidCollisions: avoidCollisions,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
+          variant: tooltipVariant,
+          children: tooltipContent
+        }), !noArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip.Arrow, {
+          width: 8,
+          height: 4,
+          className: (0, _clsx["default"])(tooltipVariant === "light" ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["arrow-light"]))) : (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["arrow-dark"]))))
+        })]
+      }))]
+    })
+  });
+};

package/{components → cjs}/Tooltip/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./Tooltip";
 export * from "./TooltipWrapper";
+export * from "./OverflowTooltipWrapper";
 export { default } from "./Tooltip";

package/cjs/Tooltip/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Tooltip["default"];
+  }
+});
+var _Tooltip = _interopRequireWildcard(require("./Tooltip"));
+Object.keys(_Tooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Tooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Tooltip[key];
+    }
+  });
+});
+var _TooltipWrapper = require("./TooltipWrapper");
+Object.keys(_TooltipWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TooltipWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TooltipWrapper[key];
+    }
+  });
+});
+var _OverflowTooltipWrapper = require("./OverflowTooltipWrapper");
+Object.keys(_OverflowTooltipWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _OverflowTooltipWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _OverflowTooltipWrapper[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/cjs/Tooltip/types.d.ts

@@ -0,0 +1,65 @@
+import type { TooltipContentProps } from "@radix-ui/react-tooltip";
+import type { ReactElement, ReactText } from "react";
+import type { TooltipVariant } from "./Tooltip";
+export interface TooltipWrapperBaseProps {
+    /**
+     * Defines how long you should hover the wrapped element before displaying the `Tooltip` (in ms).
+     * @default 250
+     */
+    delay?: number;
+    /**
+     * Defines how long the `Tooltip` should stay displayed when leaving the wrapped element (in ms).
+     * @default 500
+     */
+    hideDelay?: number;
+    /**
+     * Defines the side of the trigger element where the `Tooltip` should be displayed.
+     * Will be reversed when collisions occur and `avoidCollisions` is enabled.
+     * @default bottom
+     */
+    side?: TooltipContentProps["side"];
+    /**
+     * Defines the offset in pixels of the `Tooltip` from the trigger element.
+     * @default 0
+     */
+    sideOffset?: TooltipContentProps["sideOffset"];
+    /**
+     * Defines the preferred alignment of the `Tooltip` against the trigger element.
+     * May change when collisions occur.
+     * @default center
+     */
+    align?: TooltipContentProps["align"];
+    /**
+     * Defines the offset in pixels of the `Tooltip` along the trigger element.
+     * It only works when the `align` option is set to "start" or "end".
+     * @default 0
+     */
+    alignOffset?: TooltipContentProps["alignOffset"];
+    /**
+     * Defines the variant of the `Tooltip`.
+     * @default dark
+     */
+    tooltipVariant?: TooltipVariant;
+    /**
+     * Defines the CSS class to be applied to the `Tooltip` element.
+     */
+    tooltipClassName?: string;
+    /**
+     * Defines whether the `Tooltip` arrow should be hidden.
+     * @default false
+     */
+    noArrow?: boolean;
+    /**
+     * Defines 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;
+    /**
+     * Defines whether the `Tooltip` should avoid collisions with the viewport.
+     * @default true
+     */
+    avoidCollisions?: boolean;
+    children: ReactElement | ReactText;
+}

package/cjs/Tooltip/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/Tooltip/utils.d.ts

@@ -0,0 +1 @@
+export declare const isOverflowing: (element: HTMLElement) => boolean;

package/cjs/Tooltip/utils.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isOverflowing = void 0;
+var isOverflowing = exports.isOverflowing = function isOverflowing(element) {
+  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+};

package/cjs/Typography/Typography.tailwind.d.ts

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

package/cjs/Typography/Typography.tailwind.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// @ts-check
+var _require = require("lodash"),
+  mapKeys = _require.mapKeys;
+var plugin = require("tailwindcss/plugin");
+var typographyPlugin = plugin(function (_ref) {
+  var theme = _ref.theme,
+    addUtilities = _ref.addUtilities,
+    addComponents = _ref.addComponents,
+    e = _ref.e;
+  var desktop = theme("stlTypography.desktop", {});
+  var mobile = theme("stlTypography.mobile", {});
+  var common = {
+    reversed: {
+      color: theme("colors.white")
+    },
+    disabled: {
+      color: theme("colors.grey.300")
+    },
+    subdued: {
+      color: theme("colors.grey.600")
+    },
+    link: {
+      color: theme("colors.accent.600"),
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    }
+  };
+
+  // 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) {
+    return ".typo-".concat(e(key));
+  })), mapKeys(mobile, function (_, key) {
+    return ".typo-m-".concat(e(key));
+  }));
+
+  // add components for automatic responsive typography
+  // Example: `className="display-small"`
+  var components = _objectSpread(_objectSpread({}, mapKeys(mobile, function (_, key) {
+    return ".".concat(e(key));
+  })), {}, (0, _defineProperty2["default"])({}, "@media (min-width: ".concat(theme("screens.md"), ")"), _objectSpread({}, mapKeys(desktop, function (_, key) {
+    return ".".concat(e(key));
+  }))));
+
+  // register add-ons
+  addUtilities(utilities);
+  addComponents(components);
+}, {
+  content: [],
+  theme: {
+    // @ts-ignore
+    stlTypography: function stlTypography(_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")
+          }
+        }
+      };
+    }
+  }
+});
+module.exports = typographyPlugin;

package/cjs/UserContent/UserContent.d.ts

@@ -0,0 +1,9 @@
+import type { VFC } from "react";
+export interface UserContentProps {
+    styled?: boolean;
+    /** @ignore */
+    className?: string;
+    content?: string;
+}
+export declare const UserContent: VFC<UserContentProps>;
+export default UserContent;

package/cjs/UserContent/UserContent.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.UserContent = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+var UserContent = exports.UserContent = function UserContent(_ref) {
+  var className = _ref.className,
+    content = _ref.content,
+    _ref$styled = _ref.styled,
+    styled = _ref$styled === void 0 ? true : _ref$styled;
+  if (!content) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["", ""])), styled && "usercontent"), className),
+    dangerouslySetInnerHTML: {
+      __html: content
+    }
+  });
+};
+var _default = exports["default"] = UserContent;

package/cjs/UserContent/UserContent.tailwind.d.ts

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

package/cjs/UserContent/UserContent.tailwind.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var _require = require("../styles/helpers/icons"),
+  toBG = _require.toBG;
+var rgba = require("../styles/rgba");
+module.exports = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  /** @type {any} */
+  var desktop = theme("stlTypography.desktop", {});
+  /** @type {any} */
+  var mobile = theme("stlTypography.mobile", {});
+  addComponents({
+    ".usercontent": (0, _defineProperty2["default"])({
+      "h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, table": {
+        "&:not(:first-child)": {
+          marginTop: theme("spacing.4")
+        },
+        "&:not(:last-child)": {
+          marginBottom: theme("spacing.4")
+        }
+      },
+      h1: mobile["display-xlarge"],
+      h2: _objectSpread(_objectSpread({}, mobile["display-large"]), {}, {
+        color: theme("colors.grey.600")
+      }),
+      h3: mobile["display-medium"],
+      h4: mobile["display-small"],
+      h5: mobile["display-heading"],
+      h6: mobile["display-subheading"],
+      "p, ul, ol, blockquote, table": mobile["display-body"],
+      code: {
+        display: "inline-block",
+        padding: "0 ".concat(theme("spacing.1")),
+        backgroundColor: theme("colors.grey.100"),
+        color: theme("colors.grey.700"),
+        fontFamily: theme("fontFamily.mono")
+      },
+      ul: {
+        paddingLeft: theme("spacing.6"),
+        listStyleType: "disc"
+      },
+      ol: {
+        paddingLeft: theme("spacing.6"),
+        listStyleType: "decimal"
+      },
+      a: {
+        color: theme("colors.accent.600"),
+        "&:hover": {
+          textDecoration: "underline"
+        },
+        '&[target="_blank"], &[href^="http"]': {
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          whiteSpace: "nowrap",
+          "&:after": {
+            content: "''",
+            background: toBG("ExternalLink", {
+              stroke: theme("colors.accent.600"),
+              viewBox: "0 0 24 24",
+              width: "100%",
+              height: "100%"
+            }),
+            backgroundRepeat: "no-repeat",
+            width: "1em",
+            height: "1em",
+            marginLeft: theme("spacing.1")
+          }
+        }
+      },
+      blockquote: {
+        paddingLeft: theme("spacing.4"),
+        borderLeft: "2px solid ".concat(theme("colors.grey.200")),
+        color: theme("colors.grey.600")
+      },
+      pre: _objectSpread(_objectSpread({}, mobile["display-code"]), {}, {
+        overflow: "auto",
+        maxWidth: "100%",
+        maxHeight: theme("spacing.64"),
+        margin: "".concat(theme("spacing.2"), " 0"),
+        padding: "".concat(theme("spacing.2"), " ").concat(theme("spacing.4")),
+        borderRadius: theme("borderRadius.DEFAULT"),
+        backgroundColor: theme("colors.grey.100"),
+        color: theme("colors.grey.700"),
+        code: {
+          display: "inline",
+          backgroundColor: "transparent",
+          color: "inherit"
+        }
+      }),
+      img: {
+        display: "block",
+        maxWidth: "100%",
+        height: "auto",
+        margin: "auto"
+      },
+      hr: {
+        borderWidth: "0 0 2px 0",
+        borderStyle: "solid",
+        borderColor: theme("colors.grey.200")
+      },
+      "b, strong, th": {
+        fontWeight: "600"
+      },
+      table: {
+        width: "100%",
+        borderCollapse: "collapse",
+        textAlign: "left",
+        "th, td": {
+          padding: "14px 16px"
+        },
+        th: {
+          borderBottom: "1px solid ".concat(theme("colors.grey.200")),
+          fontWeight: "normal"
+        },
+        "tr:not(:last-child) td": {
+          borderBottom: "1px solid ".concat(theme("colors.grey.100"))
+        },
+        "tr:hover td": {
+          backgroundColor: rgba(theme("colors.grey.100"), 0.6)
+        }
+      }
+    }, "@media (min-width: ".concat(theme("screens.md"), ")"), {
+      h1: desktop["display-xlarge"],
+      h2: desktop["display-large"],
+      h3: desktop["display-medium"],
+      h4: desktop["display-small"],
+      h5: desktop["display-heading"],
+      h6: desktop["display-subheading"],
+      "p, ul, ol, blockquote, table": desktop["display-body"],
+      pre: desktop["display-code"]
+    })
+  });
+});