@algolia/satellite 1.0.0-v3.99 → 1.1.0

package/dist/cjs/Badge/Badge.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Badge = 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 _react = require("react");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _isRenderedChild = require("../utils/isRenderedChild");
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (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 BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  inline-flex items-center justify-center\n  rounded-full border\n  overflow-hidden\n"])));
+var VARIANT_CLASSNAMES = {
+  grey: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-grey-200 text-grey-700"]))),
+  accent: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-100 border-accent-200 text-accent-700"]))),
+  blue: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-100 border-blue-200 text-blue-800"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-green-100 border-green-300 text-green-900"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-100 border-orange-300 text-orange-800"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-red-100 border-red-200 text-red-700"]))),
+  pink: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-100 border-pink-200 text-pink-700"])))
+};
+var SIZE_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["h-4 display-caption px-1 space-x-1"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["h-5 display-body px-2 space-x-2"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["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.
+ */
+var Badge = exports.Badge = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var badgeClassName = (0, _clsx["default"])(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    className: badgeClassName,
+    children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+        width: ".8em",
+        height: ".8em"
+      })
+    }), (0, _isRenderedChild.isRenderedChild)(children) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
+      children: children
+    }), (0, _isRenderedChild.isRenderedChild)(value) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: value
+    })]
+  }));
+});
+Badge.displayName = "Badge";

package/dist/cjs/Badge/index.d.ts

@@ -0,0 +1 @@
+export * from "./Badge";

package/dist/cjs/Badge/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Badge = require("./Badge");
+Object.keys(_Badge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Badge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Badge[key];
+    }
+  });
+});

package/dist/cjs/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/cjs/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 _Button = require("../../Button");
+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)(_Button.IconButton, {
+        icon: _Icons.XIcon,
+        title: "Close",
+        variant: "subtle",
+        size: "small",
+        onClick: function onClick(evt) {
+          evt.stopPropagation();
+          onDismiss();
+        }
+      })
+    })]
+  });
+};

package/dist/cjs/Banners/Alert/index.d.ts

@@ -0,0 +1 @@
+export * from "./Alert";

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Alert = require("./Alert");
+Object.keys(_Alert).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Alert[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Alert[key];
+    }
+  });
+});

package/dist/cjs/Banners/Promote/Promote.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode, VFC } from "react";
+declare type PromoteVariants = "large" | "compact";
+interface CompactPromoteProps {
+    variant?: Extract<PromoteVariants, "compact">;
+    illustration?: never;
+}
+interface WidePromoteProps {
+    variant?: Extract<PromoteVariants, "large">;
+    /** Plop in an `img` element or `svg` here */
+    illustration?: ReactNode;
+}
+export declare type PromoteProps = {
+    /** Product context for the banner */
+    context?: ReactNode;
+    /** Descriptive title for banner */
+    title: ReactNode;
+    /** Buttons */
+    actions?: ReactNode;
+    onDismiss?(): void;
+    children: ReactNode;
+} & (CompactPromoteProps | WidePromoteProps);
+/**
+ * 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 declare const Promote: VFC<PromoteProps>;
+export {};

package/dist/cjs/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 _Button = require("../../Button");
+var _Card = require("../../Card");
+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;
+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)(_Card.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)(_Button.IconButton, {
+        icon: _Icons.XIcon,
+        title: "Close",
+        variant: "subtle",
+        size: "small",
+        onClick: function onClick(evt) {
+          evt.stopPropagation();
+          onDismiss();
+        }
+      })
+    })]
+  });
+};

package/dist/cjs/Banners/Promote/index.d.ts

@@ -0,0 +1 @@
+export * from "./Promote";

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Promote = require("./Promote");
+Object.keys(_Promote).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Promote[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Promote[key];
+    }
+  });
+});

package/dist/cjs/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/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/Banners/SystemNotification/index.d.ts

@@ -0,0 +1 @@
+export * from "./SystemNotification";

package/dist/cjs/Banners/SystemNotification/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _SystemNotification = require("./SystemNotification");
+Object.keys(_SystemNotification).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SystemNotification[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SystemNotification[key];
+    }
+  });
+});

package/dist/cjs/Banners/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Alert";
+export * from "./SystemNotification";
+export * from "./Promote";

package/dist/cjs/Banners/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Alert = require("./Alert");
+Object.keys(_Alert).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Alert[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Alert[key];
+    }
+  });
+});
+var _SystemNotification = require("./SystemNotification");
+Object.keys(_SystemNotification).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SystemNotification[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SystemNotification[key];
+    }
+  });
+});
+var _Promote = require("./Promote");
+Object.keys(_Promote).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Promote[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Promote[key];
+    }
+  });
+});

package/dist/cjs/Button/Button.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type PolymorphicButtonProps } from "./PolymorphicButton";
+export declare type ButtonProps = Omit<PolymorphicButtonProps<"button">, "as" | "ref">;
+/**
+ * The `Button` component is used to trigger user actions (like "Add", "Close" or "Save") or navigate users elsewhere through the links. It can contain a combination of a clear label and an icon while links are always text.
+ *
+ * See the [Button documentation page](https://satellite.algolia.com/components/actions/button) for more information.
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cjs/Button/Button.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _PolymorphicButton = require("./PolymorphicButton");
+var _jsxRuntime = require("react/jsx-runtime");
+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 `Button` component is used to trigger user actions (like "Add", "Close" or "Save") or navigate users elsewhere through the links. It can contain a combination of a clear label and an icon while links are always text.
+ *
+ * See the [Button documentation page](https://satellite.algolia.com/components/actions/button) for more information.
+ */
+var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolymorphicButton.PolymorphicButton, _objectSpread(_objectSpread({}, props), {}, {
+    as: "button",
+    ref: ref
+  }));
+});
+Button.displayName = "Button";

package/dist/cjs/Button/Button.tailwind.d.ts

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