@algolia/satellite 1.0.0-beta.144 → 1.0.0-beta.146

package/README.md

@@ -2,6 +2,8 @@
 
 ![Nothing to see here](https://algolia-satellite.s3-eu-west-1.amazonaws.com/nothing-to-see-here.gif)
 
+[Library documentation](https://satellite.algolia.com/) | [NPM](https://www.npmjs.com/package/@algolia/satellite) | [Storybook](https://satellite-storybook.algolia.com/) | [Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components)
+
 ## Installation
 
 ```sh

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -58,7 +58,7 @@ export declare class AutoComplete<T extends Option = Option> extends Component<A
     handleShowAllResults: (evt: MouseEvent<HTMLButtonElement>) => void;
     removeValue: (removedOption: T) => void;
     getA11yStatusMessage: (options: A11yStatusMessageOptions<Option>) => any;
-    renderInput: (results: T[], autocompleteHelpers: ControllerStateAndHelpers<T | Option>, fieldState: FieldState) => JSX.Element;
+    renderInput: (autocompleteHelpers: ControllerStateAndHelpers<T | Option>, fieldState: FieldState) => JSX.Element;
     renderMenu: (results: T[], autocompleteHelpers: ControllerStateAndHelpers<T | Option>) => JSX.Element;
     renderSelect: (autocompleteHelpers: ControllerStateAndHelpers<T | Option>, fieldState: FieldState) => JSX.Element;
     private get locale();

package/cjs/AutoComplete/AutoComplete.js

@@ -69,7 +69,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
-var _excluded = ["optionItemPrefix"];
+var _excluded = ["optionItemPrefix"],
+    _excluded2 = ["ref"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
@@ -371,7 +372,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
 
       return "";
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderInput", function (results, autocompleteHelpers, fieldState) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderInput", function (autocompleteHelpers, fieldState) {
       var _this$props3 = _this.props,
           id = _this$props3.id,
           placeholder = _this$props3.placeholder,
@@ -531,22 +532,36 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
           return _this.menuWrapperRef = wrapperEl;
         },
         children: function children(popper) {
+          var _getMenuProps = getMenuProps({
+            ref: popper.ref
+          }),
+              menuRef = _getMenuProps.ref,
+              menuProps = (0, _objectWithoutProperties2["default"])(_getMenuProps, _excluded2);
+
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
             element: _this.menuWrapperRef,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              /**
+               * We put the `menuRef` on a different element than the menu props so that Downshift correctly includes
+               * the entire Popper element when identifying a click outside. We keep the rest of the`menuProps` on the
+               * `ul` itself for accessibility reasons (it needs to be the direct parent of menu item elements).
+               * While a bit hackish, we made sure that Downshift only uses the ref to compute click outside and not
+               * anything else:
+               * https://github.com/downshift-js/downshift/blob/3fb0ed21278c5f1d0a077ed9b1d0dfd55a75c71b/src/downshift.js#L951
+               */
+              ref: menuRef,
               className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown"]))), menuClassName),
               style: _objectSpread(_objectSpread({}, popper.style), dropdownStyle),
               "data-popper-placement": popper.placement,
-              ref: popper.ref,
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
                 fullBleed: true,
                 elevation: "300",
-                children: [results.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+                children: [results.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, menuProps), {}, {
                   className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["min-h-10"]))),
                   children: emptyState
                 })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollIndicator["default"], {
                   className: menuSize === "large" ? (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["max-h-96"]))) : (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["max-h-64"]))),
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", _objectSpread(_objectSpread({}, menuProps), {}, {
                     children: [results.slice(0, showAllResults ? Number.MAX_SAFE_INTEGER : maxResults).map(function (result, index) {
                       return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", _objectSpread(_objectSpread({}, getItemProps({
                         item: result,
@@ -599,7 +614,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: className,
-        children: [_this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/(0, _reactDom.createPortal)(_this.renderMenu(results, autocompleteHelpers), (_this$context$portalT = _this.context["portalTarget"]) !== null && _this$context$portalT !== void 0 ? _this$context$portalT : document.body)]
+        children: [_this.renderInput(autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/(0, _reactDom.createPortal)(_this.renderMenu(results, autocompleteHelpers), (_this$context$portalT = _this.context["portalTarget"]) !== null && _this$context$portalT !== void 0 ? _this$context$portalT : document.body)]
       });
     });
     return _this;

package/cjs/AutoComplete/AutoComplete.tailwind.d.ts

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

package/cjs/Button/Button.tailwind.d.ts

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

package/cjs/Card/Card.tailwind.d.ts

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

package/cjs/Checkbox/Checkbox.tailwind.d.ts

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

package/cjs/DatePicker/DatePicker.tailwind.d.ts

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

package/cjs/DatePicker/components/Calendar.js

@@ -13,8 +13,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _reactDayPicker = require("react-day-picker");
 
-var _utils = require("../utils");
-
 var _NavBar = _interopRequireDefault(require("./NavBar"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -48,14 +46,11 @@ var Calendar = function Calendar(props) {
     //stl`bg-grey-600 text-white rounded-l border-0`,
     displayedRangesEnd: "rdp-day_displayedRangesEnd" //stl`bg-grey-600 text-white rounded-r border-0`,
 
-  }; // This could be expanded further to incorporate expanding the number system as well as the text:
-  // https://react-day-picker.js.org/basics/localization#adopting-other-numbering-systems
-
-  var dateFnsLocale = (0, _utils.getDateFnsLocale)(props.locale.code);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDayPicker.DayPicker, _objectSpread(_objectSpread({
     mode: props.mode
   }, curatedProps), {}, {
-    locale: dateFnsLocale,
+    locale: props.locale.formatter,
     dir: props.locale.rtl ? "rtl" : "ltr",
     modifiersClassNames: modifierClassNames,
     showOutsideDays: false,

package/cjs/DatePicker/types.d.ts

@@ -1,12 +1,8 @@
-import type * as Locales from "date-fns/locale";
+import type { Locale as DateFnsLocale } from "date-fns";
 import type { ModalProps } from "./components/Modal";
 export declare type DatePickerLocale = {
-    /**
-     * code is the date-fns ISO 639-1 language code to look up @link https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
-     * for rendering the actual calendar component in the correct language. This has no effect on the custom translations
-     * listed below. (i.e. `openButton`, `apply`, etc.)
-     */
-    code?: keyof typeof Locales;
+    /** The date-fns locale object used to localize dates. Defaults to* `en-US`. */
+    formatter?: DateFnsLocale;
     /** rtl should be used optionally in conjunction with supported language codes, such as `rtl: true` when code is `arSA` */
     rtl?: boolean;
     /**

package/cjs/DatePicker/utils.d.ts

@@ -1,10 +1,3 @@
-import type { Locale } from "date-fns";
 import type { DatePickerLocale } from "./types";
 export declare const formatDate: (date: Date | number) => string;
-export declare const DEFAULT_DATE_PICKER_LOCALE: Required<DatePickerLocale>;
-/**
- * Looks up a date-fns locale. This falls back to `en`
- * @param locale the ISO 639-1 language code to look up @link https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
- * @returns date-fns locale.
- */
-export declare function getDateFnsLocale(locale?: string): Locale;
+export declare const DEFAULT_DATE_PICKER_LOCALE: Required<Omit<DatePickerLocale, "formatter">>;

package/cjs/DatePicker/utils.js

@@ -2,29 +2,19 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.formatDate = exports.DEFAULT_DATE_PICKER_LOCALE = void 0;
-exports.getDateFnsLocale = getDateFnsLocale;
 
 var _format = _interopRequireDefault(require("date-fns/format"));
 
-var Locales = _interopRequireWildcard(require("date-fns/locale"));
-
-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; }
-
 var formatDate = function formatDate(date) {
   return (0, _format["default"])(date, "MMM do, yyyy");
 };
 
 exports.formatDate = formatDate;
 var DEFAULT_DATE_PICKER_LOCALE = {
-  code: "enUS",
   rtl: false,
   apply: "Apply",
   cancel: "Cancel",
@@ -32,21 +22,4 @@ var DEFAULT_DATE_PICKER_LOCALE = {
   previousMonth: "Previous month",
   nextMonth: "Next month"
 };
-/**
- * Looks up a date-fns locale. This falls back to `en`
- * @param locale the ISO 639-1 language code to look up @link https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
- * @returns date-fns locale.
- */
-
-exports.DEFAULT_DATE_PICKER_LOCALE = DEFAULT_DATE_PICKER_LOCALE;
-
-function getDateFnsLocale(locale) {
-  var _allLocales$locale;
-
-  if (!locale) {
-    return Locales.enUS;
-  }
-
-  var allLocales = Locales;
-  return (_allLocales$locale = allLocales[locale]) !== null && _allLocales$locale !== void 0 ? _allLocales$locale : Locales.enUS;
-}
+exports.DEFAULT_DATE_PICKER_LOCALE = DEFAULT_DATE_PICKER_LOCALE;

package/cjs/Dropdown/components/DropdownLinkItem.d.ts

@@ -2,6 +2,7 @@
 import type { IconComponentType } from "../../types";
 import { DropdownBaseItemProps } from "../useDropdownItemProps";
 export declare type DropdownLinkItemProps = DropdownBaseItemProps<HTMLAnchorElement> & JSX.IntrinsicElements["a"] & {
+    href: string;
     /** Left aligned icon */
     startIcon?: IconComponentType;
 };

package/cjs/EmptyState/EmptyState.tailwind.d.ts

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

package/cjs/Flag/Flag.js

@@ -31,7 +31,7 @@ var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satel
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -110,12 +110,14 @@ var Flag = function Flag(_ref) {
         className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
         size: 16
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex-1 ml-4"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex-1 ml-4 min-w-0 break-words"]))),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex justify-between"]))),
           children: [hasTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+            className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden"]))),
             children: title
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["min-w-0"]))),
             children: children
           }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
             icon: _reactFeather.X,
@@ -125,7 +127,7 @@ var Flag = function Flag(_ref) {
             onClick: onDismiss
           })]
         }), hasTitle && children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600 mt-2"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600 mt-2"]))),
           children: children
         })]
       })]

package/cjs/Flag/Flag.tailwind.d.ts

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

package/cjs/FlexGrid/FlexGrid.tailwind.d.ts

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

package/cjs/HelpUnderline/HelpUnderline.tailwind.d.ts

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

package/cjs/Input/Input.tailwind.d.ts

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

package/cjs/InstantSearch/InstantSearch.tailwind.d.ts

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

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

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

package/cjs/Link/BaseLink.d.ts

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

package/cjs/Link/ButtonLink.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import type { ButtonBaseProps, ExtractProps } from "../Button/types";
-export declare type ButtonLinkProps = ButtonBaseProps & ExtractProps<"a">;
+export declare type ButtonLinkProps = ButtonBaseProps & ExtractProps<"a"> & {
+    href: string;
+};
 export declare const ButtonLink: ({ endIcon: EndIcon, href, onClick, ...props }: ButtonLinkProps) => JSX.Element;
 export default ButtonLink;

package/cjs/Link/IconButtonLink.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { IconButtonBaseProps } from "../Button/IconButton";
 import type { ExtractProps } from "../Button/types";
-export declare type IconButtonLinkProps = IconButtonBaseProps & ExtractProps<"a">;
+export declare type IconButtonLinkProps = IconButtonBaseProps & ExtractProps<"a"> & {
+    href: string;
+};
 export declare const IconButtonLink: ({ href, onClick, ...props }: IconButtonLinkProps) => JSX.Element;
 export default IconButtonLink;

package/cjs/Link/Link.d.ts

@@ -1,10 +1,12 @@
 import type { AnchorHTMLAttributes } from "react";
 import type { IconComponentType } from "../types";
 export declare type LinkProps = {
+    href: string;
     startIcon?: IconComponentType;
     endIcon?: IconComponentType;
 } & AnchorHTMLAttributes<HTMLAnchorElement>;
 export declare const Link: import("react").ForwardRefExoticComponent<{
+    href: string;
     startIcon?: IconComponentType | undefined;
     endIcon?: IconComponentType | undefined;
 } & AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;

package/cjs/Medallion/Medallion.tailwind.d.ts

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

package/cjs/Modal/Modal.tailwind.d.ts

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

package/cjs/ProgressBar/ProgressBar.tailwind.d.ts

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

package/cjs/ProgressSpinner/ProgressSpinner.tailwind.d.ts

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

package/cjs/RadioGroup/RadioButton.tailwind.d.ts

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

package/cjs/RangeSlider/RangeSlider.tailwind.d.ts

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

package/cjs/ScrollIndicator/ScrollIndicator.tailwind.d.ts

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

package/cjs/Select/Select.tailwind.d.ts

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

package/cjs/Sidebar/SidebarButtonLink.d.ts

@@ -8,7 +8,13 @@ export interface SidebarButtonLinkProps {
     id?: string;
     icon: SidebarButtonLinkIcon;
     href: string;
-    children: ReactNode;
     onClick?: MouseEventHandler<HTMLAnchorElement>;
+    disabled?: boolean;
+    /**
+     * Alternative content for the tooltip.
+     * @default children
+     */
+    tooltipContent?: ReactNode;
+    children: ReactNode;
 }
 export declare const SidebarButtonLink: FC<SidebarButtonLinkProps>;

package/cjs/Sidebar/SidebarButtonLink.js

@@ -15,8 +15,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = require("react");
 
-var _Link = require("../Link");
-
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _Tooltip = require("../Tooltip");
@@ -34,7 +32,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Tooltip = function Tooltip(_ref) {
-  var title = _ref.title,
+  var content = _ref.content,
       children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
     placement: "right",
@@ -46,40 +44,38 @@ var Tooltip = function Tooltip(_ref) {
         offset: [0, 32]
       }
     }],
-    content: title,
+    content: content,
     wrapperClassName: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["block"]))),
     interactive: false,
     children: children
   });
 };
 
-var SidebarButtonLink = function SidebarButtonLink(_ref2) {
-  var id = _ref2.id,
-      icon = _ref2.icon,
-      href = _ref2.href,
-      children = _ref2.children,
-      onClick = _ref2.onClick;
+var SidebarButtonLink = function SidebarButtonLink(props) {
+  var id = props.id,
+      icon = props.icon,
+      href = props.href,
+      disabled = props.disabled,
+      children = props.children;
 
   var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
       isLinkActive = _useSidebarContext.isLinkActive,
       collapsed = _useSidebarContext.collapsed;
 
-  var linkProps = (0, _useLinkProps["default"])({
-    href: href,
-    onClick: onClick
-  });
+  var linkProps = (0, _useLinkProps["default"])(props);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       isInteractedWith = _useState2[0],
       setIsInteractedWith = _useState2[1];
 
-  var isActive = isLinkActive(href);
-  var showColors = isActive || isInteractedWith;
+  var isActive = !disabled && isLinkActive(href);
+  var showColors = !disabled && (isActive || isInteractedWith);
   var Icon = "active" in icon ? showColors ? icon.active : icon.inactive : icon;
+  var tooltipContent = "tooltipContent" in props ? props.tooltipContent : children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
-    title: collapsed ? children : null,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Link.BaseLink, _objectSpread(_objectSpread({}, linkProps), {}, {
+    content: collapsed ? tooltipContent : null,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({}, linkProps), {}, {
       id: id,
       onMouseEnter: function onMouseEnter() {
         return setIsInteractedWith(true);
@@ -93,7 +89,7 @@ var SidebarButtonLink = function SidebarButtonLink(_ref2) {
       onBlur: function onBlur() {
         return setIsInteractedWith(false);
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n          h-8 min-w-8 w-full rounded\n          flex items-center space-x-3\n          border border-transparent\n          display-body hover:no-underline\n          focus:outline-none focus:border-grey-500\n          ", "\n          ", "\n          ", "\n        "])), isActive ? "shadow-z100" : "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n          h-8 min-w-8 w-full rounded\n          flex items-center space-x-3\n          border border-transparent\n          display-body\n          hover:no-underline focus:no-underline\n          ", "\n          ", "\n          ", "\n          ", "\n        "])), disabled ? "cursor-not-allowed opacity-70" : "focus:border-grey-500", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
       "aria-current": isActive,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
         className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["", " ml-[-3px]"])), showColors ? "text-accent-600" : "text-grey-400"),

package/cjs/Sidebar/SidebarLink.d.ts

@@ -2,7 +2,8 @@ import type { FC, ReactNode } from "react";
 import type { IconComponentType } from "../types";
 export declare type SidebarLinkProps = {
     icon: IconComponentType;
+    href: string;
     disabled?: boolean;
     children: ReactNode;
-} & Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "id" | "className" | "href" | "target" | "rel" | "aria-label" | "onClick">;
+} & Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "id" | "className" | "target" | "rel" | "aria-label" | "onClick">;
 export declare const SidebarLink: FC<SidebarLinkProps>;

package/cjs/Switch/Switch.tailwind.d.ts

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

package/cjs/Tables/DataTable/DataTable.tailwind.d.ts

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

package/cjs/Tables/Table/Table.tailwind.d.ts

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

package/cjs/Tabs/Tabs.tailwind.d.ts

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

package/cjs/Tag/Tag.tailwind.d.ts

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

package/cjs/TextArea/TextArea.tailwind.d.ts

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