@algolia/satellite 1.0.0-beta.18 → 1.0.0-beta.180

package/cjs/InstantSearch/InstantSearch.tailwind.js

@@ -0,0 +1,376 @@
+"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,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/cjs/KeyboardKey/KeyboardKey.js

@@ -0,0 +1,41 @@
+"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 _Icons = require("../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+var KEY_MAPPINGS = {
+  up: _Icons.ArrowUpIcon,
+  down: _Icons.ArrowDownIcon,
+  left: _Icons.ArrowLeftIcon,
+  right: _Icons.ArrowRightIcon,
+  enter: _Icons.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.
+ */
+var KeyboardKey = exports.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
+  });
+};

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

@@ -0,0 +1,29 @@
+"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 @@
+export * from "./KeyboardKey";

package/cjs/KeyboardKey/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _KeyboardKey = require("./KeyboardKey");
+Object.keys(_KeyboardKey).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _KeyboardKey[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _KeyboardKey[key];
+    }
+  });
+});

package/cjs/Link/BaseLink.d.ts

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

package/cjs/Link/BaseLink.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseLink = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _useLinkProps = require("../utils/useLinkProps");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["href", "onClick"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var BaseLink = exports.BaseLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var href = _ref.href,
+    onClick = _ref.onClick,
+    anchorProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var linkProps = (0, _useLinkProps.useLinkProps)(_objectSpread(_objectSpread({}, anchorProps), {}, {
+    href: href,
+    onClick: onClick
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread(_objectSpread({}, anchorProps), linkProps), {}, {
+    ref: ref
+  }));
+});
+BaseLink.displayName = "BaseLink";

package/cjs/Link/ButtonLink.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { type PolymorphicButtonProps } from "../Button/PolymorphicButton";
+export declare type ButtonLinkProps = Omit<PolymorphicButtonProps<"a">, "as" | "ref"> & {
+    href: string;
+};
+/**
+ * The `ButtonLink` component is used to display a link as a button.
+ *
+ * See the [Link documentation page](https://satellite.algolia.com/components/navigation/link) for more information.
+ */
+export declare const ButtonLink: import("react").ForwardRefExoticComponent<Omit<PolymorphicButtonProps<"a">, "ref" | "as"> & {
+    href: string;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/cjs/Link/ButtonLink.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonLink = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _PolymorphicButton = require("../Button/PolymorphicButton");
+var _Icons = require("../Icons");
+var _useLinkProps = require("../utils/useLinkProps");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["endIcon", "href", "onClick"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * The `ButtonLink` component is used to display a link as a button.
+ *
+ * See the [Link documentation page](https://satellite.algolia.com/components/navigation/link) for more information.
+ */
+var ButtonLink = exports.ButtonLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var EndIcon = _ref.endIcon,
+    href = _ref.href,
+    onClick = _ref.onClick,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var linkProps = (0, _useLinkProps.useLinkProps)(_objectSpread(_objectSpread({}, props), {}, {
+    href: href,
+    onClick: onClick
+  }));
+  if (linkProps.target === "_blank" && EndIcon === undefined) {
+    EndIcon = _Icons.ExternalLinkIcon;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolymorphicButton.PolymorphicButton, _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
+    ref: ref,
+    as: "a",
+    endIcon: EndIcon
+  }));
+});
+ButtonLink.displayName = "ButtonLink";

package/cjs/Link/IconButtonLink.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { type PolymorphicIconButtonProps } from "../Button/PolymorphicIconButton";
+export declare type IconButtonLinkProps = Omit<PolymorphicIconButtonProps<"a">, "as" | "ref"> & {
+    href: string;
+};
+/**
+ * The `ButtonLink` component is used to display a link as an icon button.
+ *
+ * See the [Link documentation page](https://satellite.algolia.com/components/navigation/link) for more information.
+ */
+export declare const IconButtonLink: import("react").ForwardRefExoticComponent<Omit<PolymorphicIconButtonProps<"a">, "ref" | "as"> & {
+    href: string;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/cjs/Link/IconButtonLink.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconButtonLink = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _PolymorphicIconButton = require("../Button/PolymorphicIconButton");
+var _useLinkProps = require("../utils/useLinkProps");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["href", "onClick"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * The `ButtonLink` component is used to display a link as an icon button.
+ *
+ * See the [Link documentation page](https://satellite.algolia.com/components/navigation/link) for more information.
+ */
+var IconButtonLink = exports.IconButtonLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var href = _ref.href,
+    onClick = _ref.onClick,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var linkProps = (0, _useLinkProps.useLinkProps)(_objectSpread(_objectSpread({}, props), {}, {
+    href: href,
+    onClick: onClick
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolymorphicIconButton.PolymorphicIconButton, _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
+    as: "a",
+    ref: ref
+  }));
+});
+IconButtonLink.displayName = "IconButtonLink";

package/cjs/Link/Link.d.ts

@@ -0,0 +1,17 @@
+import type { AnchorHTMLAttributes } from "react";
+import type { IconComponentType } from "../Icons";
+export declare type LinkProps = {
+    href: string;
+    startIcon?: IconComponentType;
+    endIcon?: IconComponentType;
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+/**
+ * The `Link` component is used to display a link.
+ *
+ * See the [Link documentation page](https://satellite.algolia.com/components/navigation/link) for more information.
+ */
+export declare const Link: import("react").ForwardRefExoticComponent<{
+    href: string;
+    startIcon?: IconComponentType | undefined;
+    endIcon?: IconComponentType | undefined;
+} & AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;