@algolia/satellite 1.0.0-beta.17 → 1.0.0-beta.170

package/cjs/FlexGrid/FlexGrid.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode, VFC } 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 {
+    /** @ignore */
+    className?: string;
+    /** Define which direction the content should flow */
+    direction?: FlexGridDirection;
+    /**
+     * Define whether or not the contents be allowed to wrap
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Define whether or not the content be wrapped in an inline-flex container
+     * @default false
+     */
+    inline?: boolean;
+    alignment?: FlexGridAlignment;
+    distribution?: FlexGridDistribution;
+    /**
+     * The spacing directly corelates to our Tailwind spacing scale
+     *
+     * none: `spacing.0 → 0px`
+     *
+     * sm: `spacing.2 → 8px`
+     *
+     * md: `spacing.4 → 16px`
+     *
+     * lg: `spacing.6 → 24px`
+     *
+     * xl: `spacing.8 → 32px`
+     */
+    spacing?: FlexGridSpacing;
+    children: ReactNode;
+}
+export declare const FlexGrid: VFC<FlexGridProps>;
+export default FlexGrid;

package/cjs/FlexGrid/FlexGrid.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FlexGrid = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _isRenderedChild = _interopRequireDefault(require("../utils/isRenderedChild"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22; // Heavily inspired by https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.tsx#L1
+var SPACING_CLASSNAMES = {
+  none: "",
+  sm: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex-grid-sm"]))),
+  md: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-md"]))),
+  lg: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-lg"]))),
+  xl: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-xl"])))
+};
+var DIRECTION_CLASSNAMES = {
+  row: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex-row"]))),
+  column: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex-col"])))
+};
+var ALIGNMENT_CLASSNAMES = {
+  leading: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["items-start"]))),
+  center: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["items-center"]))),
+  trailing: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["items-end"]))),
+  fill: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["items-stretch"]))),
+  baseline: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["items-baseline"])))
+};
+var DISTRIBUTION_CLASSNAMES = {
+  leading: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["justify-start"]))),
+  trailing: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["justify-end"]))),
+  center: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["justify-center"]))),
+  equalSpacing: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["justify-between"]))),
+  fill: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-d-fill"]))),
+  fillEvenly: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-d-fill-even"])))
+};
+var FlexGrid = exports.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__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _clsx["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inline"]))), className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inner"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["inline-flex"]))) : (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["flex"]))), wrap && (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution]),
+      children: _react.Children.map(children, function (child) {
+        return /*#__PURE__*/(0, _react.isValidElement)(child) ? child : (0, _isRenderedChild["default"])(child) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: child
+        }) : child;
+      })
+    })
+  });
+};
+var _default = exports["default"] = FlexGrid;

package/cjs/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?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/cjs/FlexGrid/FlexGrid.tailwind.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// @ts-check
+var plugin = require("tailwindcss/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")))
+  });
+});
+module.exports = flexGridPlugin;

package/cjs/FlexGrid/index.d.ts

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

package/cjs/FlexGrid/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _FlexGrid["default"];
+  }
+});
+var _FlexGrid = _interopRequireWildcard(require("./FlexGrid"));
+Object.keys(_FlexGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _FlexGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _FlexGrid[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/cjs/HelpUnderline/HelpUnderline.d.ts

@@ -0,0 +1,11 @@
+import type { VFC } from "react";
+import type { TooltipWrapperProps } from "../Tooltip";
+import type { TooltipWrapperBaseProps } from "../Tooltip/types";
+export declare type HelpUnderlineProps = {
+    /** @ignore */
+    className?: string;
+    tooltipContent: TooltipWrapperProps["content"];
+    children: string;
+} & Omit<TooltipWrapperBaseProps, "children">;
+export declare const HelpUnderline: VFC<HelpUnderlineProps>;
+export default HelpUnderline;

package/cjs/HelpUnderline/HelpUnderline.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.HelpUnderline = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _Tooltip = require("../Tooltip");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+var _excluded = ["className", "children", "tooltipClassName", "tooltipContent"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var HelpUnderline = exports.HelpUnderline = function HelpUnderline(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    tooltipClassName = _ref.tooltipClassName,
+    tooltipContent = _ref.tooltipContent,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, _objectSpread(_objectSpread({
+    tooltipClassName: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["max-w-64"]))), tooltipClassName),
+    content: tooltipContent
+  }, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["help-underline"]))), className),
+      children: children
+    })
+  }));
+};
+var _default = exports["default"] = HelpUnderline;

package/cjs/HelpUnderline/HelpUnderline.tailwind.d.ts

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

package/cjs/HelpUnderline/HelpUnderline.tailwind.js

@@ -0,0 +1,21 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/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)")
+      }
+    }
+  });
+});
+module.exports = helpUnderlinePlugin;

package/cjs/HelpUnderline/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HelpUnderline["default"];
+  }
+});
+var _HelpUnderline = _interopRequireWildcard(require("./HelpUnderline"));
+Object.keys(_HelpUnderline).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _HelpUnderline[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _HelpUnderline[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/cjs/Input/Input.d.ts

@@ -0,0 +1,30 @@
+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;
+    /**
+     * Define whether or not a "clear input" x button should show on hover
+     * @default false
+     */
+    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/cjs/Input/Input.js

@@ -0,0 +1,215 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Input = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _reactFeather = require("react-feather");
+var _Button = require("../Button");
+var _Field = require("../Field");
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _isNil = _interopRequireDefault(require("../utils/isNil"));
+var _useForwardedRef3 = _interopRequireDefault(require("../utils/useForwardedRef"));
+var _useTriggerInputChange = _interopRequireDefault(require("../utils/useTriggerInputChange"));
+var _jsxRuntime = require("react/jsx-runtime");
+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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_INPUT_LOCALE = {
+  clearInput: "Clear input",
+  increment: "Increment",
+  decrement: "Decrement"
+};
+var STATUS_CLASSNAMES = {
+  "default": "",
+  invalid: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["input-invalid"]))),
+  validated: ""
+};
+var VARIANT_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["input-small"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["input-medium"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["input-large"])))
+};
+var SearchIcon = function SearchIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.Search, _objectSpread(_objectSpread({}, props), {}, {
+    role: "img",
+    "aria-label": "Search Icon"
+  }));
+};
+var InvalidIcon = function InvalidIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
+    className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+  });
+};
+var ValidatedIcon = function ValidatedIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.Check, {
+    className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-accent-600 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
+ */
+var Input = exports.Input = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var contextLocale = (0, _Satellite.useLocale)("input");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_INPUT_LOCALE), contextLocale), propsLocale);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    focused = _useState2[0],
+    setFocused = _useState2[1];
+  var _useForwardedRef = (0, _useForwardedRef3["default"])(externalRef),
+    _useForwardedRef2 = (0, _slicedToArray2["default"])(_useForwardedRef, 2),
+    inputRefCallback = _useForwardedRef2[0],
+    inputRef = _useForwardedRef2[1];
+  var triggerInputChange = (0, _useTriggerInputChange["default"])(inputRef);
+  var _useField = (0, _Field.useField)(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
+  var isControlled = ("value" in inputProps);
+  var _useState3 = (0, _react.useState)(function () {
+      return isControlled ? inputProps.value : inputProps.defaultValue;
+    }),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    internalValue = _useState4[0],
+    setInternalValue = _useState4[1];
+  var isValueEmpty = typeof internalValue !== "number" && !(internalValue !== null && internalValue !== void 0 && internalValue.length);
+  (0, _react.useEffect)(function () {
+    if (isControlled) {
+      setInternalValue(inputProps.value);
+    }
+  }, [inputProps.value, isControlled]);
+  var Icon = startIcon ? startIcon : type === "search" ? SearchIcon : undefined;
+  var iconSize = variant === "small" ? "1rem" : "1.5rem";
+  var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
+  var clearable = typeof clearableProp === "boolean" ? clearableProp : type === "search";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\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 || _inputRef$current.focus();
+    },
+    children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+      className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["ml-4 shrink-0 ", ""])), disabled ? "text-grey-200" : focused ? "text-accent-600" : "text-grey-500"),
+      width: iconSize,
+      height: iconSize
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mx-4 no-search-input-decoration"]))),
+      ref: inputRefCallback,
+      type: type,
+      "aria-labelledby": labelId
+    }, inputProps), {}, {
+      readOnly: readOnly,
+      disabled: disabled,
+      onChange: function onChange(evt) {
+        var _inputProps$onChange;
+        (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === 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 || _inputProps$onFocus.call(inputProps, evt);
+      },
+      onBlur: function onBlur(evt) {
+        var _inputProps$onBlur;
+        setFocused(false);
+        (_inputProps$onBlur = inputProps.onBlur) === null || _inputProps$onBlur === void 0 || _inputProps$onBlur.call(inputProps, evt);
+      }
+    })), clearable && !disabled && !readOnly && !isValueEmpty ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+      className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
+      title: locale.clearInput,
+      icon: _reactFeather.X,
+      variant: "subtle",
+      size: "small",
+      tabIndex: -1,
+      "aria-hidden": true,
+      onClick: function onClick(evt) {
+        evt.preventDefault();
+        triggerInputChange("");
+      }
+    }) : null, !!endItem && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["mr-4"]))),
+      children: endItem
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {}), type === "number" && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["input-spinner"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        tabIndex: -1,
+        type: "button",
+        disabled: readOnly,
+        className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["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 = (0, _isNil["default"])(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__*/(0, _jsxRuntime.jsx)(_reactFeather.ChevronUp, {
+          size: 12
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        tabIndex: -1,
+        type: "button",
+        disabled: readOnly,
+        className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["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 = (0, _isNil["default"])(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__*/(0, _jsxRuntime.jsx)(_reactFeather.ChevronDown, {
+          size: 12
+        })
+      })]
+    })]
+  });
+});
+Input.displayName = "Input";
+var _default = exports["default"] = Input;

package/cjs/Input/Input.tailwind.d.ts

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