@algolia/satellite 1.1.0 → 1.1.2

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

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Alert = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Actions = require("../../../Actions");
+var _Icons = require("../../../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+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;
+var BASE_CLASSNAME = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["relative flex text-grey-900 display-body border"])));
+var BACKGROUND_CLASSNAMES = {
+  grey: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))),
+  accent: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-100"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-green-100"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-100"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-100"])))
+};
+var BORDER_CLASSNAMES = {
+  grey: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["border-grey-200"]))),
+  accent: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["border-accent-200"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["border-green-200"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["border-orange-200"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["border-red-200"])))
+};
+var ICON_VARIANTS = {
+  grey: _Icons.AlertCircleIcon,
+  accent: _Icons.AlertCircleIcon,
+  green: _Icons.CheckCircleIcon,
+  orange: _Icons.AlertTriangleIcon,
+  red: _Icons.AlertOctagonIcon
+};
+var ICON_CLASSNAME_VARIANTS = {
+  grey: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600"]))),
+  accent: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-accent-600"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["text-green-600"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["text-orange-600"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["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.
+ */
+var Alert = exports.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 = (0, _clsx["default"])(BASE_CLASSNAME, title ? (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["p-4"]))) : (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["py-2 px-3"]))), BACKGROUND_CLASSNAMES[variant], usageContext !== "page" ? BORDER_CLASSNAMES[variant] : (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["border-transparent"]))), usageContext !== "page" && (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["rounded"]))), className);
+  var internalIcon = icon === undefined ? true : icon;
+  var Icon = typeof internalIcon === "boolean" && internalIcon ? ICON_VARIANTS[variant] : internalIcon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: containerClassName,
+    style: style,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["\n            shrink-0 mr-2\n            ", "\n            "])), title ? "mt-0.5" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["flex flex-1 flex-col ", ""])), onDismiss && "mr-6"),
+      children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
+        className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["font-bold text-grey-900 mb-1"]))),
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: children
+      })]
+    }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["absolute right-1.5 top-1.5"]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {
+        icon: _Icons.XIcon,
+        title: "Close",
+        variant: "subtle",
+        size: "small",
+        onClick: function onClick(evt) {
+          evt.stopPropagation();
+          onDismiss();
+        }
+      })
+    })]
+  });
+};

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

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Promote = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Actions = require("../../../Actions");
+var _Icons = require("../../../Icons");
+var _Layout = require("../../../Layout");
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var TITLE_VARIANT_CLASSNAMES = {
+  compact: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["display-heading mb-2"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["display-medium mb-4"])))
+};
+var BODY_VARIANT_CLASSNAMES = {
+  compact: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["display-caption typo-subdued"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["display-body typo-subdued"])))
+};
+var ACTIONS_VARIANT_CLASSNAMES = {
+  compact: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["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.
+ */
+var Promote = exports.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__*/(0, _jsxRuntime.jsxs)(_Layout.Card, {
+    className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["relative flex"]))),
+    fullBleed: true,
+    as: "section",
+    children: [!!illustration && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-full min-w-24 max-w-64 flex items-center justify-center bg-grey-100"]))),
+      children: illustration
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["", ""])), variant === "large" ? "p-6" : "p-4"),
+      children: [!!context && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["block mb-1"]))),
+        children: context
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
+        className: TITLE_VARIANT_CLASSNAMES[variant],
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: BODY_VARIANT_CLASSNAMES[variant],
+        children: children
+      }), !!actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex space-x-2"]))), ACTIONS_VARIANT_CLASSNAMES[variant]),
+        children: actions
+      })]
+    }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["absolute top-2 right-2"]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {
+        icon: _Icons.XIcon,
+        title: "Close",
+        variant: "subtle",
+        size: "small",
+        onClick: function onClick(evt) {
+          evt.stopPropagation();
+          onDismiss();
+        }
+      })
+    })]
+  });
+};

package/dist/cjs/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/cjs/Indicators/Banners/SystemNotification/SystemNotification.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SystemNotification = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _Icons = require("../../../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+/**
+ * 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.
+ */
+var SystemNotification = exports.SystemNotification = function SystemNotification(_ref) {
+  var icon = _ref.icon,
+    children = _ref.children;
+  var InternalIcon = icon || _Icons.AlertCircleIcon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center space-x-4 bg-accent-600 text-white w-full p-4"]))),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InternalIcon, {
+      height: "1rem",
+      width: "1rem",
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"])))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["display-body"]))),
+      children: children
+    })]
+  });
+};

package/dist/cjs/Indicators/EmptyState/EmptyState.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyState = 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, _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;
+var CONTAINER_CONTEXT_CLASSNAMES = {
+  result: {
+    medium: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["max-w-xs"]))),
+    large: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["max-w-md"]))),
+    xlarge: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["max-w-xl"])))
+  },
+  feature: {
+    medium: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["max-w-sm"]))),
+    large: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["max-w-lg"]))),
+    xlarge: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["max-w-2xl"])))
+  },
+  page: {
+    medium: "",
+    large: "",
+    xlarge: ""
+  }
+};
+var LEAD_ILLUS_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["mb-4"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["mb-6"]))),
+  page: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mb-6"])))
+};
+var TITLE_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["display-body"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["display-medium"]))),
+  page: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge"])))
+};
+var DESCRIPTION_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["display-caption mt-2"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["display-body mt-2"]))),
+  page: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["display-small mt-6"])))
+};
+var ACTIONS_CONTEXT_CLASSNAMES = {
+  result: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))),
+  feature: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["mt-3"]))),
+  page: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["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 = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), CONTAINER_CONTEXT_CLASSNAMES[usageContext][width], centered ? (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["justify-center text-center lg:flex-col"]))) : (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["justify-between flex-col lg:flex-row"]))));
+  var titleClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))), TITLE_CONTEXT_CLASSNAMES[usageContext]);
+  var descriptionClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600"]))), DESCRIPTION_CONTEXT_CLASSNAMES[usageContext]);
+  var actionsClassNames = (0, _clsx["default"])(ACTIONS_CONTEXT_CLASSNAMES[usageContext]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: containerClassNames,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["min-w-2/5"]))),
+      children: [centered && !!leadIllustration && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: LEAD_ILLUS_CONTEXT_CLASSNAMES[usageContext],
+        children: leadIllustration
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        className: titleClassNames,
+        children: title
+      }), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: descriptionClassNames,
+        children: description
+      }), !!actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))), centered ? (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["items-center justify-center"]))) : (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["items-start justify-start"]))), actionsDirection === "column" || centered ? (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["flex-col"]))) : (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["flex-row"]))), actionsClassNames),
+        children: actions
+      })]
+    }), !centered && usageContext === "page" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["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.
+ */
+var EmptyState = exports.EmptyState = function EmptyState(props) {
+  return renderEmptyState(props);
+};

package/dist/cjs/Indicators/EmptyState/types.d.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+import type { FlexGridDirection } from "../../Layout";
+export declare type EmptyStateUsageContexts = "result" | "feature" | "page";
+export declare type EmptyStateWidths = "medium" | "large" | "xlarge";
+export interface EmptyStatePropsAll {
+    /** Descriptive title for the state */
+    title: ReactNode;
+    /** Optional description to explain why the screen is empty or define next steps */
+    description?: ReactNode;
+    /** Buttons */
+    actions?: ReactNode;
+    /** Direction overwrite for the buttons */
+    actionsDirection?: FlexGridDirection;
+    /** Add a `<Medallion />`, an `img` element or `svg` in there */
+    leadIllustration?: ReactNode;
+    /** Plop in an `img` element or `svg` here */
+    pageIllustration?: ReactNode;
+    /**
+     * UsageContext of the component
+     * @default feature
+     */
+    usageContext?: EmptyStateUsageContexts;
+    /**
+     * Define whether or not content should be centered
+     * @default false
+     */
+    centered?: boolean;
+    /**
+     * Defines how wide the EmptyState can expand
+     * @default medium
+     */
+    width?: EmptyStateWidths;
+}
+interface EmptyStatePropsUsageContextResult extends Omit<EmptyStatePropsAll, "usageContext" | "illustration"> {
+    usageContext: "result";
+    pageIllustration?: never;
+}
+interface EmptyStatePropsUsageContextFeature extends Omit<EmptyStatePropsAll, "usageContext" | "illustration"> {
+    usageContext: "feature";
+    illustration?: never;
+}
+interface EmptyStatePropsUsageContextPage extends Omit<EmptyStatePropsAll, "usageContext" | "centered"> {
+    usageContext: "page";
+    centered?: boolean;
+}
+interface EmptyStatePropsUsageContextDefault extends Omit<EmptyStatePropsUsageContextFeature, "usageContext"> {
+    usageContext?: undefined;
+}
+export declare type EmptyStateProps = EmptyStatePropsUsageContextDefault | EmptyStatePropsUsageContextResult | EmptyStatePropsUsageContextFeature | EmptyStatePropsUsageContextPage;
+export {};

package/dist/cjs/Indicators/KeyboardKey/KeyboardKey.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KeyboardKey = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _Icons = require("../../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+var KEY_MAPPINGS = {
+  up: _Icons.ArrowUpIcon,
+  down: _Icons.ArrowDownIcon,
+  left: _Icons.ArrowLeftIcon,
+  right: _Icons.ArrowRightIcon,
+  enter: _Icons.CornerDownLeftIcon,
+  escape: "esc"
+};
+/**
+ * The `KeyboardKey` component is used to display a keyboard key.
+ *
+ * See the [Keyboard Key documentation page](https://satellite.algolia.com/components/misc/keyboard-key) for more information.
+ */
+var KeyboardKey = exports.KeyboardKey = function KeyboardKey(_ref) {
+  var className = _ref.className,
+    value = _ref.value;
+  var mappedValue = KEY_MAPPINGS[value];
+  var displayed = !mappedValue ? value : typeof mappedValue === "string" ? mappedValue : /*#__PURE__*/(0, _react.createElement)(mappedValue, {
+    "aria-label": value,
+    width: "1em",
+    height: "1em"
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("kbd", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["keyboard-key "]))), className),
+    children: displayed
+  });
+};

package/dist/cjs/Indicators/ProgressBar/ProgressBar.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBar = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var Progress = _interopRequireWildcard(require("@radix-ui/react-progress"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _clamp = require("../../utils/clamp");
+var _prefersReducedMotion = require("../../utils/prefersReducedMotion");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["value", "max", "className", "barClassName"];
+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; }
+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; }
+/**
+ * The `ProgressBar` component visually indicates the completion status of a task, updating in real-time to guide users.
+ *
+ * See the [Progress Bar documentation page](https://satellite.algolia.com/components/feedback/progress-bar) for more information.
+ */
+var ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var value = _ref.value,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    className = _ref.className,
+    barClassName = _ref.barClassName,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  if (value < 0 || value > max) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("ProgressBar: Invalid `value` of ".concat(value, ". The `value` prop must be between 0 and ").concat(max, " (`max` prop). The `value` has been clamped to the range of 0 to ").concat(max, "."));
+    }
+    value = (0, _clamp.clamp)(value, 0, max);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Progress.Root, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    value: value,
+    max: max,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["progress-bar"]))), className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Progress.Indicator, {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["progress-bar-progress transition-transform ease-in-out origin-left"]))), _prefersReducedMotion.prefersReducedMotion ? (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["duration-150"]))) : (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["duration-500"]))), barClassName),
+      style: {
+        transform: "scaleX(".concat(value / max, ")")
+      }
+    })
+  }));
+});
+ProgressBar.displayName = "ProgressBar";

package/dist/cjs/Indicators/ProgressBar/ProgressBar.tailwind.js

@@ -0,0 +1,25 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var rgba = require("../../styles/rgba");
+var progressBarPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".progress-bar": {
+      height: "4px",
+      width: "100%",
+      display: "block",
+      overflow: "hidden",
+      background: theme("colors.grey.100"),
+      boxShadow: "\n        inset 0px 1px 3px 0px ".concat(rgba(theme("colors.black"), 0.1), ",\n        0px 0.5px 0px 0px ").concat(rgba(theme("colors.white"), 0.05), "\n      "),
+      borderRadius: "4px"
+    },
+    ".progress-bar-progress": {
+      height: "100%",
+      background: theme("colors.accent.600")
+    }
+  });
+});
+module.exports = progressBarPlugin;

package/dist/cjs/Indicators/ProgressSpinner/ProgressSpinner.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressSpinner = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+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 _excluded = ["className", "size", "thickness", "align"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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; }
+var ALIGN_CLASSNAMES = {
+  left: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["mr-auto"]))),
+  center: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["m-auto"]))),
+  right: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-auto"])))
+};
+
+/**
+ * The `ProgressSpinner` component is used for loading data or performing actions without an instant effect. Spinners reassure we're processing their actions without revealing what's going on behind-the-scenes.
+ *
+ * See the [Progress Spinner documentation page](https://satellite.algolia.com/components/feedback/progress-spinner) for more information.
+ */
+var ProgressSpinner = exports.ProgressSpinner = function ProgressSpinner(_ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    _ref$thickness = _ref.thickness,
+    thickness = _ref$thickness === void 0 ? 2 : _ref$thickness,
+    align = _ref.align,
+    svgProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return (
+    /*#__PURE__*/
+    // Took heavy inspiration from https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CircularProgress/CircularProgress.js
+    (0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, svgProps), {}, {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["progress-spinner"]))), align && ALIGN_CLASSNAMES[align], className),
+      viewBox: "".concat(size / 2, " ").concat(size / 2, " ").concat(size, " ").concat(size),
+      width: size,
+      height: size,
+      role: "status",
+      "aria-busy": true,
+      "aria-live": "polite",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+        children: "Loading spinner"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+        cx: size,
+        cy: size,
+        r: (size - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness
+      })]
+    }))
+  );
+};