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

package/esm/Field/Field.js

@@ -2,11 +2,12 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
-import React from "react";
 import cx from "classnames";
 import { AlertCircle } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";
 import FieldStateContext, { DEFAULT_STATE } from "./FieldStateContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
 /**
  * Use text fields to help users enter, select, and search for text. Text fields are normally found within a form but can also be part of a modal, search, or card
@@ -52,29 +53,36 @@ export var Field = function Field(_ref) {
       _ref$inline = _ref.inline,
       inline = _ref$inline === void 0 ? false : _ref$inline,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement(FieldStateContext.Provider, {
-    value: state
-  }, /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement("label", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["cursor-pointer flex ", ""])), !inline && "flex-col"),
-    htmlFor: labelFor
-  }, label && /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1")
-  }, label), /*#__PURE__*/React.createElement("div", {
-    className: cx(inline && stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-auto mt-1"]))))
-  }, children)), state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/React.createElement("ul", {
-    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["mb-1 mt-2 display-caption"])))
-  }, state.errors.map(function (error) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: error,
-      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex items-center"])))
-    }, /*#__PURE__*/React.createElement(AlertCircle, {
-      className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-red-700 mr-1"]))),
-      size: "1rem"
-    }), error);
-  })) : description ? /*#__PURE__*/React.createElement("p", {
-    className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["display-caption text-grey-600"]))), inline ? stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["mt-1"]))) : stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mt-2"]))))
-  }, description) : null));
+  return /*#__PURE__*/_jsx(FieldStateContext.Provider, {
+    value: state,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: className,
+      children: [/*#__PURE__*/_jsxs("label", {
+        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["cursor-pointer flex ", ""])), !inline && "flex-col"),
+        htmlFor: labelFor,
+        children: [label && /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
+          children: label
+        }), /*#__PURE__*/_jsx("div", {
+          className: cx(inline && stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-auto mt-1"])))),
+          children: children
+        })]
+      }), state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/_jsx("ul", {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["mb-1 mt-2 display-caption"]))),
+        children: state.errors.map(function (error) {
+          return /*#__PURE__*/_jsxs("li", {
+            className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex items-center"]))),
+            children: [/*#__PURE__*/_jsx(AlertCircle, {
+              className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-red-700 mr-1"]))),
+              size: "1rem"
+            }), error]
+          }, error);
+        })
+      }) : description ? /*#__PURE__*/_jsx("p", {
+        className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["display-caption text-grey-600"]))), inline ? stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["mt-1"]))) : stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mt-2"])))),
+        children: description
+      }) : null]
+    })
+  });
 };
 export default Field;

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