@algolia/satellite 1.0.0-beta.14 → 1.0.0-beta.141

package/esm/Flag/Flags.js

@@ -0,0 +1,87 @@
+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;
+
+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 { CSSTransition, TransitionGroup } from "react-transition-group";
+import { useCreatePortal } from "../Satellite";
+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.
+ * For critical messaging about loss of data or functionality, please use banners.
+ *
+ * ## Structure
+ *
+ * - **Icon (or avatar) and title**: flag messages should always contain a concise title and an appropriate icon
+ * - **Message (optional)**: If the text overflows, truncate using an ellipsis
+ * - **Actions (optional)**: two links max that enable users to act on the flag's content
+ * - **Dismiss**: use to close the flag
+ *
+ * ## Variations
+ *
+ * ### Warning
+ *
+ * Warning messages appear before we request the user to take action. This is usually in anticipation of a significant change. Have empathy for the user. Inform, but don't alarm. If the warning comes before an action, clearly communicate what will happen if the they proceed, and provide an alternative where possible.
+ *
+ * ### Error
+ *
+ * Error messages let the user know that something has gone wrong after they've tried to do something. Explain the problem and provide the user with a next step or an alternative. Keep the message simple and direct, avoid blame and accept if something is our fault.
+ *
+ * ### Success
+ *
+ * Success messages let the user know that they have completed an action. For these messages, it's best to reaffirm the outcome and get out of the user's way. If they have just created something, give them an option to view it.
+ *
+ * ### Info / Loading
+ *
+ * Info messages alert the user to additional information without requiring an action. Inform the user about something that might help or impact them.
+ *
+ * ## Interaction
+ *
+ * Flags can be dismissed by selecting the 'x' or will fade away after X seconds. The user can pause the auto-dismiss by hovering over the flag.
+ *
+ * ## Multiple flags
+ *
+ * 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 var Flags = function Flags(_ref) {
+  var _ref$notifications = _ref.notifications,
+      notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
+  var createPortal = useCreatePortal();
+  return 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",
+    children: notifications.map(function (_ref2) {
+      var content = _ref2.content,
+          id = _ref2.id,
+          rest = _objectWithoutProperties(_ref2, _excluded);
+
+      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);
+    })
+  }));
+};
+export default Flags;

package/esm/Flag/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Flag";
+export * from "./Flags";
+export * from "./types";
+export { default } from "./Flag";

package/esm/Flag/index.js

@@ -0,0 +1,4 @@
+export * from "./Flag";
+export * from "./Flags";
+export * from "./types";
+export { default } from "./Flag";

package/esm/Flag/types.d.ts

@@ -0,0 +1,22 @@
+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: ReactNode;
+    /** Icon to accompany the notification */
+    icon?: IconComponentType;
+    /**  @default false */
+    loading?: boolean;
+    /**  @default blue */
+    variant?: ColorVariant;
+    onDismiss?: () => void;
+    autoDismissAfter?: number;
+    locale?: {
+        dismissText?: string;
+    };
+    children?: ReactNode;
+}

package/esm/Flag/types.js

@@ -0,0 +1 @@
+export {};

package/esm/FlexGrid/FlexGrid.d.ts

@@ -0,0 +1,17 @@
+import type { FunctionComponent, ReactNode } 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";
+export declare type FlexGridSpacing = "none" | "sm" | "md" | "lg" | "xl";
+export interface FlexGridProps {
+    className?: string;
+    direction?: FlexGridDirection;
+    wrap?: boolean;
+    inline?: boolean;
+    alignment?: FlexGridAlignment;
+    distribution?: FlexGridDistribution;
+    spacing?: FlexGridSpacing;
+    children: ReactNode;
+}
+export declare const FlexGrid: FunctionComponent<FlexGridProps>;
+export default FlexGrid;

package/esm/FlexGrid/FlexGrid.js

@@ -0,0 +1,64 @@
+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 cx from "clsx";
+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"]))),
+  md: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-grid-md"]))),
+  lg: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex-grid-lg"]))),
+  xl: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex-grid-xl"])))
+};
+var DIRECTION_CLASSNAMES = {
+  row: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex-row"]))),
+  column: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex-col"])))
+};
+var ALIGNMENT_CLASSNAMES = {
+  leading: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["items-start"]))),
+  center: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["items-center"]))),
+  trailing: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["items-end"]))),
+  fill: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["items-stretch"]))),
+  baseline: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["items-baseline"])))
+};
+var DISTRIBUTION_CLASSNAMES = {
+  leading: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["justify-start"]))),
+  trailing: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["justify-end"]))),
+  center: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["justify-center"]))),
+  equalSpacing: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["justify-between"]))),
+  fill: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-grid-d-fill"]))),
+  fillEvenly: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-grid-d-fill-even"])))
+};
+export var FlexGrid = function FlexGrid(_ref) {
+  var className = _ref.className,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? "row" : _ref$direction,
+      _ref$alignment = _ref.alignment,
+      alignment = _ref$alignment === void 0 ? "leading" : _ref$alignment,
+      _ref$distribution = _ref.distribution,
+      distribution = _ref$distribution === void 0 ? "leading" : _ref$distribution,
+      _ref$spacing = _ref.spacing,
+      spacing = _ref$spacing === void 0 ? "none" : _ref$spacing,
+      _ref$inline = _ref.inline,
+      inline = _ref$inline === void 0 ? false : _ref$inline,
+      _ref$wrap = _ref.wrap,
+      wrap = _ref$wrap === void 0 ? false : _ref$wrap,
+      children = _ref.children;
+  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.d.ts

@@ -0,0 +1,8 @@
+export = flexGridPlugin;
+/**
+ * Taking some heavy pointers from Polaris https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.scss#L1 🙇🏻‍♂️
+ **/
+declare const flexGridPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/esm/FlexGrid/FlexGrid.tailwind.js

@@ -0,0 +1,74 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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 _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+/**
+ * @param {string} value
+ */
+
+var negate = function negate(value) {
+  return "-".concat(value);
+};
+/**
+ * Generate the base styles for this iteration of grid spacing
+ * @param {string} spacing
+ * @returns {object}
+ */
+
+
+var generateSpacing = function generateSpacing(spacing) {
+  return {
+    marginLeft: negate(spacing),
+    marginTop: negate(spacing),
+    "> *": {
+      marginLeft: spacing,
+      marginTop: spacing
+    }
+  };
+};
+/**
+ * Taking some heavy pointers from Polaris https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.scss#L1 🙇🏻‍♂️
+ **/
+
+
+var flexGridPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+      theme = _ref.theme;
+  addComponents({
+    ".flex-grid-inline": {
+      display: "inline-block"
+    },
+    ".flex-grid-inner": {
+      "> *": {
+        flex: "0 0 auto",
+        minWidth: "0px",
+        maxWidth: "100%"
+      }
+    },
+    // Distribution
+    ".flex-grid-d-fill": {
+      "> *": {
+        flex: "1 1 auto"
+      }
+    },
+    ".flex-grid-d-fill-even": {
+      "> *": {
+        flex: "1 1 0%"
+      },
+      "@supports (min-width: fit-content)": {
+        minWidth: "fit-content"
+      }
+    },
+    // Spacing classes
+    ".flex-grid-sm": _objectSpread({}, generateSpacing(theme("spacing.2"))),
+    ".flex-grid-md": _objectSpread({}, generateSpacing(theme("spacing.4"))),
+    ".flex-grid-lg": _objectSpread({}, generateSpacing(theme("spacing.6"))),
+    ".flex-grid-xl": _objectSpread({}, generateSpacing(theme("spacing.8")))
+  });
+});
+export default flexGridPlugin;

package/esm/FlexGrid/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FlexGrid";
+export { default } from "./FlexGrid";

package/esm/FlexGrid/index.js

@@ -0,0 +1,2 @@
+export * from "./FlexGrid";
+export { default } from "./FlexGrid";

package/esm/HelpUnderline/HelpUnderline.d.ts

@@ -0,0 +1,12 @@
+import type { FunctionComponent } from "react";
+import { TooltipWrapperProps } from "../Tooltip";
+export interface HelpUnderlineProps {
+    /** @ignore */
+    className?: string;
+    placement?: TooltipWrapperProps["placement"];
+    tooltipClassName?: TooltipWrapperProps["tooltipClassName"];
+    tooltipContent: TooltipWrapperProps["content"];
+    children: string;
+}
+export declare const HelpUnderline: FunctionComponent<HelpUnderlineProps>;
+export default HelpUnderline;

package/esm/HelpUnderline/HelpUnderline.js

@@ -0,0 +1,27 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import cx from "clsx";
+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,
+      tooltipClassName = _ref.tooltipClassName,
+      tooltipContent = _ref.tooltipContent,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? "bottom" : _ref$placement;
+  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,
+    children: /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["help-underline"]))),
+      children: children
+    })
+  });
+};
+export default HelpUnderline;

package/esm/HelpUnderline/HelpUnderline.tailwind.d.ts

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

package/esm/HelpUnderline/HelpUnderline.tailwind.js

@@ -0,0 +1,20 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var helpUnderlinePlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+      theme = _ref.theme;
+  addComponents({
+    ".help-underline": {
+      backgroundImage: "linear-gradient(to right, ".concat(theme("colors.grey.400"), " 66%, transparent 0)"),
+      backgroundRepeat: "repeat-x",
+      backgroundSize: "5px 1px",
+      backgroundPosition: "0 1.04em",
+      cursor: "help",
+      "&:focus, &:hover": {
+        backgroundImage: "linear-gradient(90deg, ".concat(theme("colors.grey.500"), " 66%, transparent 0)")
+      }
+    }
+  });
+});
+export default helpUnderlinePlugin;

package/esm/HelpUnderline/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./HelpUnderline";
+export { default } from "./HelpUnderline";

package/esm/HelpUnderline/index.js

@@ -0,0 +1,2 @@
+export * from "./HelpUnderline";
+export { default } from "./HelpUnderline";

package/esm/Input/Input.d.ts

@@ -0,0 +1,26 @@
+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 declare type InputPropsLocale = {
+    clearInput?: string;
+    increment?: string;
+    decrement?: string;
+};
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "checked" | "defaultChecked"> {
+    type?: "text" | "number" | "search" | "email" | "password";
+    variant?: InputVariant;
+    startIcon?: IconComponentType;
+    endItem?: ReactNode;
+    clearable?: boolean;
+    locale?: InputPropsLocale;
+}
+/**
+ * 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
+ *
+ * ## Variations
+ * #### 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: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Input;

package/esm/Input/Input.js

@@ -0,0 +1,232 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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", "locale"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import cx from "clsx";
+import { 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 { useLocale } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import isNil from "../utils/isNil";
+import useForwardedRef from "../utils/useForwardedRef";
+import useTriggerInputChange from "../utils/useTriggerInputChange";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_INPUT_LOCALE = {
+  clearInput: "Clear input",
+  increment: "Increment",
+  decrement: "Decrement"
+};
+var STATUS_CLASSNAMES = {
+  "default": "",
+  invalid: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["input-invalid"]))),
+  validated: ""
+};
+var VARIANT_CLASSNAMES = {
+  small: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["input-small"]))),
+  medium: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["input-medium"]))),
+  large: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["input-large"])))
+};
+
+var SearchIcon = function SearchIcon(props) {
+  return /*#__PURE__*/_jsx(Search, _objectSpread(_objectSpread({}, props), {}, {
+    role: "img",
+    "aria-label": "Search Icon"
+  }));
+};
+
+var InvalidIcon = function InvalidIcon() {
+  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__*/_jsx(Check, {
+    className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-700 p-px rounded-full"])))
+  });
+};
+/**
+ * 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
+ *
+ * ## Variations
+ * #### 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 var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
+  var className = _ref.className,
+      style = _ref.style,
+      startIcon = _ref.startIcon,
+      endItem = _ref.endItem,
+      disabled = _ref.disabled,
+      readOnly = _ref.readOnly,
+      clearableProp = _ref.clearable,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? "text" : _ref$type,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "medium" : _ref$variant,
+      propsLocale = _ref.locale,
+      inputProps = _objectWithoutProperties(_ref, _excluded);
+
+  var contextLocale = useLocale("input");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_INPUT_LOCALE), contextLocale), propsLocale);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      focused = _useState2[0],
+      setFocused = _useState2[1];
+
+  var _useForwardedRef = useForwardedRef(externalRef),
+      _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
+      inputRefCallback = _useForwardedRef2[0],
+      inputRef = _useForwardedRef2[1];
+
+  var triggerInputChange = useTriggerInputChange(inputRef);
+
+  var _useFieldState = useFieldState(),
+      status = _useFieldState.status;
+
+  var isControlled = ("value" in inputProps);
+
+  var _useState3 = useState(function () {
+    return isControlled ? inputProps.value : inputProps.defaultValue;
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      internalValue = _useState4[0],
+      setInternalValue = _useState4[1];
+
+  var isValueEmpty = typeof internalValue !== "number" && !(internalValue !== null && internalValue !== void 0 && internalValue.length);
+  useEffect(function () {
+    if (isControlled) {
+      setInternalValue(inputProps.value);
+    }
+  }, [inputProps.value, isControlled]);
+  var Icon = startIcon ? startIcon : type === "search" ? SearchIcon : undefined;
+  var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : Fragment;
+  var clearable = typeof clearableProp === "boolean" ? clearableProp : type === "search";
+  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();
+    },
+    children: [Icon && /*#__PURE__*/_jsx(Icon, {
+      className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["ml-4 shrink-0 ", ""])), 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);
+      }
+    })), clearable && !disabled && !readOnly && !isValueEmpty && /*#__PURE__*/_jsx(IconButton, {
+      className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
+      title: locale.clearInput,
+      icon: X,
+      variant: "subtle",
+      size: "small",
+      tabIndex: -1,
+      "aria-hidden": true,
+      onClick: function onClick(evt) {
+        evt.preventDefault();
+        triggerInputChange("");
+      }
+    }), 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": locale.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": locale.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/Input/Input.tailwind.d.ts

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