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

package/cjs/Insert/Insert.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Insert = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _Badge = _interopRequireDefault(require("../Badge"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _onlyText = _interopRequireDefault(require("../utils/onlyText"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+/**
+* 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
+ */
+var Insert = function Insert(_ref) {
+  var title = _ref.title,
+      contexts = _ref.contexts,
+      children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("aside", {
+    "aria-label": (0, _onlyText["default"])(title),
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["inline-flex flex-col self-start p-4 bg-grey-100 rounded"]))),
+    children: [contexts ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["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__*/(0, _jsxRuntime.jsx)(_Badge["default"], {
+          variant: variant,
+          children: label
+        }, idx);
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["display-heading mb-2"]))),
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["display-body typo-subdued"]))),
+        children: children
+      })]
+    })]
+  });
+};
+
+exports.Insert = Insert;
+var _default = Insert;
+exports["default"] = _default;

package/cjs/Insert/index.d.ts

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

package/cjs/Insert/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 _Insert["default"];
+  }
+});
+
+var _Insert = _interopRequireWildcard(require("./Insert"));
+
+Object.keys(_Insert).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Insert[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Insert[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/InstantSearch/InstantSearch.tailwind.d.ts

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

package/cjs/InstantSearch/InstantSearch.tailwind.js

@@ -0,0 +1,382 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+
+var disabledColor = require("../styles/disabledColor");
+
+var _require = require("../styles/helpers/icons"),
+    toBG = _require.toBG,
+    selectIconBG = _require.selectIconBG;
+
+var rgba = require("../styles/rgba");
+
+module.exports = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+      prefix = _ref.prefix,
+      theme = _ref.theme;
+  addComponents((0, _defineProperty2["default"])({}, 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/cjs/KeyboardKey/KeyboardKey.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+export interface KeyboardKeyProps {
+    /** @ignore */
+    className?: string;
+    value: string;
+}
+export declare const KeyboardKey: FC<KeyboardKeyProps>;

package/cjs/KeyboardKey/KeyboardKey.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KeyboardKey = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _react = require("react");
+
+var _reactFeather = require("react-feather");
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+var KEY_MAPPINGS = {
+  up: _reactFeather.ArrowUp,
+  down: _reactFeather.ArrowDown,
+  left: _reactFeather.ArrowLeft,
+  right: _reactFeather.ArrowRight,
+  enter: _reactFeather.CornerDownLeft,
+  escape: "esc"
+};
+
+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__*/(0, _react.createElement)(mappedValue, {
+    "aria-label": value,
+    width: "1em",
+    height: "1em"
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("kbd", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["keyboard-key "]))), className),
+    children: displayed
+  });
+};
+
+exports.KeyboardKey = KeyboardKey;

package/cjs/KeyboardKey/KeyboardKey.tailwind.d.ts

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

package/cjs/KeyboardKey/KeyboardKey.tailwind.js

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

package/cjs/KeyboardKey/index.d.ts

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

package/{components/Alert → cjs/KeyboardKey}/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,19 +7,20 @@ var _exportNames = {};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _Alert["default"];
+    return _KeyboardKey.KeyboardKey;
   }
 });
 
-var _Alert = _interopRequireWildcard(require("./Alert"));
+var _KeyboardKey = require("./KeyboardKey");
 
-Object.keys(_Alert).forEach(function (key) {
+Object.keys(_KeyboardKey).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _KeyboardKey[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Alert[key];
+      return _KeyboardKey[key];
     }
   });
 });

package/cjs/Link/BaseLink.d.ts

@@ -0,0 +1,4 @@
+import type { AnchorHTMLAttributes } from "react";
+export declare type BaseLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare const BaseLink: import("react").ForwardRefExoticComponent<BaseLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export default BaseLink;