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

package/esm/FlexGrid/FlexGrid.tailwind.js

@@ -0,0 +1,69 @@
+import _defineProperty from "@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) { _defineProperty(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; }
+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,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/esm/HelpUnderline/HelpUnderline.js

@@ -0,0 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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) { _defineProperty(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; }
+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,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(TooltipWrapper, _objectSpread(_objectSpread({
+    tooltipClassName: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["max-w-64"]))), tooltipClassName),
+    content: tooltipContent
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx("span", {
+      className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["help-underline"]))), className),
+      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?: Partial<import("tailwindcss/types/config").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,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/esm/Input/Input.js

@@ -0,0 +1,209 @@
+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(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) { _defineProperty(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; }
+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 { useField } from "../Field";
+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-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
+ */
+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 _useField = useField(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
+  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 iconSize = variant === "small" ? "1rem" : "1.5rem";
+  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 || _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"),
+      width: iconSize,
+      height: iconSize
+    }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({
+      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["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__*/_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("");
+      }
+    }) : null, !!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
+        })
+      })]
+    })]
+  });
+});
+Input.displayName = "Input";
+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?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/esm/Input/Input.tailwind.js

@@ -0,0 +1,124 @@
+import _rgba from "../styles/rgba";
+import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var disabledColor = _disabledColor;
+var rgba = _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.500")),
+      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",
+      "&:not(.input-disabled, .input-focused):hover": {
+        borderColor: theme("colors.grey.600"),
+        ".input-spinner-button": {
+          borderColor: theme("colors.grey.600")
+        }
+      },
+      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-spinner-button": {
+        borderColor: theme("colors.accent.600")
+      }
+    },
+    ".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"),
+      ".input-spinner-button": {
+        background: theme("colors.red.100"),
+        borderColor: theme("colors.red.700")
+      },
+      "&:hover": {
+        borderColor: theme("colors.red.800"),
+        ".input-spinner-button": {
+          borderColor: theme("colors.red.800")
+        }
+      }
+    }
+  });
+  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.500"),
+      borderStyle: "solid",
+      borderLeftWidth: "1px",
+      flex: "1",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "&:focus": {
+        outline: "none"
+      },
+      "&:not(:last-child)": {
+        borderBottomWidth: "1px"
+      },
+      // This is to counterbalance the width of the first button's bottom border
+      // so that the two buttons have the same height.
+      "&:last-child": {
+        paddingTop: "1px"
+      }
+    }
+  });
+});
+export default inputPlugin;

package/esm/Input/index.d.ts

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

package/esm/Input/index.js

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

package/esm/Insert/Insert.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode, VFC } from "react";
+import type { 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: VFC<InsertProps>;
+export default Insert;

package/esm/Insert/Insert.js

@@ -0,0 +1,71 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import Badge from "../Badge";
+import stl from "../styles/helpers/satellitePrefixer";
+import onlyText from "../utils/onlyText";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* 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 var Insert = function Insert(_ref) {
+  var title = _ref.title,
+    contexts = _ref.contexts,
+    children = _ref.children;
+  return /*#__PURE__*/_jsxs("aside", {
+    "aria-label": onlyText(title),
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-flex flex-col self-start p-4 bg-grey-100 rounded"]))),
+    children: [contexts ? /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["block space-x-2 mb-4"]))),
+      children: contexts.map(function (context, idx) {
+        var _ref2 = typeof context === "string" ? {
+            label: context
+          } : context,
+          label = _ref2.label,
+          _ref2$variant = _ref2.variant,
+          variant = _ref2$variant === void 0 ? "grey" : _ref2$variant;
+        return /*#__PURE__*/_jsx(Badge, {
+          variant: variant,
+          children: label
+        }, idx);
+      })
+    }) : null, /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("p", {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-heading mb-2"]))),
+        children: title
+      }), /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display-body typo-subdued"]))),
+        children: children
+      })]
+    })]
+  });
+};
+export default Insert;

package/esm/Insert/index.d.ts

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

package/esm/Insert/index.js

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