@algolia/satellite 1.0.0-v3.99 → 1.0.0

package/dist/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/dist/esm/Input/index.d.ts

@@ -0,0 +1 @@
+export * from "./Input";

package/dist/esm/Input/index.js

@@ -0,0 +1 @@
+export * from "./Input";

package/dist/esm/Insert/Insert.d.ts

@@ -0,0 +1,19 @@
+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;
+}
+/**
+ * The `Insert` component is used to give extra information to the user about the flow they are in or to highlight and define some terms used.
+ *
+ * See the [Insert documentation page](https://satellite.algolia.com/layouts/insert) for more information.
+ */
+export declare const Insert: VFC<InsertProps>;
+export {};

package/dist/esm/Insert/Insert.js

@@ -0,0 +1,44 @@
+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";
+/**
+ * The `Insert` component is used to give extra information to the user about the flow they are in or to highlight and define some terms used.
+ *
+ * See the [Insert documentation page](https://satellite.algolia.com/layouts/insert) for more information.
+ */
+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
+      })]
+    })]
+  });
+};

package/dist/esm/Insert/index.d.ts

@@ -0,0 +1 @@
+export * from "./Insert";

package/dist/esm/Insert/index.js

@@ -0,0 +1 @@
+export * from "./Insert";

package/dist/esm/InstantSearch/InstantSearch.tailwind.d.ts

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

package/dist/esm/InstantSearch/InstantSearch.tailwind.js

@@ -0,0 +1,377 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _rgba from "../styles/rgba";
+import _require2 from "../styles/helpers/icons";
+import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var disabledColor = _disabledColor;
+var _require = _require2,
+  toBG = _require.toBG,
+  selectIconBG = _require.selectIconBG;
+var rgba = _rgba;
+export default plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    prefix = _ref.prefix,
+    theme = _ref.theme;
+  addComponents(_defineProperty({}, prefix(".instantsearch"), {
+    // SearchBox widget
+    // ----------------------------------------
+    ".ais-SearchBox-form": {
+      position: "relative",
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "stretch",
+      width: "100%",
+      height: "2.5rem",
+      cursor: "text",
+      fontSize: theme("fontSize.base"),
+      lineHeight: theme("lineHeight.base"),
+      backgroundColor: theme("colors.white"),
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        left: theme("spacing.4"),
+        top: "50%",
+        marginTop: "-".concat(theme("spacing.2")),
+        width: theme("spacing.4"),
+        height: theme("spacing.4"),
+        background: toBG("Search", {
+          color: theme("colors.grey.600"),
+          size: 16
+        })
+      }
+    },
+    ".ais-SearchBox-input": {
+      appearance: "none",
+      flex: "1",
+      minWidth: "0px",
+      paddingLeft: theme("spacing.10"),
+      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)),
+      caretColor: theme("colors.grey.600"),
+      color: theme("colors.grey.900"),
+      transition: "all 100ms ease-in-out",
+      "&::placeholder": {
+        color: theme("colors.grey.600")
+      },
+      "&:focus": {
+        outline: "none",
+        borderColor: theme("colors.accent.600"),
+        boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5"))
+      },
+      "&:disabled": {
+        background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
+        borderColor: disabledColor(theme("colors.grey.200")),
+        boxShadow: "none",
+        cursor: "not-allowed",
+        "&::placeholder": {
+          color: theme("colors.grey.300"),
+          pointerEvents: "none"
+        }
+      },
+      "&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration": {
+        appearance: "none"
+      }
+    },
+    ".ais-SearchBox-submit, .ais-SearchBox-reset, .ais-SearchBox-loadingIndicator": {
+      display: "none"
+    },
+    // RefinementList, Menu, HierarchicalMenu widgets
+    // ----------------------------------------
+    ".ais-RefinementList-searchBox, .ais-Menu-searchBox": {
+      marginBottom: theme("spacing.2"),
+      "& .ais-SearchBox-form": {
+        height: "2rem"
+      },
+      "& .ais-SearchBox-form:before": {
+        left: theme("spacing.2")
+      },
+      "& .ais-SearchBox-input": {
+        paddingLeft: theme("spacing.8")
+      }
+    },
+    ".ais-HierarchicalMenu-list--child": {
+      paddingLeft: theme("spacing.4")
+    },
+    ".ais-RefinementList-item, .ais-Menu-item, .ais-HierarchicalMenu-item": {
+      lineHeight: theme("lineHeight.lg"),
+      fontSize: theme("fontSize.base")
+    },
+    ".ais-RefinementList-label, .ais-Menu-link, .ais-HierarchicalMenu-link": {
+      display: "flex",
+      flexWrap: "nowrap",
+      alignItems: "center",
+      cursor: "pointer"
+    },
+    ".ais-RefinementList-labelText, .ais-Menu-label, .ais-HierarchicalMenu-label": {
+      paddingRight: theme("spacing.3/2"),
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    ".ais-Menu-item--selected .ais-Menu-label, .ais-HierarchicalMenu-item--selected > .ais-HierarchicalMenu-link > .ais-HierarchicalMenu-label": {
+      fontWeight: "600"
+    },
+    ".ais-RefinementList-checkbox": {
+      opacity: "0",
+      position: "absolute"
+    },
+    ".ais-RefinementList-labelText, .ais-HierarchicalMenu-label": {
+      position: "relative",
+      left: "-1px",
+      marginRight: "-1px",
+      paddingLeft: theme("spacing.6"),
+      "&:before": {
+        content: "''",
+        overflow: "hidden",
+        position: "absolute",
+        left: "1px",
+        top: "50%",
+        marginTop: "-".concat(theme("spacing.2")),
+        width: theme("spacing.4"),
+        height: theme("spacing.4"),
+        userSelect: "none"
+      }
+    },
+    ".ais-RefinementList-labelText:before": {
+      color: theme("colors.accent.600"),
+      backgroundColor: theme("colors.white"),
+      backgroundPosition: "center",
+      backgroundSize: "180%",
+      border: "1px solid ".concat(theme("colors.grey.200")),
+      boxShadow: "inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.4)),
+      borderRadius: theme("borderRadius.DEFAULT"),
+      transition: "all 250ms cubic-bezier(0.23, 1, 0.32, 1)"
+    },
+    ".ais-RefinementList-item:focus-within .ais-RefinementList-labelText:before": {
+      borderColor: "currentColor"
+    },
+    ".ais-RefinementList-item--selected .ais-RefinementList-labelText:before": {
+      opacity: "1",
+      borderColor: "currentColor",
+      boxShadow: "inset 0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
+      backgroundImage: toBG("Check", {
+        color: theme("colors.accent.500"),
+        size: 16
+      }),
+      backgroundSize: "100%"
+    },
+    ".ais-RefinementList-item--selected:focus-within .ais-RefinementList-labelText:before": {
+      borderColor: "currentColor",
+      boxShadow: "\n            inset 0px 1px 0px 0px ".concat(theme("colors.shadow.5"), ",\n            0 0 0 1px currentColor\n          ")
+    },
+    ".ais-HierarchicalMenu-label:before": {
+      backgroundImage: toBG("ChevronUp", {
+        color: theme("colors.grey.300"),
+        size: 16
+      })
+    },
+    ".ais-HierarchicalMenu-item--selected > .ais-HierarchicalMenu-link > .ais-HierarchicalMenu-label:before": {
+      backgroundImage: toBG("ChevronDown", {
+        color: theme("colors.accent.500"),
+        size: 16
+      })
+    },
+    ".ais-HierarchicalMenu-link:hover > .ais-HierarchicalMenu-label:before, .ais-RefinementList-label:hover .ais-RefinementList-labelText:before": {
+      color: theme("colors.accent.500")
+    },
+    ".ais-HierarchicalMenu-link:hover": {
+      textDecoration: "none"
+    },
+    ".ais-HierarchicalMenu-link:hover > .ais-HierarchicalMenu-label": {
+      textDecoration: "underline"
+    },
+    ".ais-RefinementList-count, .ais-Menu-count, .ais-HierarchicalMenu-count": {
+      flexShrink: "0",
+      overflow: "hidden",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyItems: "center",
+      marginLeft: theme("spacing.2"),
+      padding: "0 ".concat(theme("spacing.1")),
+      borderRadius: theme("borderRadius.full"),
+      border: "1px solid ".concat(theme("colors.grey.300")),
+      background: theme("colors.grey.100"),
+      fontSize: theme("fontSize.sm"),
+      lineHeight: theme("lineHeight.sm"),
+      fontWeight: theme("fontWeight.normal"),
+      color: theme("colors.grey.900")
+    },
+    ".ais-RefinementList-showMore, .ais-Menu-showMore, .ais-HierarchicalMenu-showMore": {
+      appearance: "none",
+      userSelect: "none",
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyItems: "center",
+      height: theme("spacing.6"),
+      marginTop: theme("spacing.4"),
+      padding: "0 ".concat(theme("spacing.4")),
+      borderRadius: theme("borderRadius.DEFAULT"),
+      background: theme("colors.transparent"),
+      fontSize: theme("fontSize.base"),
+      lineHeight: theme("lineHeight.base"),
+      fontWeight: theme("fontWeight.normal"),
+      color: theme("colors.grey.600"),
+      textDecoration: "none",
+      cursor: "pointer",
+      "&:hover": {
+        background: theme("colors.grey.100"),
+        textDecoration: "none"
+      },
+      "&:focus": {
+        boxShadow: "0 0 0 1px ".concat(theme("colors.accent.600")),
+        outline: "none"
+      },
+      "&:active": {
+        color: theme("colors.accent.600"),
+        background: theme("colors.accent.100"),
+        boxShadow: "none"
+      },
+      "&:disabled": {
+        background: "none",
+        boxShadow: "none",
+        color: theme("colors.grey.300"),
+        cursor: "not-allowed"
+      }
+    },
+    ".ais-RefinementList-noResults, .ais-Menu-noResults": {
+      marginTop: theme("spacing.4"),
+      lineHeight: theme("lineHeight.base"),
+      fontSize: theme("fontSize.base"),
+      color: theme("colors.grey.600")
+    },
+    // HitsPerPage and SortBy widgets
+    // ----------------------------------------
+    ".ais-HitsPerPage-select, .ais-SortBy-select": {
+      appearance: "none",
+      outline: "none",
+      cursor: "pointer",
+      position: "relative",
+      height: theme("spacing.10"),
+      padding: "0 ".concat(theme("spacing.10"), " 0 ").concat(theme("spacing.4")),
+      width: "100%",
+      borderRadius: theme("borderRadius.DEFAULT"),
+      border: "1px solid ".concat(theme("colors.grey.200")),
+      backgroundColor: theme("colors.white"),
+      backgroundImage: "\n            ".concat(selectIconBG(theme("colors.grey.500")), ",\n            linear-gradient(-180deg, ").concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)\n          "),
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "right ".concat(theme("spacing.4"), " center, 0 0"),
+      backgroundSize: "10px, auto",
+      boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5")),
+      color: theme("colors.grey.900"),
+      // states
+      "&::-moz-focus-inner, &:-moz-focusring": {
+        outline: "none",
+        color: "transparent",
+        textShadow: "0 0 0 ".concat(theme("colors.grey.900"))
+      },
+      "&:focus::-ms-value": {
+        color: theme("colors.grey.900")
+      },
+      "& > option": {
+        textShadow: "none",
+        "&:not(:checked)": {
+          color: theme("colors.grey.900")
+        },
+        "&:disabled": {
+          color: theme("colors.grey.300")
+        }
+      },
+      "&:hover": {
+        backgroundImage: "\n              ".concat(selectIconBG(theme("colors.grey.500")), ",\n              linear-gradient(-180deg, ").concat(theme("colors.grey.50"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n            "),
+        borderColor: theme("colors.grey.200")
+      },
+      "&:focus": {
+        backgroundImage: "\n              ".concat(selectIconBG(theme("colors.grey.500")), ",\n              linear-gradient(-180deg, ").concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n            "),
+        borderColor: theme("colors.accent.600"),
+        boxShadow: "\n              0 0 0 1px ".concat(theme("colors.accent.600"), ",\n              0 2px 0 0 ").concat(theme("colors.shadow.5"), "\n            ")
+      },
+      "&:disabled": {
+        cursor: "not-allowed",
+        color: theme("colors.grey.300"),
+        backgroundImage: "\n              ".concat(selectIconBG(theme("colors.grey.300")), ",\n              linear-gradient(-180deg, ").concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n            "),
+        borderColor: disabledColor(theme("colors.grey.200")),
+        boxShadow: "none"
+      }
+    },
+    // Buttons inside widgets
+    // ----------------------------------------
+    ".ais-InfiniteHits-loadPrevious, .ais-InfiniteHits-loadMore, .ais-ClearRefinements-button, .ais-Pagination-link": {
+      appearance: "none",
+      userSelect: "none",
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyItems: "center",
+      height: theme("spacing.8"),
+      padding: "0 ".concat(theme("spacing.4")),
+      borderRadius: theme("borderRadius.DEFAULT"),
+      border: "1px solid ".concat(theme("colors.grey.200")),
+      backgroundColor: theme("colors.white"),
+      backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)"),
+      boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5")),
+      fontSize: theme("fontSize.base"),
+      lineHeight: theme("lineHeight.base"),
+      fontWeight: theme("fontWeight.normal"),
+      color: theme("colors.grey.900"),
+      textDecoration: "none",
+      cursor: "pointer",
+      "&:hover": {
+        borderColor: theme("colors.grey.200"),
+        backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)")
+      },
+      "&:focus": {
+        zIndex: "2",
+        outline: "none",
+        backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
+        borderColor: theme("colors.accent.600"),
+        boxShadow: "\n              0 0 0 1px ".concat(theme("colors.accent.600"), ",\n              0 2px 0 1px ").concat(theme("colors.shadow.5"), "\n            ")
+      },
+      "&:active, &.ais-Pagination-link--selected": {
+        zIndex: "1",
+        backgroundImage: theme("color.grey.100"),
+        borderColor: theme("colors.grey.200"),
+        boxShadow: "\n              inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.4), ",\n              inset 0 1px 1px 0 ").concat(rgba(theme("colors.grey.500"), 0.4), ",\n              0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n            ")
+      }
+    },
+    ".ais-InfiniteHits-loadPrevious:disabled, .ais-InfiniteHits-loadMore:disabled, .ais-ClearRefinements-button:disabled, .ais-Pagination-item--disabled .ais-Pagination-link": {
+      backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
+      borderColor: disabledColor(theme("colors.grey.200")),
+      color: theme("colors.grey.300"),
+      boxShadow: "none",
+      cursor: "not-allowed"
+    },
+    ".ais-Pagination-item:first-child > .ais-Pagination-link": {
+      borderRadius: "".concat(theme("borderRadius.DEFAULT"), " 0 0 ").concat(theme("borderRadius.DEFAULT"))
+    },
+    ".ais-Pagination-item + .ais-Pagination-item > .ais-Pagination-link": {
+      marginLeft: "-1px",
+      borderRadius: "0px"
+    },
+    ".ais-Pagination-item:last-child > .ais-Pagination-link": {
+      borderRadius: "0 ".concat(theme("borderRadius.DEFAULT"), " ").concat(theme("borderRadius.DEFAULT"), " 0")
+    },
+    ".ais-InfiniteHits-loadPrevious, .ais-InfiniteHits-loadMore": {
+      margin: "".concat(theme("spacing.4"), " auto")
+    },
+    ".ais-ClearRefinements-button": {
+      width: "100%"
+    },
+    // Misc
+    // ----------------------------------------
+    ".ais-Highlight-highlighted": {
+      backgroundColor: theme("colors.accent.100"),
+      color: theme("colors.accent.900"),
+      fontStyle: "normal"
+    },
+    ".ais-Pagination-item": {
+      display: "inline-block"
+    }
+  }), {
+    respectPrefix: false
+  });
+});

package/dist/esm/KeyboardKey/KeyboardKey.d.ts

@@ -0,0 +1,12 @@
+import type { VFC } from "react";
+export interface KeyboardKeyProps {
+    /** @ignore */
+    className?: string;
+    value: string;
+}
+/**
+ * The `KeyboardKey` component is used to display a keyboard key.
+ *
+ * See the [Keyboard Key documentation page](https://satellite.algolia.com/components/misc/keyboard-key) for more information.
+ */
+export declare const KeyboardKey: VFC<KeyboardKeyProps>;

package/dist/esm/KeyboardKey/KeyboardKey.js

@@ -0,0 +1,34 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import cx from "clsx";
+import { createElement } from "react";
+import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CornerDownLeftIcon } from "../Icons";
+import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+var KEY_MAPPINGS = {
+  up: ArrowUpIcon,
+  down: ArrowDownIcon,
+  left: ArrowLeftIcon,
+  right: ArrowRightIcon,
+  enter: CornerDownLeftIcon,
+  escape: "esc"
+};
+/**
+ * The `KeyboardKey` component is used to display a keyboard key.
+ *
+ * See the [Keyboard Key documentation page](https://satellite.algolia.com/components/misc/keyboard-key) for more information.
+ */
+export var KeyboardKey = function KeyboardKey(_ref) {
+  var className = _ref.className,
+    value = _ref.value;
+  var mappedValue = KEY_MAPPINGS[value];
+  var displayed = !mappedValue ? value : typeof mappedValue === "string" ? mappedValue : /*#__PURE__*/createElement(mappedValue, {
+    "aria-label": value,
+    width: "1em",
+    height: "1em"
+  });
+  return /*#__PURE__*/_jsx("kbd", {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["keyboard-key "]))), className),
+    children: displayed
+  });
+};

package/dist/esm/KeyboardKey/KeyboardKey.tailwind.d.ts

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

package/dist/esm/KeyboardKey/KeyboardKey.tailwind.js

@@ -0,0 +1,28 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var keyboardKeyPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".keyboard-key": {
+      borderRadius: theme("borderRadius.DEFAULT"),
+      height: "20px",
+      minWidth: "20px",
+      padding: "0 4px",
+      display: "inline-flex",
+      textAlign: "center",
+      alignItems: "center",
+      justifyContent: "center",
+      fontFamily: theme("fontFamily.mono"),
+      // Matches typo-subdued
+      color: theme("colors.grey.600"),
+      // Should match display-caption
+      fontSize: theme("fontSize.sm"),
+      lineHeight: theme("lineHeight.sm"),
+      background: "linear-gradient(134deg, #e6e7ec 0%, #ffffff 70%)",
+      boxShadow: "\n        2px 1px 4px -2px rgba(35, 38, 59, 0.24),\n        inset -0.6px -0.6px 1px #dcdde7, inset 0.6px 0.6px 1px #ffffff\n      "
+    }
+  });
+});
+export default keyboardKeyPlugin;

package/dist/esm/KeyboardKey/index.d.ts

@@ -0,0 +1 @@
+export * from "./KeyboardKey";

package/dist/esm/KeyboardKey/index.js

@@ -0,0 +1 @@
+export * from "./KeyboardKey";