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

package/cjs/FlexGrid/index.js

@@ -0,0 +1,32 @@
+"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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.HelpUnderline = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+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, _templateObject3;
+
+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__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
+    wrapperClassName: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["leading-inherit"]))), className),
+    tooltipClassName: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["max-w-64"]))), tooltipClassName),
+    content: tooltipContent,
+    placement: placement,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["help-underline"]))),
+      children: children
+    })
+  });
+};
+
+exports.HelpUnderline = HelpUnderline;
+var _default = HelpUnderline;
+exports["default"] = _default;

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

@@ -0,0 +1,22 @@
+"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,32 @@
+"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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/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/cjs/Input/Input.js

@@ -0,0 +1,256 @@
+"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 _useFieldState2 = _interopRequireDefault(require("../Field/useFieldState"));
+
+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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var 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-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
+ */
+
+
+var 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 _useFieldState = (0, _useFieldState2["default"])(),
+      status = _useFieldState.status;
+
+  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 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 ? 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"),
+      size: variant === "small" ? "1rem" : "1.5rem"
+    }), /*#__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
+    }, 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__*/(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("");
+      }
+    }), 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
+        })
+      })]
+    })]
+  });
+});
+exports.Input = Input;
+var _default = Input;
+exports["default"] = _default;

package/cjs/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;
+};

package/cjs/Input/Input.tailwind.js

@@ -0,0 +1,102 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+
+var disabledColor = require("../styles/disabledColor");
+
+var rgba = require("../styles/rgba");
+
+var inputPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+      theme = _ref.theme;
+  addComponents({
+    ".input": {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      cursor: "text",
+      fontSize: theme("fontSize.base"),
+      lineHeight: theme("lineHeight.base"),
+      backgroundColor: theme("colors.white"),
+      border: "1px solid ".concat(theme("colors.grey.200")),
+      borderRadius: theme("borderRadius.DEFAULT"),
+      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
+      overflow: "hidden",
+      transition: "all 100ms ease-in-out",
+      input: {
+        flex: "1",
+        minWidth: "0px",
+        caretColor: theme("colors.grey.600"),
+        color: theme("colors.grey.900"),
+        background: "transparent",
+        "&[type=number]": {
+          "-moz-appearance": "textfield"
+        },
+        "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
+          "-webkit-appearance": "none",
+          margin: "0px"
+        },
+        "&:focus": {
+          outline: "none"
+        },
+        "&::placeholder": {
+          color: theme("colors.grey.600")
+        }
+      }
+    },
+    ".input-focused, .input:focus-within": {
+      borderColor: theme("colors.accent.600"),
+      boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5"))
+    },
+    ".input-disabled": {
+      cursor: "not-allowed",
+      background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
+      borderColor: disabledColor(theme("colors.grey.200")),
+      boxShadow: "none",
+      "input, input::placeholder": {
+        color: theme("colors.grey.300"),
+        pointerEvents: "none"
+      }
+    },
+    ".input-small": {
+      height: "2rem"
+    },
+    ".input-medium": {
+      height: "2.5rem"
+    },
+    ".input-large": {
+      height: "3rem"
+    },
+    ".input-invalid:not(.input-disabled)": {
+      backgroundColor: theme("colors.red.100"),
+      borderColor: theme("colors.red.700")
+    }
+  });
+  addComponents({
+    ".input-spinner": {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      width: "24px",
+      minWidth: "20px"
+    },
+    ".input-spinner-button": {
+      background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)"),
+      borderColor: theme("colors.grey.200"),
+      borderStyle: "solid",
+      borderLeftWidth: "1px",
+      flex: "1",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "&:focus": {
+        outline: "none"
+      },
+      "&:not(:last-child)": {
+        borderBottomWidth: "1px"
+      }
+    }
+  });
+});
+module.exports = inputPlugin;

package/cjs/Input/index.js

@@ -0,0 +1,32 @@
+"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 _Input["default"];
+  }
+});
+
+var _Input = _interopRequireWildcard(require("./Input"));
+
+Object.keys(_Input).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Input[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Input[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/Insert/Insert.d.ts

@@ -0,0 +1,45 @@
+import type { FC, ReactNode } from "react";
+import { BadgeVariants } from "../Badge";
+declare type InsertContext = {
+    label: string;
+    variant?: BadgeVariants;
+};
+export interface InsertProps {
+    /** Descriptive title for the `Insert` */
+    title: ReactNode;
+    contexts?: Array<string | InsertContext>;
+    children: ReactNode;
+}
+/**
+* Put more emphasis on side content.
+
+* ## Examples
+* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279499)
+
+* ## Current Status
+* - [x] Figma
+* - [x] React
+* - [ ] Documentation
+
+* ## Component structure
+* The component is a simple and flexible container. It should include a Title and a short text. To give more context you can use optional badges and an optional link to forward users in the right direction.
+
+* ## Guidelines
+
+* ### How to use it?
+* Use the `Insert` if you want to give extra information to the user about the flow they are in or to highlight and define some terms used. This component can be use on the side of existing content or as a block.
+
+* ### How to NOT use it?
+* - Don't use this component to display temporary and/or critical information, use an Alert instead.
+
+* ### Variants
+* - Grey background
+
+* ### Do's and Don't
+* TODO
+
+* ## Accessibility
+* TODO
+ */
+export declare const Insert: FC<InsertProps>;
+export default Insert;