@algolia/satellite 1.0.0-beta.129 → 1.0.0-beta.132

package/cjs/EmptyState/types.d.ts

@@ -1,20 +1,20 @@
-/// <reference types="react" />
-import { FlexGridDirection } from "../FlexGrid";
+import type { ReactNode } from "react";
+import type { FlexGridDirection } from "../FlexGrid";
 export declare type EmptyStateUsageContexts = "result" | "feature" | "page";
 export declare type EmptyStateWidths = "medium" | "large" | "xlarge";
 export interface EmptyStatePropsAll {
     /** Descriptive title for the state */
-    title: React.ReactNode;
+    title: ReactNode;
     /** Optional description to explain why the screen is empty or define next steps */
-    description?: React.ReactNode;
+    description?: ReactNode;
     /** Buttons */
-    actions?: React.ReactNode;
+    actions?: ReactNode;
     /** Direction overwrite for the buttons */
     actionsDirection?: FlexGridDirection;
     /** Add a <Medallion /> element in there */
-    medallion?: React.ReactNode;
+    medallion?: ReactNode;
     /** Plop in an `img` element or `svg` here */
-    illustration?: React.ReactNode;
+    illustration?: ReactNode;
     /**
      * UsageContext of the component
      * @default "feature"

package/cjs/Field/Field.d.ts

@@ -1,13 +1,13 @@
-import React, { FunctionComponent } from "react";
+import type { FunctionComponent, ReactChild, ReactNode } from "react";
 import { FieldState } from "./FieldStateContext";
 export interface FieldProps {
     /** @ignore */
     className?: string;
     /** Label to display above the nested input */
-    label?: React.ReactChild;
+    label?: ReactChild;
     labelFor?: string;
     /** Helpful description to show below the `Field` */
-    description?: React.ReactNode;
+    description?: ReactNode;
     /**
      * An object to handle state
      * @default DEFAULT_STATE

package/cjs/Field/Field.js

@@ -11,8 +11,6 @@ exports["default"] = exports.Field = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _reactFeather = require("react-feather");
@@ -21,6 +19,8 @@ var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satel
 
 var _FieldStateContext = _interopRequireWildcard(require("./FieldStateContext"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -71,30 +71,37 @@ var Field = function Field(_ref) {
       _ref$inline = _ref.inline,
       inline = _ref$inline === void 0 ? false : _ref$inline,
       children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(_FieldStateContext["default"].Provider, {
-    value: state
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: className
-  }, /*#__PURE__*/_react["default"].createElement("label", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["cursor-pointer flex ", ""])), !inline && "flex-col"),
-    htmlFor: labelFor
-  }, label && /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate ", ""])), inline ? "mr-2" : "mb-1")
-  }, label), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-auto mt-1"]))))
-  }, children)), state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/_react["default"].createElement("ul", {
-    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["mb-1 mt-2 display-caption"])))
-  }, state.errors.map(function (error) {
-    return /*#__PURE__*/_react["default"].createElement("li", {
-      key: error,
-      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"])))
-    }, /*#__PURE__*/_react["default"].createElement(_reactFeather.AlertCircle, {
-      className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-red-700 mr-1"]))),
-      size: "1rem"
-    }), error);
-  })) : description ? /*#__PURE__*/_react["default"].createElement("p", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["display-caption text-grey-600"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))) : (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mt-2"]))))
-  }, description) : null));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldStateContext["default"].Provider, {
+    value: state,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: className,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["cursor-pointer flex ", ""])), !inline && "flex-col"),
+        htmlFor: labelFor,
+        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-auto mt-1"])))),
+          children: children
+        })]
+      }), state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["mb-1 mt-2 display-caption"]))),
+        children: state.errors.map(function (error) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+            className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.AlertCircle, {
+              className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-red-700 mr-1"]))),
+              size: "1rem"
+            }), error]
+          }, error);
+        })
+      }) : description ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["display-caption text-grey-600"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))) : (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mt-2"])))),
+        children: description
+      }) : null]
+    })
+  });
 };
 
 exports.Field = Field;

package/cjs/Flag/Flag.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent } from "react";
-import { Notification } from "./types";
+import type { FunctionComponent } from "react";
+import type { Notification } from "./types";
 export declare type FlagProps = Omit<Notification, "id" | "content">;
 export declare const Flag: FunctionComponent<FlagProps>;
 export default Flag;

package/cjs/Flag/Flag.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,25 +11,23 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _reactFeather = require("react-feather");
-
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _react = require("react");
 
-var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
+var _reactFeather = require("react-feather");
 
 var _Button = require("../Button");
 
 var _Card = require("../Card");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _jsxRuntime = require("react/jsx-runtime");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 
 var VARIANT_CLASSNAMES = {
   grey: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["bg-grey-500"]))),
@@ -81,36 +77,45 @@ var Flag = function Flag(_ref) {
       return clearTimeout(timer);
     };
   }, [autoDismissAfter, hovered]);
-  return /*#__PURE__*/_react["default"].createElement(_Card.Card, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
     fullBleed: true,
-    className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flag shadow-z500"])))
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["p-4 flex"]))),
-    onMouseEnter: function onMouseEnter() {
-      return setHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setHovered(false);
-    }
-  }, loading ? /*#__PURE__*/_react["default"].createElement(_ProgressSpinner["default"], {
-    size: 16,
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
-  }) : /*#__PURE__*/_react["default"].createElement(Icon, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex-shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
-    size: 16
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex-1 ml-4"])))
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex justify-between"])))
-  }, hasTitle ? /*#__PURE__*/_react["default"].createElement("h3", null, title) : /*#__PURE__*/_react["default"].createElement("div", null, children), onDismiss && /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
-    icon: _reactFeather.X,
-    title: "Dismiss",
-    variant: "subtle",
-    size: "small",
-    onClick: onDismiss
-  })), hasTitle && children && /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600 mt-2"])))
-  }, children))));
+    className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flag shadow-z500"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["p-4 flex"]))),
+      onMouseEnter: function onMouseEnter() {
+        return setHovered(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHovered(false);
+      },
+      children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {
+        size: 16,
+        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex-shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
+        size: 16
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex-1 ml-4"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex justify-between"]))),
+          children: [hasTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+            children: title
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: children
+          }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            icon: _reactFeather.X,
+            title: "Dismiss",
+            variant: "subtle",
+            size: "small",
+            onClick: onDismiss
+          })]
+        }), hasTitle && children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600 mt-2"]))),
+          children: children
+        })]
+      })]
+    })
+  });
 };
 
 exports.Flag = Flag;

package/cjs/Flag/Flags.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { Notification } from "./types";
+/// <reference types="react" />
+import type { Notification } from "./types";
 export interface FlagsProps {
     /**
      * Array of notifications
@@ -44,5 +44,5 @@ export interface FlagsProps {
  *
  * When there are multiple flags, they will stack on top of one another with the most recent flag on top. When a user dismisses a flag, any older flags 'below' will come to the top. Careful consideration should be taken to take into account the ordering and priority of flags in the stack. Never use dismissible and non-dismissible flags in a stack as flags that automatically dismiss can do so and not be visible to the user.
  */
-export declare const Flags: ({ notifications }: FlagsProps) => React.ReactPortal;
+export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactPortal;
 export default Flags;

package/cjs/Flag/Flags.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Flags = 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 _react = _interopRequireDefault(require("react"));
-
 var _reactDom = require("react-dom");
 
 var _reactTransitionGroup = require("react-transition-group");
@@ -21,10 +21,16 @@ var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satel
 
 var _Flag = _interopRequireDefault(require("./Flag"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _excluded = ["content", "id"];
 
 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) { (0, _defineProperty2["default"])(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; }
+
 var TRANSITION_TIMEOUT = 500;
 /**
  * Use flags for messages containing confirmations, alerts, and acknowledgments that require minimal user interaction. These event-driven messages appear at the bottom of the screen and overlay any content.
@@ -67,27 +73,31 @@ var TRANSITION_TIMEOUT = 500;
 var Flags = function Flags(_ref) {
   var _ref$notifications = _ref.notifications,
       notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.TransitionGroup, {
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
     className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4"]))),
-    component: "ul"
-  }, notifications.map(function (_ref2) {
-    var content = _ref2.content,
-        id = _ref2.id,
-        rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-    return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
-      key: id,
-      classNames: {
-        enter: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flags_item-enter"]))),
-        enterActive: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flags_item-enter-active"]))),
-        exit: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flags_item-exit"]))),
-        exitActive: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flags_item-exit-active"])))
-      },
-      timeout: TRANSITION_TIMEOUT,
-      appear: true
-    }, /*#__PURE__*/_react["default"].createElement("li", {
-      className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["mt-4"])))
-    }, /*#__PURE__*/_react["default"].createElement(_Flag["default"], rest, content)));
-  })), document.body);
+    component: "ul",
+    children: notifications.map(function (_ref2) {
+      var content = _ref2.content,
+          id = _ref2.id,
+          rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+        classNames: {
+          enter: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flags_item-enter"]))),
+          enterActive: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flags_item-enter-active"]))),
+          exit: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flags_item-exit"]))),
+          exitActive: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flags_item-exit-active"])))
+        },
+        timeout: TRANSITION_TIMEOUT,
+        appear: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["mt-4"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flag["default"], _objectSpread(_objectSpread({}, rest), {}, {
+            children: content
+          }))
+        })
+      }, id);
+    })
+  }), document.body);
 };
 
 exports.Flags = Flags;

package/cjs/Flag/types.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import { IconComponentType } from "../types";
-import { ColorVariant } from "../types";
+import type { ReactNode } from "react";
+import type { IconComponentType } from "../types";
+import type { ColorVariant } from "../types";
 export interface Notification {
     /** Unique notification ID */
     id: string;
     title?: string;
     /** Content goes here */
-    content: React.ReactNode;
+    content: ReactNode;
     /** Icon to accompany the notification */
     icon?: IconComponentType;
     /**  @default false */

package/cjs/FlexGrid/FlexGrid.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react";
+import type { FunctionComponent } from "react";
 export declare type FlexGridDirection = "row" | "column";
 export declare type FlexGridAlignment = "leading" | "trailing" | "center" | "fill" | "baseline";
 export declare type FlexGridDistribution = "equalSpacing" | "leading" | "trailing" | "center" | "fill" | "fillEvenly";

package/cjs/FlexGrid/FlexGrid.js

@@ -9,14 +9,16 @@ exports["default"] = exports.FlexGrid = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _react = require("react");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _isRenderedChild = _interopRequireDefault(require("../utils/isRenderedChild"));
 
+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;
 
 var SPACING_CLASSNAMES = {
@@ -61,13 +63,17 @@ var FlexGrid = function FlexGrid(_ref) {
       _ref$wrap = _ref.wrap,
       wrap = _ref$wrap === void 0 ? false : _ref$wrap,
       children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inline"]))), className)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inner"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["inline-flex"]))) : (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["flex"]))), wrap && (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution])
-  }, _react["default"].Children.map(children, function (child) {
-    return /*#__PURE__*/_react["default"].isValidElement(child) ? child : (0, _isRenderedChild["default"])(child) ? /*#__PURE__*/_react["default"].createElement("span", null, child) : child;
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inline"]))), className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inner"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["inline-flex"]))) : (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["flex"]))), wrap && (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution]),
+      children: _react.Children.map(children, function (child) {
+        return /*#__PURE__*/(0, _react.isValidElement)(child) ? child : (0, _isRenderedChild["default"])(child) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: child
+        }) : child;
+      })
+    })
+  });
 };
 
 exports.FlexGrid = FlexGrid;

package/cjs/FlexGrid/FlexGrid.tailwind.js

@@ -4,9 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { (0, _defineProperty2["default"])(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; }
 
 // @ts-check
 

package/cjs/HelpUnderline/HelpUnderline.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react";
+import type { FunctionComponent } from "react";
 import { TooltipWrapperProps } from "../Tooltip";
 export interface HelpUnderlineProps {
     className?: string;

package/cjs/HelpUnderline/HelpUnderline.js

@@ -9,14 +9,14 @@ exports["default"] = exports.HelpUnderline = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _Tooltip = require("../Tooltip");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _templateObject, _templateObject2, _templateObject3;
 
 var HelpUnderline = function HelpUnderline(_ref) {
@@ -26,14 +26,16 @@ var HelpUnderline = function HelpUnderline(_ref) {
       tooltipContent = _ref.tooltipContent,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? "bottom" : _ref$placement;
-  return /*#__PURE__*/_react["default"].createElement(_Tooltip.TooltipWrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
     wrapperClassName: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["leading-inherit"]))), className),
     tooltipClassName: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["max-w-64"]))), tooltipClassName),
     content: tooltipContent,
-    placement: placement
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["help-underline"])))
-  }, children));
+    placement: placement,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["help-underline"]))),
+      children: children
+    })
+  });
 };
 
 exports.HelpUnderline = HelpUnderline;

package/cjs/Input/Input.d.ts

@@ -1,12 +1,12 @@
-import React from "react";
-import { IconComponentType } from "../types";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import type { IconComponentType } from "../types";
 export declare type InputVariant = "small" | "medium" | "large";
 export declare type InputStatus = "default" | "validated" | "invalid";
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "defaultChecked"> {
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "checked" | "defaultChecked"> {
     type?: "text" | "number" | "search" | "email" | "password";
     variant?: InputVariant;
     startIcon?: IconComponentType;
-    endItem?: React.ReactNode;
+    endItem?: ReactNode;
     clearable?: boolean;
 }
 /**
@@ -16,5 +16,5 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
  * #### Number input
  * - **Stepper (optional)**: consider using a stepper (number control) to let users increase or decrease the value of the input. This is an optional part of the number field so only use based on what you think will help the user
  */
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;