@algolia/satellite 1.1.0 → 1.1.2

package/dist/esm/Helpers/UserContent/UserContent.tailwind.js

@@ -0,0 +1,141 @@
+import _defineProperty from "@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) { _defineProperty(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; }
+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/dist/esm/Helpers/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./ClickAwayContainer";
+export * from "./HelpUnderline";
+export * from "./Medallion";
+export * from "./Separator";
+export * from "./TextWrap";
+export * from "./UserContent";

package/dist/esm/Helpers/index.js

@@ -0,0 +1,6 @@
+export * from "./ClickAwayContainer";
+export * from "./HelpUnderline";
+export * from "./Medallion";
+export * from "./Separator";
+export * from "./TextWrap";
+export * from "./UserContent";

package/dist/esm/Indicators/AnnouncementBadge/AnnouncementBadge.js

@@ -0,0 +1,49 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["size", "text", "variant", "className", "locale"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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) { _defineProperty(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; }
+import cx from "clsx";
+import { forwardRef } from "react";
+import { useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_LOCALE = {
+  beta: "beta",
+  internal: "internal",
+  "new": "new",
+  pilot: "pilot"
+};
+var DEFAULT_CLASSNAME = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["capitalize inline-block rounded-full text-white select-none"])));
+var SIZE_CLASSNAMES = {
+  "default": stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display-body h-6 leading-md px-2"]))),
+  small: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-caption px-1"])))
+};
+
+/**
+ * The `AnnouncementBadge` component is used to display a small badge with a text on it.
+ *
+ * See the [Announcement Badge documentation page](https://satellite.algolia.com/components/feedback/announcement-badge) for more information.
+ */
+export var AnnouncementBadge = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "default" : _ref$size,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? "new" : _ref$text,
+    variantProp = _ref.variant,
+    className = _ref.className,
+    propsLocale = _ref.locale,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var contextLocale = useLocale("announcementBadge");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
+  var variant = typeof variantProp === "string" ? variantProp : text === "internal" ? "red" : "accent";
+  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
+    className: cx(DEFAULT_CLASSNAME, variant === "red" ? stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-red-600"]))) : stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-accent-600"]))), SIZE_CLASSNAMES[size], className),
+    children: locale[text]
+  }));
+});
+AnnouncementBadge.displayName = "AnnouncementBadge";

package/dist/esm/Indicators/Badge/Badge.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import type { IconComponentType } from "../../Icons";
+import type { AtLeastOne, ColorVariant } from "../../types";
+export declare type BadgeSizes = "small" | "medium" | "large";
+export declare type BadgeVariants = ColorVariant | "pink";
+interface BaseBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariants;
+    size?: BadgeSizes;
+}
+declare type BadgeContentProps = {
+    children: ReactNode;
+    /** An additional value to accompany the `Badge` */
+    value: ReactNode;
+    /** Left aligned icon */
+    icon: IconComponentType;
+};
+export declare type BadgeProps = BaseBadgeProps & AtLeastOne<BadgeContentProps>;
+/**
+ * The `Badge` component is a visual marker highlighting information or status. It enhances UI, indicates progress, and classifies data.
+ *
+ * See the [Badge documentation page](https://satellite.algolia.com/components/feedback/badge) for more information.
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/esm/Indicators/Badge/Badge.js

@@ -0,0 +1,62 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["children", "value", "icon", "variant", "size", "className"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+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) { _defineProperty(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; }
+import cx from "clsx";
+import { forwardRef } from "react";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { isRenderedChild } from "../../utils/isRenderedChild";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BASE_CLASSNAMES = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  inline-flex items-center justify-center\n  rounded-full border\n  overflow-hidden\n"])));
+var VARIANT_CLASSNAMES = {
+  grey: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-grey-100 border-grey-200 text-grey-700"]))),
+  accent: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-accent-100 border-accent-200 text-accent-700"]))),
+  blue: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-blue-100 border-blue-200 text-blue-800"]))),
+  green: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-green-100 border-green-300 text-green-900"]))),
+  orange: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-orange-100 border-orange-300 text-orange-800"]))),
+  red: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-red-100 border-red-200 text-red-700"]))),
+  pink: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-pink-100 border-pink-200 text-pink-700"])))
+};
+var SIZE_CLASSNAMES = {
+  small: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["h-4 display-caption px-1 space-x-1"]))),
+  medium: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["h-5 display-body px-2 space-x-2"]))),
+  large: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["h-6 display-body px-2 space-x-2"])))
+};
+
+/**
+ * The `Badge` component is a visual marker highlighting information or status. It enhances UI, indicates progress, and classifies data.
+ *
+ * See the [Badge documentation page](https://satellite.algolia.com/components/feedback/badge) for more information.
+ */
+export var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    value = _ref.value,
+    Icon = _ref.icon,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "grey" : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "large" : _ref$size,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var badgeClassName = cx(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
+  return /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    className: badgeClassName,
+    children: [Icon && /*#__PURE__*/_jsx("span", {
+      children: /*#__PURE__*/_jsx(Icon, {
+        width: ".8em",
+        height: ".8em"
+      })
+    }), isRenderedChild(children) && /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["truncate"]))),
+      children: children
+    }), isRenderedChild(value) && /*#__PURE__*/_jsx("span", {
+      children: value
+    })]
+  }));
+});
+Badge.displayName = "Badge";

package/dist/esm/Indicators/Banners/Alert/Alert.d.ts

@@ -0,0 +1,33 @@
+import type { CSSProperties, ReactNode, VFC } from "react";
+import type { IconComponentType } from "../../../Icons";
+import type { ColorVariant } from "../../../types";
+export declare type AlertContextType = "page" | "section";
+export declare type AlertColorVariant = Exclude<ColorVariant, "blue">;
+export interface AlertProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    style?: CSSProperties;
+    /** Descriptive title for `Alert` */
+    title?: ReactNode;
+    /** @default grey */
+    variant?: AlertColorVariant;
+    /**
+     * Usage context description
+     * @default section
+     */
+    usageContext?: AlertContextType;
+    icon?: IconComponentType;
+    /**
+     * Function triggered when the dismiss button is clicked.
+     * Dismiss button won't be rendered if absent.
+     * */
+    onDismiss?(): void;
+    children: ReactNode;
+}
+/**
+ * The `Alert` component give users suggestions, tips, warnings, and error information without stopping them from completing the tasks they're doing.
+ *
+ * See the [Alert documentation page](https://satellite.algolia.com/components/feedback/alert) for more information.
+ */
+export declare const Alert: VFC<AlertProps>;

package/dist/esm/Indicators/Banners/Alert/Alert.js

@@ -0,0 +1,87 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
+import cx from "clsx";
+import { IconButton } from "../../../Actions";
+import { AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, CheckCircleIcon, XIcon } from "../../../Icons";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BASE_CLASSNAME = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["relative flex text-grey-900 display-body border"])));
+var BACKGROUND_CLASSNAMES = {
+  grey: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-grey-100"]))),
+  accent: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-accent-100"]))),
+  green: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-100"]))),
+  orange: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-orange-100"]))),
+  red: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-100"])))
+};
+var BORDER_CLASSNAMES = {
+  grey: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["border-grey-200"]))),
+  accent: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["border-accent-200"]))),
+  green: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border-green-200"]))),
+  orange: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-orange-200"]))),
+  red: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["border-red-200"])))
+};
+var ICON_VARIANTS = {
+  grey: AlertCircleIcon,
+  accent: AlertCircleIcon,
+  green: CheckCircleIcon,
+  orange: AlertTriangleIcon,
+  red: AlertOctagonIcon
+};
+var ICON_CLASSNAME_VARIANTS = {
+  grey: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["text-grey-600"]))),
+  accent: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-accent-600"]))),
+  green: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["text-green-600"]))),
+  orange: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["text-orange-600"]))),
+  red: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["text-red-600"])))
+};
+
+/**
+ * The `Alert` component give users suggestions, tips, warnings, and error information without stopping them from completing the tasks they're doing.
+ *
+ * See the [Alert documentation page](https://satellite.algolia.com/components/feedback/alert) for more information.
+ */
+export var Alert = function Alert(_ref) {
+  var title = _ref.title,
+    _ref$usageContext = _ref.usageContext,
+    usageContext = _ref$usageContext === void 0 ? "section" : _ref$usageContext,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "grey" : _ref$variant,
+    onDismiss = _ref.onDismiss,
+    icon = _ref.icon,
+    className = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var containerClassName = cx(BASE_CLASSNAME, title ? stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["p-4"]))) : stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["py-2 px-3"]))), BACKGROUND_CLASSNAMES[variant], usageContext !== "page" ? BORDER_CLASSNAMES[variant] : stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["border-transparent"]))), usageContext !== "page" && stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["rounded"]))), className);
+  var internalIcon = icon === undefined ? true : icon;
+  var Icon = typeof internalIcon === "boolean" && internalIcon ? ICON_VARIANTS[variant] : internalIcon;
+  return /*#__PURE__*/_jsxs("div", {
+    className: containerClassName,
+    style: style,
+    children: [/*#__PURE__*/_jsx(Icon, {
+      className: cx(stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n            shrink-0 mr-2\n            ", "\n            "])), title ? "mt-0.5" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["flex flex-1 flex-col ", ""])), onDismiss && "mr-6"),
+      children: [!!title && /*#__PURE__*/_jsx("h4", {
+        className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["font-bold text-grey-900 mb-1"]))),
+        children: title
+      }), /*#__PURE__*/_jsx("div", {
+        children: children
+      })]
+    }), onDismiss && /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["absolute right-1.5 top-1.5"]))),
+      children: /*#__PURE__*/_jsx(IconButton, {
+        icon: XIcon,
+        title: "Close",
+        variant: "subtle",
+        size: "small",
+        onClick: function onClick(evt) {
+          evt.stopPropagation();
+          onDismiss();
+        }
+      })
+    })]
+  });
+};

package/dist/esm/Indicators/Banners/Promote/Promote.js

@@ -0,0 +1,73 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+import cx from "clsx";
+import { IconButton } from "../../../Actions";
+import { XIcon } from "../../../Icons";
+import { Card } from "../../../Layout";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var TITLE_VARIANT_CLASSNAMES = {
+  compact: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["display-heading mb-2"]))),
+  large: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display-medium mb-4"])))
+};
+var BODY_VARIANT_CLASSNAMES = {
+  compact: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-caption typo-subdued"]))),
+  large: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display-body typo-subdued"])))
+};
+var ACTIONS_VARIANT_CLASSNAMES = {
+  compact: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["mt-1"]))),
+  large: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mt-3"])))
+};
+
+/**
+ * The `Promote` component is a contextual way of showing a user that a new feature or product is available to them on a higher plan or as an option.
+ *
+ * See the [Promote documentation page](https://satellite.algolia.com/components/feedback/promote-banner) for more information.
+ */
+export var Promote = function Promote(_ref) {
+  var context = _ref.context,
+    title = _ref.title,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "large" : _ref$variant,
+    illustration = _ref.illustration,
+    actions = _ref.actions,
+    children = _ref.children,
+    onDismiss = _ref.onDismiss;
+  return /*#__PURE__*/_jsxs(Card, {
+    className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["relative flex"]))),
+    fullBleed: true,
+    as: "section",
+    children: [!!illustration && /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-full min-w-24 max-w-64 flex items-center justify-center bg-grey-100"]))),
+      children: illustration
+    }), /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), variant === "large" ? "p-6" : "p-4"),
+      children: [!!context && /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["block mb-1"]))),
+        children: context
+      }), /*#__PURE__*/_jsx("header", {
+        className: TITLE_VARIANT_CLASSNAMES[variant],
+        children: title
+      }), /*#__PURE__*/_jsx("div", {
+        className: BODY_VARIANT_CLASSNAMES[variant],
+        children: children
+      }), !!actions && /*#__PURE__*/_jsx("div", {
+        className: cx(stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex space-x-2"]))), ACTIONS_VARIANT_CLASSNAMES[variant]),
+        children: actions
+      })]
+    }), onDismiss && /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["absolute top-2 right-2"]))),
+      children: /*#__PURE__*/_jsx(IconButton, {
+        icon: XIcon,
+        title: "Close",
+        variant: "subtle",
+        size: "small",
+        onClick: function onClick(evt) {
+          evt.stopPropagation();
+          onDismiss();
+        }
+      })
+    })]
+  });
+};

package/dist/esm/Indicators/Banners/SystemNotification/SystemNotification.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode, VFC } from "react";
+import type { IconComponentType } from "../../../Icons";
+export interface SystemNotificationProps {
+    icon?: IconComponentType;
+    children: ReactNode;
+}
+/**
+ * The `SystemNotification` component is a top-of-page alert for critical system messages, updates, and urgent warnings.
+ *
+ * See the [System Notification documentation page](https://satellite.algolia.com/components/feedback/system-notification) for more information.
+ */
+export declare const SystemNotification: VFC<SystemNotificationProps>;

package/dist/esm/Indicators/Banners/SystemNotification/SystemNotification.js

@@ -0,0 +1,27 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { AlertCircleIcon } from "../../../Icons";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The `SystemNotification` component is a top-of-page alert for critical system messages, updates, and urgent warnings.
+ *
+ * See the [System Notification documentation page](https://satellite.algolia.com/components/feedback/system-notification) for more information.
+ */
+export var SystemNotification = function SystemNotification(_ref) {
+  var icon = _ref.icon,
+    children = _ref.children;
+  var InternalIcon = icon || AlertCircleIcon;
+  return /*#__PURE__*/_jsxs("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center justify-center space-x-4 bg-accent-600 text-white w-full p-4"]))),
+    children: [/*#__PURE__*/_jsx(InternalIcon, {
+      height: "1rem",
+      width: "1rem",
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["shrink-0"])))
+    }), /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-body"]))),
+      children: children
+    })]
+  });
+};

package/dist/esm/Indicators/EmptyState/EmptyState.js

@@ -0,0 +1,92 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
+import cx from "clsx";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var CONTAINER_CONTEXT_CLASSNAMES = {
+  result: {
+    medium: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["max-w-xs"]))),
+    large: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["max-w-md"]))),
+    xlarge: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["max-w-xl"])))
+  },
+  feature: {
+    medium: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["max-w-sm"]))),
+    large: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["max-w-lg"]))),
+    xlarge: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["max-w-2xl"])))
+  },
+  page: {
+    medium: "",
+    large: "",
+    xlarge: ""
+  }
+};
+var LEAD_ILLUS_CONTEXT_CLASSNAMES = {
+  result: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["mb-4"]))),
+  feature: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["mb-6"]))),
+  page: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mb-6"])))
+};
+var TITLE_CONTEXT_CLASSNAMES = {
+  result: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["display-body"]))),
+  feature: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["display-medium"]))),
+  page: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["display-xlarge"])))
+};
+var DESCRIPTION_CONTEXT_CLASSNAMES = {
+  result: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["display-caption mt-2"]))),
+  feature: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["display-body mt-2"]))),
+  page: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["display-small mt-6"])))
+};
+var ACTIONS_CONTEXT_CLASSNAMES = {
+  result: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["mt-1"]))),
+  feature: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["mt-3"]))),
+  page: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["mt-6 md:flex-row"])))
+};
+var renderEmptyState = function renderEmptyState(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    actions = _ref.actions,
+    actionsDirection = _ref.actionsDirection,
+    leadIllustration = _ref.leadIllustration,
+    pageIllustration = _ref.pageIllustration,
+    _ref$usageContext = _ref.usageContext,
+    usageContext = _ref$usageContext === void 0 ? "feature" : _ref$usageContext,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "medium" : _ref$width,
+    _ref$centered = _ref.centered,
+    centered = _ref$centered === void 0 ? false : _ref$centered;
+  var containerClassNames = cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["flex items-center"]))), CONTAINER_CONTEXT_CLASSNAMES[usageContext][width], centered ? stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["justify-center text-center lg:flex-col"]))) : stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["justify-between flex-col lg:flex-row"]))));
+  var titleClassNames = cx(stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["text-grey-900"]))), TITLE_CONTEXT_CLASSNAMES[usageContext]);
+  var descriptionClassNames = cx(stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["text-grey-600"]))), DESCRIPTION_CONTEXT_CLASSNAMES[usageContext]);
+  var actionsClassNames = cx(ACTIONS_CONTEXT_CLASSNAMES[usageContext]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: containerClassNames,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["min-w-2/5"]))),
+      children: [centered && !!leadIllustration && /*#__PURE__*/_jsx("div", {
+        className: LEAD_ILLUS_CONTEXT_CLASSNAMES[usageContext],
+        children: leadIllustration
+      }), /*#__PURE__*/_jsx("h2", {
+        className: titleClassNames,
+        children: title
+      }), !!description && /*#__PURE__*/_jsx("div", {
+        className: descriptionClassNames,
+        children: description
+      }), !!actions && /*#__PURE__*/_jsx("div", {
+        className: cx(stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["flex gap-2"]))), centered ? stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["items-center justify-center"]))) : stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["items-start justify-start"]))), actionsDirection === "column" || centered ? stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["flex-col"]))) : stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["flex-row"]))), actionsClassNames),
+        children: actions
+      })]
+    }), !centered && usageContext === "page" && /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["empty-state-illustration ml-16 hidden lg:flex items-center justify-center"]))),
+      children: pageIllustration
+    })]
+  });
+};
+
+/**
+ * The `EmptyState` component informs users when there's no content or data, providing clear actions and guidance to help them proceed or populate the area.
+ *
+ * See the [Empty State documentation page](https://satellite.algolia.com/layouts/empty-state) for more information.
+ */
+export var EmptyState = function EmptyState(props) {
+  return renderEmptyState(props);
+};