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

package/esm/UserContent/UserContent.tailwind.js

@@ -0,0 +1,141 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 _rgba from "../styles/rgba";
+import _require2 from "../styles/helpers/icons";
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var _require = _require2,
+  toBG = _require.toBG;
+var rgba = _rgba;
+export default 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": _defineProperty({
+      "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"]
+    })
+  });
+});

package/esm/index.d.ts

@@ -0,0 +1,49 @@
+export * from "./types";
+export { default as colors } from "./styles/colors";
+export { default as brandColors } from "./styles/brandColors";
+export { default as stl } from "./styles/helpers/satellitePrefixer";
+export { default as makePurgeCssExtractor } from "./styles/helpers/makePurgeCssExtractor";
+export * from "./utils/NumberUnion";
+export * from "./utils/parseUrl";
+export * from "./utils/useLinkProps";
+export * from "./AnnouncementBadge";
+export * from "./AutoComplete";
+export * from "./Avatars";
+export * from "./Badge";
+export * from "./Banners";
+export * from "./Button";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./ClickAwayContainer";
+export * from "./DatePicker";
+export * from "./Dropdown";
+export * from "./Dropzone";
+export * from "./EmptyState";
+export * from "./Field";
+export * from "./Flag";
+export * from "./FlexGrid";
+export * from "./HelpUnderline";
+export * from "./Input";
+export * from "./Insert";
+export * from "./KeyboardKey";
+export * from "./Link";
+export * from "./Medallion";
+export * from "./Modal";
+export * from "./Pagination";
+export * from "./ProgressBar";
+export * from "./ProgressSpinner";
+export * from "./RadioGroup";
+export * from "./RangeSlider";
+export * from "./Satellite";
+export * from "./ScrollIndicator";
+export * from "./Select";
+export * from "./Separator";
+export * from "./Sidebar";
+export * from "./Switch";
+export * from "./Tables";
+export * from "./Tabs";
+export * from "./Tag";
+export * from "./TextArea";
+export * from "./TextWrap";
+export * from "./Toggle";
+export * from "./Tooltip";

package/esm/index.js

@@ -0,0 +1,49 @@
+export * from "./types";
+export { default as colors } from "./styles/colors";
+export { default as brandColors } from "./styles/brandColors";
+export { default as stl } from "./styles/helpers/satellitePrefixer";
+export { default as makePurgeCssExtractor } from "./styles/helpers/makePurgeCssExtractor";
+export * from "./utils/NumberUnion";
+export * from "./utils/parseUrl";
+export * from "./utils/useLinkProps";
+export * from "./AnnouncementBadge";
+export * from "./AutoComplete";
+export * from "./Avatars";
+export * from "./Badge";
+export * from "./Banners";
+export * from "./Button";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./ClickAwayContainer";
+export * from "./DatePicker";
+export * from "./Dropdown";
+export * from "./Dropzone";
+export * from "./EmptyState";
+export * from "./Field";
+export * from "./Flag";
+export * from "./FlexGrid";
+export * from "./HelpUnderline";
+export * from "./Input";
+export * from "./Insert";
+export * from "./KeyboardKey";
+export * from "./Link";
+export * from "./Medallion";
+export * from "./Modal";
+export * from "./Pagination";
+export * from "./ProgressBar";
+export * from "./ProgressSpinner";
+export * from "./RadioGroup";
+export * from "./RangeSlider";
+export * from "./Satellite";
+export * from "./ScrollIndicator";
+export * from "./Select";
+export * from "./Separator";
+export * from "./Sidebar";
+export * from "./Switch";
+export * from "./Tables";
+export * from "./Tabs";
+export * from "./Tag";
+export * from "./TextArea";
+export * from "./TextWrap";
+export * from "./Toggle";
+export * from "./Tooltip";

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

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

package/esm/styles/base.tailwind.js

@@ -0,0 +1,45 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var basePlugin = plugin(function (_ref) {
+  var addBase = _ref.addBase,
+    theme = _ref.theme;
+  // https://polaris.shopify.com/design/typography#font-stack
+  addBase({
+    "html, body": {
+      /* Make type rendering look crisper */
+      "-webkit-font-smoothing": "antialiased",
+      "-moz-osx-font-smoothing": "grayscale",
+      /* Disable auto-enlargement of small text in Safari */
+      "text-size-adjust": "100%",
+      /* Enable kerning and optional ligatures */
+      "text-rendering": "optimizeLegibility"
+    }
+  });
+
+  // Accent color
+  addBase({
+    ":root": {
+      "accent-color": theme("colors.accent.600")
+    }
+  });
+
+  // Text selection
+  addBase({
+    "::selection": {
+      background: theme("colors.accent.600"),
+      color: theme("colors.white")
+    }
+  });
+
+  // Base styles for links
+  addBase({
+    a: {
+      color: theme("colors.accent.600"),
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    }
+  });
+});
+export default basePlugin;

package/esm/styles/brandColors.d.ts

@@ -0,0 +1,42 @@
+export const neptune: {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+};
+export const mercury: {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+};
+export const jupiter: {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+};
+export const saturn: {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+};
+export const mars: {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+};
+export const venus: {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+};

package/esm/styles/brandColors.js

@@ -0,0 +1,46 @@
+// @ts-check
+var brandColors = {
+  neptune: {
+    1: "#3a46a1",
+    2: "#5560b5",
+    3: "#707bcc",
+    4: "#8d97e3",
+    5: "#a6b0f9"
+  },
+  mercury: {
+    1: "#008fba",
+    2: "#2da7cb",
+    3: "#5bbfdd",
+    4: "#88d6ee",
+    5: "#b5eeff"
+  },
+  jupiter: {
+    1: "#3ab2bd",
+    2: "#61c5c8",
+    3: "#89d9d3",
+    4: "#b0ecde",
+    5: "#d7ffe9"
+  },
+  saturn: {
+    1: "#ec8b63",
+    2: "#f3a57e",
+    3: "#f8be9a",
+    4: "#fcd7b7",
+    5: "#fdf1d4"
+  },
+  mars: {
+    1: "#ed5a6a",
+    2: "#f27885",
+    3: "#f695a0",
+    4: "#fbb3ba",
+    5: "#ffd0d5"
+  },
+  venus: {
+    1: "#ae3e88",
+    2: "#d44fa4",
+    3: "#ea71bc",
+    4: "#f89ad3",
+    5: "#ffcae9"
+  }
+};
+export default brandColors;

package/esm/styles/colors.d.ts

@@ -0,0 +1,110 @@
+export const black: string;
+export const white: string;
+export const grey: {
+    950: string;
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+    50: string;
+};
+export const pink: {
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+    50: string;
+};
+export const nebula: {
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+};
+export const xenon: {
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+    50: string;
+};
+export const blue: {
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+    50: string;
+};
+export const green: {
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+    50: string;
+};
+export const orange: {
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+    50: string;
+};
+export const red: {
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+    50: string;
+};
+export const purple: {
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+    50: string;
+};

package/esm/styles/colors.js

@@ -0,0 +1,114 @@
+// @ts-check
+var colors = {
+  black: "#000000",
+  white: "#ffffff",
+  grey: {
+    950: "#111432",
+    900: "#23263b",
+    800: "#36395a",
+    700: "#484c7a",
+    600: "#5a5e9a",
+    500: "#777aaf",
+    400: "#9698c3",
+    300: "#b6b7d5",
+    200: "#d6d6e7",
+    100: "#f5f5fa",
+    50: "#fcfcfd"
+  },
+  pink: {
+    900: "#59063d",
+    800: "#88085c",
+    700: "#b80979",
+    600: "#e90a96",
+    500: "#f82caa",
+    400: "#fb5abc",
+    300: "#fd89ce",
+    200: "#feb9e2",
+    100: "#ffeaf6",
+    50: "#fff5fb"
+  },
+  nebula: {
+    900: "#141d61",
+    800: "#1e2b8f",
+    700: "#2b3cbb",
+    600: "#3c4fe0",
+    500: "#5468ff",
+    400: "#7c8aff",
+    300: "#a3acff",
+    200: "#cacfff",
+    100: "#f2f3ff"
+  },
+  xenon: {
+    900: "#000033",
+    800: "#042077",
+    700: "#022eb9",
+    600: "#003dff",
+    500: "#1e59ff",
+    400: "#457aff",
+    300: "#76a0ff",
+    200: "#bbd1ff",
+    100: "#f2f4ff",
+    50: "#f9f9ff"
+  },
+  blue: {
+    900: "#00526c",
+    800: "#00769b",
+    700: "#009bcb",
+    600: "#0db7eb",
+    500: "#2cc8f7",
+    400: "#5adaff",
+    300: "#89e5ff",
+    200: "#b9efff",
+    100: "#e8faff",
+    50: "#f3fdff"
+  },
+  green: {
+    900: "#005d43",
+    800: "#007046",
+    700: "#008b4a",
+    600: "#00a648",
+    500: "#00c241",
+    400: "#4ade6d",
+    300: "#86f195",
+    200: "#bffbc2",
+    100: "#e5fde4",
+    50: "#f2fef1"
+  },
+  orange: {
+    900: "#963209",
+    800: "#bf470a",
+    700: "#e8600a",
+    600: "#f78125",
+    500: "#faa04b",
+    400: "#fcbc73",
+    300: "#fed59a",
+    200: "#ffe9c3",
+    100: "#fff9ec",
+    50: "#fffcf5"
+  },
+  red: {
+    900: "#83111e",
+    800: "#ab1325",
+    700: "#d4142a",
+    600: "#e9122c",
+    500: "#f4495d",
+    400: "#f86e7e",
+    300: "#fc95a1",
+    200: "#febdc5",
+    100: "#ffe6e9",
+    50: "#fff3f4"
+  },
+  purple: {
+    900: "#3c0b93",
+    800: "#5612b7",
+    700: "#731adb",
+    600: "#9524ff",
+    500: "#b75aff",
+    400: "#cc7bff",
+    300: "#e2a7ff",
+    200: "#f2d3ff",
+    100: "#fcf4ff",
+    50: "#fdf9ff"
+  }
+};
+export default colors;

package/esm/styles/disabledColor.d.ts

@@ -0,0 +1,6 @@
+export = disabledColor;
+/**
+ * Creates the disabled version of a color by mixing it with white
+ * @param {string} baseColor
+ */
+declare function disabledColor(baseColor: string): string;

package/esm/styles/disabledColor.js

@@ -0,0 +1,14 @@
+import _colors from "./colors";
+import _Color from "color";
+// @ts-check
+var Color = _Color;
+var colors = _colors;
+
+/**
+ * Creates the disabled version of a color by mixing it with white
+ * @param {string} baseColor
+ */
+function disabledColor(baseColor) {
+  return Color(baseColor).mix(Color(colors.white), 0.6).hex();
+}
+export default disabledColor;

package/esm/styles/helpers/icons.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Return url encoded image background
+ * @param {string} color
+ */
+export function selectIconBG(color: string): string;
+/**
+ * Return Feather icon as SVG background-image value
+ * @param {string} color
+ */
+export function toBG(iconName: any, props?: {}): string;
+/**
+ * Render inline SVG for a Feather icon
+ * @param {string} color
+ */
+export function toSVG(iconName: any, props?: {}): string;

package/esm/styles/helpers/icons.js

@@ -0,0 +1,40 @@
+import _require4 from "react-dom/server";
+import _require2 from "react";
+import _Icon from "react-feather";
+var Icon = _Icon;
+var _require = _require2,
+  createElement = _require.createElement;
+var _require3 = _require4,
+  renderToStaticMarkup = _require3.renderToStaticMarkup;
+
+/**
+ * Render inline SVG for a Feather icon
+ * @param {string} color
+ */
+var toSVG = function toSVG(iconName) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return renderToStaticMarkup(createElement(Icon[iconName], props, null));
+};
+
+/**
+ * Return Feather icon as SVG background-image value
+ * @param {string} color
+ */
+var toBG = function toBG(iconName) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return "url(\"data:image/svg+xml;utf8,".concat(encodeURIComponent(toSVG(iconName, props)), "\")");
+};
+
+/**
+ * Return url encoded image background
+ * @param {string} color
+ */
+var selectIconBG = function selectIconBG(color) {
+  var encodedColor = encodeURIComponent(color);
+  return "url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><g stroke=\"".concat(encodedColor, "\" stroke-width=\"2\" fill=\"none\" fill-rule=\"evenodd\"><path d=\"M13 7L7 1 1 7M1 17l6 6 6-6\"/></g></svg>')");
+};
+export default {
+  selectIconBG: selectIconBG,
+  toBG: toBG,
+  toSVG: toSVG
+};

package/esm/styles/helpers/makePurgeCssExtractor.d.ts

@@ -0,0 +1,7 @@
+export = makePurgeCssExtractor;
+/**
+ * Creates a PurgeCSS extractor
+ * Prefix is added back if missing (workaround for using the prefix helper 🙃).
+ * @param {string} prefix The prefix used in your Tailwind config
+ */
+declare function makePurgeCssExtractor(prefix: string): (content: string) => string[];