@algolia/satellite 1.0.0-beta.147 → 1.0.0-beta.148

package/esm/Avatars/ApplicationAvatar.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3;
-
 import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { getApplicationInitials, pickApplicationColors } from "./utils";
@@ -10,13 +8,12 @@ var SIZE_CLASSNAMES = {
   small: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-4 h-4"]))),
   medium: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-8 h-8"])))
 };
-
 /** The `ApplicationAvatar` is used as a visual representation of an application. */
 export var ApplicationAvatar = function ApplicationAvatar(_ref) {
   var className = _ref.className,
-      application = _ref.application,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "medium" : _ref$size;
+    application = _ref.application,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size;
   return /*#__PURE__*/_jsx("div", {
     role: "img",
     "aria-label": application.name || "Application's avatar",

package/esm/Avatars/UserAvatar.js

@@ -1,29 +1,23 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 var _templateObject, _templateObject2, _templateObject3;
-
 import cx from "clsx";
 import { useEffect, useState } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import { getUserBackgroundClassName, getUserInitials } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 /** The `UserAvatar` is used as a visual representation of a user. */
 export var UserAvatar = function UserAvatar(_ref) {
   var _user$email;
-
   var className = _ref.className,
-      user = _ref.user,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 32 : _ref$size;
-
+    user = _ref.user,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 32 : _ref$size;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      imageLoaded = _useState2[0],
-      setImageLoaded = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    imageLoaded = _useState2[0],
+    setImageLoaded = _useState2[1];
   var initials = getUserInitials(user);
   useEffect(function () {
     return setImageLoaded(false);

package/esm/Avatars/utils.js

@@ -1,21 +1,14 @@
 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;
-
 import { remove as removeDiacritics } from "diacritics";
 import stl from "../styles/helpers/satellitePrefixer";
 import hashCode from "../utils/hashCode";
-
 /** APPLICATION */
-var APPLICATION_COLORS_CLASSNAMES = [
-/* eslint-disable @algolia/satellite/prefer-accent */
-stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-grey-200 text-grey-800"]))), stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-nebula-200 text-nebula-800"]))), stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-200 text-blue-900"]))), stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-200 text-green-900"]))), stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-pink-200 text-pink-800"]))), stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-200 text-red-800"]))), stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-orange-200 text-orange-900"]))), // Darker variants
-stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-grey-300 text-grey-900"]))), stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["bg-nebula-300 text-nebula-900"]))), stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["bg-blue-300 text-blue-900"]))), stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["bg-green-300 text-green-900"]))), stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["bg-pink-300 text-pink-900"]))), stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["bg-red-300 text-red-900"]))), stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["bg-orange-300 text-orange-900"])))
-/* eslint-enable @algolia/satellite/prefer-accent */
-];
+
+var APPLICATION_COLORS_CLASSNAMES = [/* eslint-disable @algolia/satellite/prefer-accent */stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-grey-200 text-grey-800"]))), stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-nebula-200 text-nebula-800"]))), stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-200 text-blue-900"]))), stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-200 text-green-900"]))), stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-pink-200 text-pink-800"]))), stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-200 text-red-800"]))), stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-orange-200 text-orange-900"]))), // Darker variants
+stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-grey-300 text-grey-900"]))), stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["bg-nebula-300 text-nebula-900"]))), stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["bg-blue-300 text-blue-900"]))), stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["bg-green-300 text-green-900"]))), stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["bg-pink-300 text-pink-900"]))), stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["bg-red-300 text-red-900"]))), stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["bg-orange-300 text-orange-900"]))) /* eslint-enable @algolia/satellite/prefer-accent */];
 export var pickApplicationColors = function pickApplicationColors(applicationId) {
   var _APPLICATION_COLORS_C;
-
   return (_APPLICATION_COLORS_C = APPLICATION_COLORS_CLASSNAMES[Math.abs(hashCode(applicationId)) % APPLICATION_COLORS_CLASSNAMES.length]) !== null && _APPLICATION_COLORS_C !== void 0 ? _APPLICATION_COLORS_C : APPLICATION_COLORS_CLASSNAMES[0];
 };
 export var getApplicationIdInitial = function getApplicationIdInitial(applicationId) {
@@ -23,40 +16,31 @@ export var getApplicationIdInitial = function getApplicationIdInitial(applicatio
 };
 export var getApplicationInitials = function getApplicationInitials(_ref) {
   var name = _ref.name,
-      applicationId = _ref.applicationId;
-
+    applicationId = _ref.applicationId;
   if (!name) {
     return getApplicationIdInitial(applicationId);
   }
-
   var words = removeDiacritics(name.trim()).toLocaleUpperCase().split(/\W+/).filter(function (word) {
     return word.length >= 1;
   });
-
   if (words.length === 0 || words.length === 1 && words[0].length < 2) {
     return getApplicationIdInitial(applicationId);
   } else if (words.length === 1) {
     return words[0].slice(0, 2);
   }
-
   return "".concat(words[0][0]).concat(words[1][0]);
 };
+
 /** USER */
 
-var USER_COLORS_CLASSNAMES = [
-/* eslint-disable @algolia/satellite/prefer-accent */
-stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["bg-grey-400 text-grey-900"]))), stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["bg-nebula-400 text-grey-900"]))), stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["bg-blue-400 text-grey-900"]))), stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["bg-green-400 text-grey-900"]))), stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["bg-pink-400 text-grey-900"]))), stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["bg-red-400 text-grey-900"]))), stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["bg-orange-400 text-grey-900"]))), // Darker variants
-stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["bg-grey-700 text-white"]))), stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["bg-nebula-700 text-white"]))), stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["bg-blue-700 text-grey-900"]))), stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["bg-green-700 text-grey-900"]))), stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["bg-pink-700 text-white"]))), stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["bg-red-700 text-white"]))), stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["bg-orange-600 text-grey-900"])))
-/* eslint-enable @algolia/satellite/prefer-accent */
-];
+var USER_COLORS_CLASSNAMES = [/* eslint-disable @algolia/satellite/prefer-accent */stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["bg-grey-400 text-grey-900"]))), stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["bg-nebula-400 text-grey-900"]))), stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["bg-blue-400 text-grey-900"]))), stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["bg-green-400 text-grey-900"]))), stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["bg-pink-400 text-grey-900"]))), stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["bg-red-400 text-grey-900"]))), stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["bg-orange-400 text-grey-900"]))), // Darker variants
+stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["bg-grey-700 text-white"]))), stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["bg-nebula-700 text-white"]))), stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["bg-blue-700 text-grey-900"]))), stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["bg-green-700 text-grey-900"]))), stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["bg-pink-700 text-white"]))), stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["bg-red-700 text-white"]))), stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["bg-orange-600 text-grey-900"]))) /* eslint-enable @algolia/satellite/prefer-accent */];
 export var getUserBackgroundClassName = function getUserBackgroundClassName(email) {
   var _USER_COLORS_CLASSNAM;
-
   return (_USER_COLORS_CLASSNAM = USER_COLORS_CLASSNAMES[Math.abs(hashCode(email)) % USER_COLORS_CLASSNAMES.length]) !== null && _USER_COLORS_CLASSNAM !== void 0 ? _USER_COLORS_CLASSNAM : USER_COLORS_CLASSNAMES[0];
 };
 export var getUserInitials = function getUserInitials(user) {
   var _user$email, _user$email$match;
-
   var words = user.name ? user.name.trim().split(/\s+/) : (_user$email = user.email) === null || _user$email === void 0 ? void 0 : (_user$email$match = _user$email.match(/^(.+)(?:\+.+?)?@.+$/)) === null || _user$email$match === void 0 ? void 0 : _user$email$match[1].split(".");
   return words ? words.slice(0, 2).map(function (w) {
     return w.toLocaleLowerCase()[0];

package/esm/Badge/Badge.js

@@ -2,13 +2,9 @@ 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, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
-
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -23,19 +19,11 @@ var VARIANT_CLASSNAMES = {
   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 VALUE_VARIANT_CLASSNAMES = {
-  grey: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["text-grey-600"]))),
-  accent: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["text-accent-600"]))),
-  blue: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["text-blue-800"]))),
-  green: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["text-green-900"]))),
-  orange: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-orange-800"]))),
-  red: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["text-red-700"]))),
-  pink: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["text-pink-600"])))
-};
 var SIZE_CLASSNAMES = {
-  "default": stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["h-6 display-body px-2 space-x-2"]))),
-  small: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["h-4 display-caption px-1 space-x-1"])))
+  "default": stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["h-6 display-body px-2 space-x-2"]))),
+  small: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["h-4 display-caption px-1 space-x-1"])))
 };
+
 /**
  * Badges are used to inform a user about a status of an item or a process. They can also contain a numeric value. Badges come with a set of colours that are easily identified. Green colour implies success or completion, while orange suggests a warning, on hold, or a problem. Red coloured badges mean error or failure.
  *
@@ -51,18 +39,16 @@ var SIZE_CLASSNAMES = {
  * - To indicate problem with an index
  * - To display numeric values for multiple items (similar to a "tag cloud")
  */
-
 export var Badge = function Badge(_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 ? "default" : _ref$size,
-      className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    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 ? "default" : _ref$size,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var badgeClassName = cx(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
     className: badgeClassName,
@@ -71,10 +57,9 @@ export var Badge = function Badge(_ref) {
         size: ".8em"
       })
     }), children && /*#__PURE__*/_jsx("span", {
-      className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["truncate"]))),
+      className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["truncate"]))),
       children: children
     }), value && /*#__PURE__*/_jsx("span", {
-      className: VALUE_VARIANT_CLASSNAMES[variant],
       children: value
     })]
   }));

package/esm/Banners/Alert/Alert.js

@@ -1,14 +1,12 @@
 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;
-
+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 { AlertCircle, AlertOctagon, AlertTriangle, CheckCircle, X } from "react-feather";
 import { IconButton } from "../../Button";
 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"])));
+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"]))),
@@ -33,10 +31,11 @@ var ICON_VARIANTS = {
 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"]))),
+  green: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["text-green-700"]))),
   orange: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["text-orange-600"]))),
   red: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["text-red-600"])))
 };
+
 /**
 * Alerts inform users about important changes or temporally conditions. Use this component if you need to communicate something to users in a prominent way.
 
@@ -87,37 +86,36 @@ var ICON_CLASSNAME_VARIANTS = {
 * ## Accessibility
 * TODO
  */
-
 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], BORDER_CLASSNAMES[variant], usageContext !== "page" && stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["rounded border"]))), className);
+    _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(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n            shrink-0 mr-2\n            ", "\n            "])), title ? "mt-1" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
+      className: cx(stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n            shrink-0 mr-2\n            ", "\n            "])), title ? "mt-0.5" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
       size: "1rem"
     }), /*#__PURE__*/_jsxs("div", {
-      className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["flex flex-1 flex-col ", ""])), onDismiss && "mr-6"),
+      className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["flex flex-1 flex-col ", ""])), onDismiss && "mr-6"),
       children: [title && /*#__PURE__*/_jsx("h4", {
-        className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["display-heading text-grey-900 mb-1"]))),
+        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(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["absolute top-2 right-2"]))),
+      className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["absolute right-1.5 top-1.5"]))),
       children: /*#__PURE__*/_jsx(IconButton, {
         icon: X,
         title: "Close",

package/esm/Banners/BigBertha/BigBertha.js

@@ -1,12 +1,9 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2;
-
 import { AlertCircle } from "react-feather";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 /**
 * Major product wide announcement from Algolia to the users.
 
@@ -42,7 +39,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  */
 export var BigBertha = function BigBertha(_ref) {
   var icon = _ref.icon,
-      children = _ref.children;
+    children = _ref.children;
   var InternalIcon = icon || AlertCircle;
   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"]))),

package/esm/Banners/Promote/Promote.js

@@ -1,7 +1,5 @@
 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 { X } from "react-feather";
 import { IconButton } from "../../Button";
@@ -21,6 +19,7 @@ var ACTIONS_VARIANT_CLASSNAMES = {
   compact: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["mt-1"]))),
   large: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mt-3"])))
 };
+
 /**
 * A contextual way of showing our user that a new feature / product is available to them on a higher plan or as an option.
 
@@ -55,16 +54,15 @@ var ACTIONS_VARIANT_CLASSNAMES = {
 * ## Accessibility
 * TODO
  */
-
 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;
+    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,

package/esm/Button/Button.js

@@ -2,13 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["as", "className", "variant", "size", "startIcon", "endIcon", "loading", "children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import cx from "clsx";
 import ProgressSpinner from "../ProgressSpinner";
 import stl from "../styles/helpers/satellitePrefixer";
@@ -17,6 +13,7 @@ import { isButtonType } from "./types";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var BASE_CLASSNAMES = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["btn inline-flex justify-center items-center px-4 typo-display-body"])));
+
 /**
  * Buttons are used to trigger user actions (like "Add", "Close" or "Save") or navigate users elsewhere through the links. Buttons can contain a combination of a clear label and an icon while links are always text.
  *
@@ -31,36 +28,31 @@ var BASE_CLASSNAMES = stl(_templateObject || (_templateObject = _taggedTemplateL
  * - Use icon-only button for an action that is less critical and doesn't have to drag too much of user attention
  * - Buttons can take the full width to fill the parent container
  */
-
 export var Button = function Button(props) {
   var _props$as = props.as,
-      Component = _props$as === void 0 ? "button" : _props$as,
-      className = props.className,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? "neutral" : _props$variant,
-      _props$size = props.size,
-      size = _props$size === void 0 ? "medium" : _props$size,
-      StartIcon = props.startIcon,
-      EndIcon = props.endIcon,
-      _props$loading = props.loading,
-      loading = _props$loading === void 0 ? false : _props$loading,
-      children = props.children,
-      cleanedProps = _objectWithoutProperties(props, _excluded);
-
+    Component = _props$as === void 0 ? "button" : _props$as,
+    className = props.className,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? "neutral" : _props$variant,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "medium" : _props$size,
+    StartIcon = props.startIcon,
+    EndIcon = props.endIcon,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    children = props.children,
+    cleanedProps = _objectWithoutProperties(props, _excluded);
   if (loading) {
     cleanedProps.disabled = true;
   }
-
   var buttonClassName = cx(BASE_CLASSNAMES, BUTTON_SIZE_CLASSNAMES[size], BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["btn-disabled"]))), className);
   var loaderClassNames = stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
   var iconClassNames = cx(getIconColorClassName(props), loading && stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["invisible"]))));
   var textClassNames = cx(loading && stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["invisible"]))));
-
   if (isButtonType(props) && !cleanedProps.hasOwnProperty("type")) {
     // @ts-ignore
     cleanedProps.type = "button";
   }
-
   return /*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({}, cleanedProps), {}, {
     className: buttonClassName,
     children: [loading && /*#__PURE__*/_jsx(ProgressSpinner, {

package/esm/Button/Button.tailwind.js

@@ -7,7 +7,7 @@ var disabledColor = _disabledColor;
 var rgba = _rgba;
 var buttonPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
-      theme = _ref.theme;
+    theme = _ref.theme;
   // Button
   addComponents({
     ".btn": {
@@ -126,8 +126,9 @@ var buttonPlugin = plugin(function (_ref) {
         boxShadow: "none"
       }
     }
-  }); // Button groups
+  });
 
+  // Button groups
   addComponents({
     ".btn-group": {
       display: "flex",

package/esm/Button/ButtonGroup.js

@@ -1,11 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
-
 /**
  * - Use grouped buttons when there is a close relationship between a number of buttons.
  * - Group buttons logically into sets based on usage and importance.
@@ -13,9 +10,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 export var ButtonGroup = function ButtonGroup(_ref) {
   var className = _ref.className,
-      _ref$as = _ref.as,
-      Tag = _ref$as === void 0 ? "div" : _ref$as,
-      children = _ref.children;
+    _ref$as = _ref.as,
+    Tag = _ref$as === void 0 ? "div" : _ref$as,
+    children = _ref.children;
   return /*#__PURE__*/_jsx(Tag, {
     className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["btn-group"]))), className),
     children: children

package/esm/Button/IconButton.js

@@ -2,13 +2,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["as", "className", "variant", "size", "icon", "title", "showTooltip", "loading"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import cx from "clsx";
 import ProgressSpinner from "../ProgressSpinner";
 import stl from "../styles/helpers/satellitePrefixer";
@@ -24,38 +20,32 @@ var SIZE_CLASSNAMES = {
   medium: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["h-8 w-8 text-md"]))),
   large: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["h-10 w-10 text-lg"])))
 };
-
 var VARIANT_CLASSNAMES = _objectSpread(_objectSpread({}, BUTTON_VARIANT_CLASSNAMES), {}, {
   neutral: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["btn-neutral text-grey-600"])))
 });
-
 export var IconButton = function IconButton(props) {
   var _props$as = props.as,
-      Tag = _props$as === void 0 ? "button" : _props$as,
-      className = props.className,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? "neutral" : _props$variant,
-      _props$size = props.size,
-      size = _props$size === void 0 ? "medium" : _props$size,
-      Icon = props.icon,
-      title = props.title,
-      showTooltip = props.showTooltip,
-      _props$loading = props.loading,
-      loading = _props$loading === void 0 ? false : _props$loading,
-      cleanedProps = _objectWithoutProperties(props, _excluded);
-
+    Tag = _props$as === void 0 ? "button" : _props$as,
+    className = props.className,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? "neutral" : _props$variant,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "medium" : _props$size,
+    Icon = props.icon,
+    title = props.title,
+    showTooltip = props.showTooltip,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    cleanedProps = _objectWithoutProperties(props, _excluded);
   if (loading) {
     cleanedProps.disabled = true;
   }
-
   var iconButtonClassName = cx(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["btn-disabled"]))), className);
   var loaderClassNames = stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
-
   if (isButtonType(props) && !cleanedProps.hasOwnProperty("type")) {
     // @ts-ignore
     cleanedProps.type = "button";
   }
-
   return /*#__PURE__*/_jsx(TooltipWrapper, {
     delay: 500,
     show: showTooltip,

package/esm/Button/styles.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-
 import stl from "../styles/helpers/satellitePrefixer";
 export var BUTTON_SIZE_CLASSNAMES = {
   small: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["h-6"]))),
@@ -21,11 +19,9 @@ export var BUTTON_VARIANT_CLASSNAMES = {
 };
 export var getIconColorClassName = function getIconColorClassName(_ref) {
   var disabled = _ref.disabled,
-      variant = _ref.variant;
-
+    variant = _ref.variant;
   if (variant === "destructive" || variant === "primary") {
     return stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["text-white"])));
   }
-
   return disabled ? stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["text-grey-300"]))) : stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["text-grey-600"])));
 };

package/esm/Card/Card.js

@@ -2,13 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["className", "as", "elevation", "fullBleed"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import cx from "clsx";
 import { createElement, forwardRef } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
@@ -21,17 +17,15 @@ var ELEVATION_CLASSNAMES = {
   "400": stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["card-z400"]))),
   "500": stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["card-z500"])))
 };
-
 /** The `Card` is a useful component for containing content within a page. */
 export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
-      _ref$as = _ref.as,
-      as = _ref$as === void 0 ? "section" : _ref$as,
-      _ref$elevation = _ref.elevation,
-      elevation = _ref$elevation === void 0 ? "100" : _ref$elevation,
-      fullBleed = _ref.fullBleed,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$as = _ref.as,
+    as = _ref$as === void 0 ? "section" : _ref$as,
+    _ref$elevation = _ref.elevation,
+    elevation = _ref$elevation === void 0 ? "100" : _ref$elevation,
+    fullBleed = _ref.fullBleed,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/createElement(as, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["card ", " display-body"])), fullBleed && "card-fullbleed"), ELEVATION_CLASSNAMES[elevation], className)

package/esm/Card/Card.tailwind.js

@@ -3,7 +3,7 @@ import _plugin from "tailwindcss/plugin";
 var plugin = _plugin;
 var cardPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
-      theme = _ref.theme;
+    theme = _ref.theme;
   addComponents({
     ".card": {
       background: theme("colors.white"),