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

package/esm/Flag/Flag.js

@@ -3,13 +3,15 @@ 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;
 
-import React, { useEffect, useRef, useState } from "react";
 import cx from "classnames";
-import { X, Check } from "react-feather";
-import stl from "../styles/helpers/satellitePrefixer";
-import ProgressSpinner from "../ProgressSpinner";
+import { useEffect, useRef, useState } from "react";
+import { Check, X } from "react-feather";
 import { IconButton } from "../Button";
 import { Card } from "../Card";
+import ProgressSpinner from "../ProgressSpinner";
+import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var VARIANT_CLASSNAMES = {
   grey: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-grey-500"]))),
   accent: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-accent-500"]))),
@@ -57,35 +59,44 @@ export var Flag = function Flag(_ref) {
       return clearTimeout(timer);
     };
   }, [autoDismissAfter, hovered]);
-  return /*#__PURE__*/React.createElement(Card, {
+  return /*#__PURE__*/_jsx(Card, {
     fullBleed: true,
-    className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flag shadow-z500"])))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-4 flex"]))),
-    onMouseEnter: function onMouseEnter() {
-      return setHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setHovered(false);
-    }
-  }, loading ? /*#__PURE__*/React.createElement(ProgressSpinner, {
-    size: 16,
-    className: cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
-  }) : /*#__PURE__*/React.createElement(Icon, {
-    className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
-    size: 16
-  }), /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-1 ml-4"])))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex justify-between"])))
-  }, hasTitle ? /*#__PURE__*/React.createElement("h3", null, title) : /*#__PURE__*/React.createElement("div", null, children), onDismiss && /*#__PURE__*/React.createElement(IconButton, {
-    icon: X,
-    title: "Dismiss",
-    variant: "subtle",
-    size: "small",
-    onClick: onDismiss
-  })), hasTitle && children && /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["text-grey-600 mt-2"])))
-  }, children))));
+    className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flag shadow-z500"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-4 flex"]))),
+      onMouseEnter: function onMouseEnter() {
+        return setHovered(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHovered(false);
+      },
+      children: [loading ? /*#__PURE__*/_jsx(ProgressSpinner, {
+        size: 16,
+        className: cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
+      }) : /*#__PURE__*/_jsx(Icon, {
+        className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
+        size: 16
+      }), /*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-1 ml-4"]))),
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex justify-between"]))),
+          children: [hasTitle ? /*#__PURE__*/_jsx("h3", {
+            children: title
+          }) : /*#__PURE__*/_jsx("div", {
+            children: children
+          }), onDismiss && /*#__PURE__*/_jsx(IconButton, {
+            icon: X,
+            title: "Dismiss",
+            variant: "subtle",
+            size: "small",
+            onClick: onDismiss
+          })]
+        }), hasTitle && children && /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["text-grey-600 mt-2"]))),
+          children: children
+        })]
+      })]
+    })
+  });
 };
 export default Flag;

package/esm/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/esm/Flag/Flags.js

@@ -1,14 +1,19 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["content", "id"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-import React from "react";
+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 { createPortal } from "react-dom";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import stl from "../styles/helpers/satellitePrefixer";
 import Flag from "./Flag";
+import { jsx as _jsx } from "react/jsx-runtime";
 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.
@@ -51,27 +56,31 @@ var TRANSITION_TIMEOUT = 500;
 export var Flags = function Flags(_ref) {
   var _ref$notifications = _ref.notifications,
       notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
-  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(TransitionGroup, {
+  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(TransitionGroup, {
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["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 = _objectWithoutProperties(_ref2, _excluded);
+    component: "ul",
+    children: notifications.map(function (_ref2) {
+      var content = _ref2.content,
+          id = _ref2.id,
+          rest = _objectWithoutProperties(_ref2, _excluded);
 
-    return /*#__PURE__*/React.createElement(CSSTransition, {
-      key: id,
-      classNames: {
-        enter: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flags_item-enter"]))),
-        enterActive: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flags_item-enter-active"]))),
-        exit: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flags_item-exit"]))),
-        exitActive: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flags_item-exit-active"])))
-      },
-      timeout: TRANSITION_TIMEOUT,
-      appear: true
-    }, /*#__PURE__*/React.createElement("li", {
-      className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mt-4"])))
-    }, /*#__PURE__*/React.createElement(Flag, rest, content)));
-  })), document.body);
+      return /*#__PURE__*/_jsx(CSSTransition, {
+        classNames: {
+          enter: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flags_item-enter"]))),
+          enterActive: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flags_item-enter-active"]))),
+          exit: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flags_item-exit"]))),
+          exitActive: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flags_item-exit-active"])))
+        },
+        timeout: TRANSITION_TIMEOUT,
+        appear: true,
+        children: /*#__PURE__*/_jsx("li", {
+          className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mt-4"]))),
+          children: /*#__PURE__*/_jsx(Flag, _objectSpread(_objectSpread({}, rest), {}, {
+            children: content
+          }))
+        })
+      }, id);
+    })
+  }), document.body);
 };
 export default Flags;

package/esm/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/esm/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/esm/FlexGrid/FlexGrid.js

@@ -3,10 +3,11 @@ 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;
 
 // Heavily inspired by https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.tsx#L1
-import React from "react";
 import cx from "classnames";
+import { Children, isValidElement } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import isRenderedChild from "../utils/isRenderedChild";
+import { jsx as _jsx } from "react/jsx-runtime";
 var SPACING_CLASSNAMES = {
   none: "",
   sm: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex-grid-sm"]))),
@@ -48,12 +49,16 @@ export var FlexGrid = function FlexGrid(_ref) {
       _ref$wrap = _ref.wrap,
       wrap = _ref$wrap === void 0 ? false : _ref$wrap,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(inline && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex-grid-inline"]))), className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["flex-grid-inner"]))), inline ? stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["inline-flex"]))) : stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["flex"]))), wrap && stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution])
-  }, React.Children.map(children, function (child) {
-    return /*#__PURE__*/React.isValidElement(child) ? child : isRenderedChild(child) ? /*#__PURE__*/React.createElement("span", null, child) : child;
-  })));
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(inline && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex-grid-inline"]))), className),
+    children: /*#__PURE__*/_jsx("div", {
+      className: cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["flex-grid-inner"]))), inline ? stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["inline-flex"]))) : stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["flex"]))), wrap && stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution]),
+      children: Children.map(children, function (child) {
+        return /*#__PURE__*/isValidElement(child) ? child : isRenderedChild(child) ? /*#__PURE__*/_jsx("span", {
+          children: child
+        }) : child;
+      })
+    })
+  });
 };
 export default FlexGrid;

package/esm/FlexGrid/FlexGrid.tailwind.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@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) { _defineProperty(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) { _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; }
 
 // @ts-check
 

package/esm/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/esm/HelpUnderline/HelpUnderline.js

@@ -2,10 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import React from "react";
 import cx from "classnames";
 import stl from "../styles/helpers/satellitePrefixer";
 import { TooltipWrapper } from "../Tooltip";
+import { jsx as _jsx } from "react/jsx-runtime";
 export var HelpUnderline = function HelpUnderline(_ref) {
   var className = _ref.className,
       children = _ref.children,
@@ -13,13 +13,15 @@ export var HelpUnderline = function HelpUnderline(_ref) {
       tooltipContent = _ref.tooltipContent,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? "bottom" : _ref$placement;
-  return /*#__PURE__*/React.createElement(TooltipWrapper, {
+  return /*#__PURE__*/_jsx(TooltipWrapper, {
     wrapperClassName: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["leading-inherit"]))), className),
     tooltipClassName: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["max-w-64"]))), tooltipClassName),
     content: tooltipContent,
-    placement: placement
-  }, /*#__PURE__*/React.createElement("span", {
-    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["help-underline"])))
-  }, children));
+    placement: placement,
+    children: /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["help-underline"]))),
+      children: children
+    })
+  });
 };
 export default HelpUnderline;

package/esm/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;

package/esm/Input/Input.js

@@ -1,20 +1,26 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["className", "style", "startIcon", "endItem", "disabled", "readOnly", "clearable", "type", "variant"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 
-import React, { forwardRef, useEffect, useState } from "react";
-import { Search, ChevronUp, ChevronDown, Check, X } from "react-feather";
+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 "classnames";
+import { forwardRef, Fragment, useEffect, useState } from "react";
+import { Check, ChevronDown, ChevronUp, Search, X } from "react-feather";
+import { IconButton } from "../Button";
+import useFieldState from "../Field/useFieldState";
 import stl from "../styles/helpers/satellitePrefixer";
-import useForwardedRef from "../utils/useForwardedRef";
 import isNil from "../utils/isNil";
+import useForwardedRef from "../utils/useForwardedRef";
 import useTriggerInputChange from "../utils/useTriggerInputChange";
-import useFieldState from "../Field/useFieldState";
-import { IconButton } from "../Button";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var STATUS_CLASSNAMES = {
   "default": "",
   invalid: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["input-invalid"]))),
@@ -27,20 +33,20 @@ var VARIANT_CLASSNAMES = {
 };
 
 var SearchIcon = function SearchIcon(props) {
-  return /*#__PURE__*/React.createElement(Search, _extends({}, props, {
+  return /*#__PURE__*/_jsx(Search, _objectSpread(_objectSpread({}, props), {}, {
     role: "img",
     "aria-label": "Search Icon"
   }));
 };
 
 var InvalidIcon = function InvalidIcon() {
-  return /*#__PURE__*/React.createElement(X, {
+  return /*#__PURE__*/_jsx(X, {
     className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
   });
 };
 
 var ValidatedIcon = function ValidatedIcon() {
-  return /*#__PURE__*/React.createElement(Check, {
+  return /*#__PURE__*/_jsx(Check, {
     className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-700 p-px rounded-full"])))
   });
 };
@@ -98,113 +104,118 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
     }
   }, [inputProps.value, isControlled]);
   var Icon = startIcon ? startIcon : type === "search" ? SearchIcon : undefined;
-  var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : React.Fragment;
+  var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : Fragment;
   var clearable = typeof clearableProp === "boolean" ? clearableProp : type === "search";
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n            input no-search-input-decoration group\n            ", "\n            ", "\n          "])), focused && "input-focused", disabled && "input-disabled"), VARIANT_CLASSNAMES[variant], STATUS_CLASSNAMES[status], className),
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n            input group\n            ", "\n            ", "\n          "])), focused && "input-focused", disabled && "input-disabled"), VARIANT_CLASSNAMES[variant], STATUS_CLASSNAMES[status], className),
     style: style,
     onClick: function onClick() {
       var _inputRef$current;
 
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-    }
-  }, Icon && /*#__PURE__*/React.createElement(Icon, {
-    className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["ml-4 ", ""])), disabled ? "text-grey-200" : focused ? "text-accent-600" : "text-grey-500"),
-    size: variant === "small" ? "1rem" : "1.5rem"
-  }), /*#__PURE__*/React.createElement("input", _extends({
-    className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mx-4"]))),
-    ref: inputRefCallback,
-    type: type
-  }, inputProps, {
-    readOnly: readOnly,
-    disabled: disabled,
-    onChange: function onChange(evt) {
-      var _inputProps$onChange;
-
-      (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, evt);
-
-      if (!isControlled) {
-        setInternalValue(evt.target.value);
-      }
     },
-    onFocus: function onFocus(evt) {
-      var _inputProps$onFocus;
-
-      setFocused(true);
-      (_inputProps$onFocus = inputProps.onFocus) === null || _inputProps$onFocus === void 0 ? void 0 : _inputProps$onFocus.call(inputProps, evt);
-    },
-    onBlur: function onBlur(evt) {
-      var _inputProps$onBlur;
-
-      setFocused(false);
-      (_inputProps$onBlur = inputProps.onBlur) === null || _inputProps$onBlur === void 0 ? void 0 : _inputProps$onBlur.call(inputProps, evt);
-    }
-  })), clearable && !disabled && !readOnly && !isValueEmpty && /*#__PURE__*/React.createElement(IconButton, {
-    className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
-    title: "Clear input",
-    icon: X,
-    variant: "subtle",
-    size: "small",
-    tabIndex: -1,
-    "aria-hidden": true,
-    onClick: function onClick(evt) {
-      evt.preventDefault();
-      triggerInputChange("");
-    }
-  }), endItem && /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mr-4"])))
-  }, endItem), /*#__PURE__*/React.createElement(StatusIcon, null), type === "number" && !disabled && /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["input-spinner"])))
-  }, /*#__PURE__*/React.createElement("button", {
-    tabIndex: -1,
-    type: "button",
-    disabled: readOnly,
-    className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
-    "aria-label": "increment",
-    onClick: function onClick() {
-      var _inputRef$current$val, _inputRef$current2;
-
-      var step = inputProps.step ? parseFloat(String(inputProps.step)) : 1;
-      var max = isNil(inputProps.max) ? Number.MAX_SAFE_INTEGER : parseFloat(String(inputProps.max));
-      var currentValue = parseFloat((_inputRef$current$val = (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value) !== null && _inputRef$current$val !== void 0 ? _inputRef$current$val : "0");
-
-      if (Number.isNaN(currentValue)) {
-        currentValue = 0;
-      }
-
-      if (currentValue + step <= max) {
-        triggerInputChange(String(currentValue + step));
-      } else {
-        triggerInputChange(String(max));
-      }
-    }
-  }, /*#__PURE__*/React.createElement(ChevronUp, {
-    size: 12
-  })), /*#__PURE__*/React.createElement("button", {
-    tabIndex: -1,
-    type: "button",
-    disabled: readOnly,
-    className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
-    "aria-label": "decrement",
-    onClick: function onClick() {
-      var _inputRef$current$val2, _inputRef$current3;
-
-      var step = inputProps.step ? parseFloat(String(inputProps.step)) : 1;
-      var min = isNil(inputProps.min) ? Number.MIN_SAFE_INTEGER : parseFloat(String(inputProps.min));
-      var currentValue = parseFloat((_inputRef$current$val2 = (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value) !== null && _inputRef$current$val2 !== void 0 ? _inputRef$current$val2 : "0");
-
-      if (Number.isNaN(currentValue)) {
-        currentValue = 0;
+    children: [Icon && /*#__PURE__*/_jsx(Icon, {
+      className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["ml-4 ", ""])), disabled ? "text-grey-200" : focused ? "text-accent-600" : "text-grey-500"),
+      size: variant === "small" ? "1rem" : "1.5rem"
+    }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({
+      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mx-4 no-search-input-decoration"]))),
+      ref: inputRefCallback,
+      type: type
+    }, inputProps), {}, {
+      readOnly: readOnly,
+      disabled: disabled,
+      onChange: function onChange(evt) {
+        var _inputProps$onChange;
+
+        (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, evt);
+
+        if (!isControlled) {
+          setInternalValue(evt.target.value);
+        }
+      },
+      onFocus: function onFocus(evt) {
+        var _inputProps$onFocus;
+
+        setFocused(true);
+        (_inputProps$onFocus = inputProps.onFocus) === null || _inputProps$onFocus === void 0 ? void 0 : _inputProps$onFocus.call(inputProps, evt);
+      },
+      onBlur: function onBlur(evt) {
+        var _inputProps$onBlur;
+
+        setFocused(false);
+        (_inputProps$onBlur = inputProps.onBlur) === null || _inputProps$onBlur === void 0 ? void 0 : _inputProps$onBlur.call(inputProps, evt);
       }
-
-      if (currentValue - step >= min) {
-        triggerInputChange(String(currentValue - step));
-      } else {
-        triggerInputChange(String(min));
+    })), clearable && !disabled && !readOnly && !isValueEmpty && /*#__PURE__*/_jsx(IconButton, {
+      className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
+      title: "Clear input",
+      icon: X,
+      variant: "subtle",
+      size: "small",
+      tabIndex: -1,
+      "aria-hidden": true,
+      onClick: function onClick(evt) {
+        evt.preventDefault();
+        triggerInputChange("");
       }
-    }
-  }, /*#__PURE__*/React.createElement(ChevronDown, {
-    size: 12
-  }))));
+    }), endItem && /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mr-4"]))),
+      children: endItem
+    }), /*#__PURE__*/_jsx(StatusIcon, {}), type === "number" && !disabled && /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["input-spinner"]))),
+      children: [/*#__PURE__*/_jsx("button", {
+        tabIndex: -1,
+        type: "button",
+        disabled: readOnly,
+        className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
+        "aria-label": "increment",
+        onClick: function onClick() {
+          var _inputRef$current$val, _inputRef$current2;
+
+          var step = inputProps.step ? parseFloat(String(inputProps.step)) : 1;
+          var max = isNil(inputProps.max) ? Number.MAX_SAFE_INTEGER : parseFloat(String(inputProps.max));
+          var currentValue = parseFloat((_inputRef$current$val = (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value) !== null && _inputRef$current$val !== void 0 ? _inputRef$current$val : "0");
+
+          if (Number.isNaN(currentValue)) {
+            currentValue = 0;
+          }
+
+          if (currentValue + step <= max) {
+            triggerInputChange(String(currentValue + step));
+          } else {
+            triggerInputChange(String(max));
+          }
+        },
+        children: /*#__PURE__*/_jsx(ChevronUp, {
+          size: 12
+        })
+      }), /*#__PURE__*/_jsx("button", {
+        tabIndex: -1,
+        type: "button",
+        disabled: readOnly,
+        className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
+        "aria-label": "decrement",
+        onClick: function onClick() {
+          var _inputRef$current$val2, _inputRef$current3;
+
+          var step = inputProps.step ? parseFloat(String(inputProps.step)) : 1;
+          var min = isNil(inputProps.min) ? Number.MIN_SAFE_INTEGER : parseFloat(String(inputProps.min));
+          var currentValue = parseFloat((_inputRef$current$val2 = (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value) !== null && _inputRef$current$val2 !== void 0 ? _inputRef$current$val2 : "0");
+
+          if (Number.isNaN(currentValue)) {
+            currentValue = 0;
+          }
+
+          if (currentValue - step >= min) {
+            triggerInputChange(String(currentValue - step));
+          } else {
+            triggerInputChange(String(min));
+          }
+        },
+        children: /*#__PURE__*/_jsx(ChevronDown, {
+          size: 12
+        })
+      })]
+    })]
+  });
 });
 export default Input;

package/esm/Insert/Insert.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import type { FC, ReactNode } from "react";
 import { BadgeVariants } from "../Badge";
 declare type InsertContext = {
     label: string;
@@ -6,7 +6,7 @@ declare type InsertContext = {
 };
 export interface InsertProps {
     /** Descriptive title for the `Insert` */
-    title: React.ReactNode;
+    title: ReactNode;
     contexts?: Array<string | InsertContext>;
 }
 /**