@algolia/satellite 1.0.0-beta.134 → 1.0.0-beta.137

package/esm/Link/Link.js

@@ -10,7 +10,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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import { forwardRef } from "react";
 import { ExternalLink } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";

package/esm/Medallion/Medallion.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 var VARIANT_CLASSNAMES = {
@@ -13,6 +13,7 @@ var VARIANT_CLASSNAMES = {
   green: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["medallion-green text-green-700"]))),
   orange: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["medallion-orange text-orange-600"]))),
   red: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["medallion-red text-red-600"]))),
+  // eslint-disable-next-line @algolia/satellite/prefer-accent -- here we're definitely refering to the color itself
   white: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["medallion-white text-nebula-500"])))
 };
 export var Medallion = function Medallion(_ref) {

package/esm/Modal/Modal.d.ts

@@ -17,7 +17,7 @@ export interface ModalProps {
     locale?: ModalLocale;
 }
 export declare const Modal: {
-    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, locale: propsLocale, }: ModalProps): import("react").ReactPortal;
+    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, locale: propsLocale, }: ModalProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     Footer: import("react").FunctionComponent<import("./components/ModalFooter").ModalFooterProps>;
 };
 export default Modal;

package/esm/Modal/Modal.js

@@ -8,16 +8,15 @@ 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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
 import { X } from "react-feather";
 import { CSSTransition } from "react-transition-group";
 import useKeyPressEvent from "react-use/lib/useKeyPressEvent";
 import useLockBodyScroll from "react-use/lib/useLockBodyScroll";
 import { IconButton } from "../Button";
 import Card from "../Card";
-import { useLocale } from "../Satellite";
+import { useCreatePortal, useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import uniqueId from "../utils/uniqueId";
 import ModalFooter from "./components/ModalFooter";
@@ -71,6 +70,7 @@ export var Modal = function Modal(_ref) {
       _ref$centerY = _ref.centerY,
       centerY = _ref$centerY === void 0 ? false : _ref$centerY,
       propsLocale = _ref.locale;
+  var createPortal = useCreatePortal();
   var contextLocale = useLocale("modal");
 
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_MODAL_LOCALE), contextLocale), propsLocale);
@@ -126,7 +126,7 @@ export var Modal = function Modal(_ref) {
     "aria-label": "Modal"
   });
 
-  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(ModalContainer, {
+  return createPortal( /*#__PURE__*/_jsx(ModalContainer, {
     "in": open,
     children: /*#__PURE__*/_jsxs("div", {
       children: [/*#__PURE__*/_jsx("div", {
@@ -160,7 +160,7 @@ export var Modal = function Modal(_ref) {
         })
       }))]
     })
-  }), document.body);
+  }));
 };
 Modal.Footer = ModalFooter;
 export default Modal;

package/esm/Modal/components/ModalFooter.js

@@ -10,7 +10,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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import FlexGrid from "../../FlexGrid";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/Modal/components/ModalSection.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var ModalSection = function ModalSection(_ref) {

package/esm/ProgressBar/ProgressBar.js

@@ -10,7 +10,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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 

package/esm/ProgressSpinner/ProgressSpinner.js

@@ -9,7 +9,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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/esm/RadioGroup/RadioButton.js

@@ -10,7 +10,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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import { forwardRef } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/RangeSlider/RangeSlider.js

@@ -11,7 +11,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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import { forwardRef, useEffect, useState } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/Satellite/Satellite.d.ts

@@ -4,6 +4,7 @@ import type { SatelliteRouter } from "./SatelliteRouter";
 export interface SatelliteProps {
     router?: SatelliteRouter;
     locales?: ComponentsLocales;
+    portalTarget?: HTMLElement;
     children: ReactNode;
 }
 export declare const Satellite: FunctionComponent<SatelliteProps>;

package/esm/Satellite/Satellite.js

@@ -5,11 +5,13 @@ export var Satellite = function Satellite(_ref) {
   var _ref$router = _ref.router,
       router = _ref$router === void 0 ? defaultRouter : _ref$router,
       locales = _ref.locales,
+      portalTarget = _ref.portalTarget,
       children = _ref.children;
   return /*#__PURE__*/_jsx(SatelliteContext.Provider, {
     value: {
       router: router,
-      locales: locales
+      locales: locales,
+      portalTarget: portalTarget
     },
     children: children
   });

package/esm/Satellite/SatelliteContext.d.ts

@@ -4,6 +4,7 @@ import { SatelliteRouter } from "./SatelliteRouter";
 export interface SatelliteContextType {
     router: SatelliteRouter;
     locales?: ComponentsLocales;
+    portalTarget?: HTMLElement;
 }
 export declare const SatelliteContext: import("react").Context<SatelliteContextType>;
 export declare const useSatelliteContext: () => SatelliteContextType;

package/esm/Satellite/index.d.ts

@@ -2,4 +2,5 @@ export * from "./Satellite";
 export * from "./SatelliteContext";
 export * from "./SatelliteRouter";
 export * from "./locale";
+export * from "./useCreatePortal";
 export { default } from "./Satellite";

package/esm/Satellite/index.js

@@ -2,4 +2,5 @@ export * from "./Satellite";
 export * from "./SatelliteContext";
 export * from "./SatelliteRouter";
 export * from "./locale";
+export * from "./useCreatePortal";
 export { default } from "./Satellite";

package/esm/Satellite/locale.d.ts

@@ -8,20 +8,22 @@ import type { ModalLocale } from "../Modal";
 import type { PaginationLocale } from "../Pagination";
 import type { CompactPaginationLocale } from "../Pagination/CompactPagination";
 import type { DotPaginationLocale } from "../Pagination/DotPagination";
+import type { SidebarLocale } from "../Sidebar";
 import type { DataTableLocale } from "../Tables/DataTable";
 import type { TagLocale } from "../Tag";
 export declare type ComponentsLocales = {
     announcementBadge?: AnnouncementBadgeLocale;
     autoComplete?: AutoCompleteLocale;
+    compactPagination?: CompactPaginationLocale;
+    dataTable?: DataTableLocale;
     datePicker?: DatePickerLocale;
+    dotPagination?: DotPaginationLocale;
     dropzone?: DropzoneLocale;
     flag?: FlagLocale;
     input?: InputPropsLocale;
     modal?: ModalLocale;
-    compactPagination?: CompactPaginationLocale;
-    dotPagination?: DotPaginationLocale;
     pagination?: PaginationLocale;
-    dataTable?: DataTableLocale;
+    sidebar?: SidebarLocale;
     tag?: TagLocale;
 };
 export declare const useLocale: <ComponentKey extends keyof ComponentsLocales>(componentKey: ComponentKey) => ComponentsLocales[ComponentKey];

package/esm/Satellite/useCreatePortal.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement, ReactNode } from "react";
+declare type CreatePortal = (children: ReactNode) => ReactElement;
+export declare const useCreatePortal: () => CreatePortal;
+export {};

package/esm/Satellite/useCreatePortal.js

@@ -0,0 +1,16 @@
+import { Fragment } from "react";
+import { createPortal } from "react-dom";
+import { useSatelliteContext } from "./SatelliteContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var useCreatePortal = function useCreatePortal() {
+  var _useSatelliteContext = useSatelliteContext(),
+      portalTarget = _useSatelliteContext.portalTarget; // SSR? Too bad! Abort, abort!
+
+
+  if (typeof document === "undefined") return function () {
+    return /*#__PURE__*/_jsx(Fragment, {});
+  };
+  return function (children) {
+    return /*#__PURE__*/createPortal(children, portalTarget !== null && portalTarget !== void 0 ? portalTarget : document.body);
+  };
+};

package/esm/ScrollIndicator/ScrollIndicator.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import cx from "classnames";
+import cx from "clsx";
 import { createElement, useCallback, useMemo, useState } from "react";
 import useMeasure from "react-use/lib/useMeasure";
 import useScroll from "react-use/lib/useScroll";
@@ -84,7 +84,8 @@ export var ScrollIndicator = function ScrollIndicator(_ref) {
     children: /*#__PURE__*/createElement(tagName, {
       style: style,
       className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["scroll-indicator-content"]))), className),
-      ref: setScrollIndicatorsRef
+      ref: setScrollIndicatorsRef,
+      tabIndex: 0
     }, children)
   });
 };

package/esm/Select/Select.js

@@ -9,7 +9,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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import { forwardRef } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/Sidebar/Sidebar.d.ts

@@ -1,14 +1,35 @@
-import type { DetailedHTMLProps, HTMLAttributes } from "react";
-import type { SidebarCollapsed, SidebarVariant } from "./types";
-export interface SidebarProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
-    /** @default "dark" */
+import type { FC, ReactNode } from "react";
+import type { SidebarLocale, SidebarLocation, SidebarVariant } from "./types";
+export interface SidebarProps {
+    id?: string;
+    className?: string;
+    label?: string;
+    locale?: SidebarLocale;
+    collapsed?: boolean;
+    /**
+     * As the name of the variants imply,
+     * - `primary` should be used for your first level of navigation
+     * - `secondary` should be used for your second level of navigation
+     */
     variant?: SidebarVariant;
-    /** @default false */
-    collapsed?: SidebarCollapsed;
+    /**
+     * Used to determine whether a link should be highlighted as "active"
+     * Ideally only one link should be shown as active at any given time.
+     *
+     * @example <caption>with a location of /foo/bar</caption>
+     * isLinkActive('/foo', location) // returns true
+     *
+     * @example <caption>with a location of /bar</caption>
+     * isLinkActive('/foo', location) // returns false
+     *
+     * */
+    isLinkActive?: (href: string, location: SidebarLocation) => boolean;
+    /**
+     * location is used in conjunction with `isLinkActive` to display active links properly.
+     * It is injected from outside so that it can work with different router libraries and
+     * re-render when necessary.
+     */
+    location: SidebarLocation;
+    children?: ReactNode;
 }
-export declare const Sidebar: {
-    ({ className, variant, collapsed, children, ...navProps }: SidebarProps): JSX.Element;
-    Header: ({ className, children, ...headingProps }: import("./components/SidebarHeader").SidebarHeaderProps) => JSX.Element;
-    Link: import("react").FunctionComponent<import("./components/SidebarLink").SidebarLinkProps>;
-};
-export default Sidebar;
+export declare const Sidebar: FC<SidebarProps>;

package/esm/Sidebar/Sidebar.js

@@ -1,45 +1,60 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-
-var _templateObject;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var _excluded = ["className", "variant", "collapsed", "children"];
+var _templateObject, _templateObject2, _templateObject3;
 
 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; }
 
 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) { _defineProperty(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; }
 
-import cx from "classnames";
-import { useMemo } from "react";
+import cx from "clsx";
+import { useCallback } from "react";
+import { useLocale } from "../Satellite";
+import ScrollIndicator from "../ScrollIndicator";
 import stl from "../styles/helpers/satellitePrefixer";
-import SidebarHeader from "./components/SidebarHeader";
-import SidebarLink from "./components/SidebarLink";
-import SidebarContext, { SIDEBAR_CONTEXT_DEFAULT } from "./SidebarContext";
+import matchLocation from "../utils/matchLocation";
+import { SidebarContext } from "./SidebarContext";
 import { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_SIDEBAR_LOCALE = {
+  primarySidebarLabel: "Primary Navigation Sidebar",
+  secondarySidebarLabel: "Secondary Navigation Sidebar"
+};
 export var Sidebar = function Sidebar(_ref) {
-  var className = _ref.className,
+  var id = _ref.id,
+      className = _ref.className,
+      labelProp = _ref.label,
+      localeProp = _ref.locale,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? SIDEBAR_CONTEXT_DEFAULT.variant : _ref$variant,
+      variant = _ref$variant === void 0 ? "primary" : _ref$variant,
       _ref$collapsed = _ref.collapsed,
-      collapsed = _ref$collapsed === void 0 ? SIDEBAR_CONTEXT_DEFAULT.collapsed : _ref$collapsed,
-      children = _ref.children,
-      navProps = _objectWithoutProperties(_ref, _excluded);
+      collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
+      _ref$isLinkActive = _ref.isLinkActive,
+      isLinkActiveProp = _ref$isLinkActive === void 0 ? matchLocation : _ref$isLinkActive,
+      location = _ref.location,
+      children = _ref.children;
+  var isLinkActive = useCallback(function (href) {
+    return isLinkActiveProp(href, location);
+  }, [isLinkActiveProp, location]);
+  var contextLocale = useLocale("sidebar");
 
-  var sidebarContext = useMemo(function () {
-    return {
-      variant: variant,
-      collapsed: collapsed
-    };
-  }, [variant, collapsed]);
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_SIDEBAR_LOCALE), contextLocale), localeProp);
+
+  var label = typeof labelProp === "string" ? labelProp : variant === "primary" ? locale.primarySidebarLabel : locale.secondarySidebarLabel;
   return /*#__PURE__*/_jsx(SidebarContext.Provider, {
-    value: sidebarContext,
-    children: /*#__PURE__*/_jsx("nav", _objectSpread(_objectSpread({}, navProps), {}, {
-      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["sidebar ", " ", " display-body"])), variant === "light" && "sidebar-light", collapsed && "sidebar-collapsed"), className),
-      children: children
-    }))
+    value: {
+      collapsed: collapsed,
+      variant: variant,
+      isLinkActive: isLinkActive
+    },
+    children: /*#__PURE__*/_jsx("aside", {
+      id: id,
+      "aria-label": label,
+      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            display-body border-r border-grey-200/50\n            ", "\n            ", "\n          "])), collapsed ? "w-14" : "w-56", variant === "primary" ? "bg-grey-100" : "bg-white"), className),
+      children: /*#__PURE__*/_jsx(ScrollIndicator, {
+        wrapperClassName: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-full -mr-px"]))),
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["relative px-3 pb-7 flex flex-col no-scrollbar overflow-x-hidden"]))),
+        children: children
+      })
+    })
   });
-};
-Sidebar.Header = SidebarHeader;
-Sidebar.Link = SidebarLink;
-export default Sidebar;
+};

package/esm/Sidebar/SidebarButtonLink.d.ts

@@ -0,0 +1,14 @@
+import type { FC, MouseEventHandler, ReactNode } from "react";
+import type { IconComponentType } from "../types";
+export declare type SidebarButtonLinkIcon = IconComponentType | {
+    active: IconComponentType;
+    inactive: IconComponentType;
+};
+export interface SidebarButtonLinkProps {
+    id?: string;
+    icon: SidebarButtonLinkIcon;
+    href: string;
+    children: ReactNode;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+}
+export declare const SidebarButtonLink: FC<SidebarButtonLinkProps>;

package/esm/Sidebar/SidebarButtonLink.js

@@ -0,0 +1,92 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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; }
+
+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) { _defineProperty(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; }
+
+import { useState } from "react";
+import { BaseLink } from "../Link";
+import stl from "../styles/helpers/satellitePrefixer";
+import { TooltipWrapper } from "../Tooltip";
+import useLinkProps from "../utils/useLinkProps";
+import { useSidebarContext } from "./SidebarContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var Tooltip = function Tooltip(_ref) {
+  var title = _ref.title,
+      children = _ref.children;
+  return /*#__PURE__*/_jsx(TooltipWrapper, {
+    placement: "right",
+    delay: 0,
+    hideDelay: 0,
+    modifiers: [{
+      name: "offset",
+      options: {
+        offset: [0, 32]
+      }
+    }],
+    content: title,
+    wrapperClassName: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["block"]))),
+    interactive: false,
+    children: children
+  });
+};
+
+export var SidebarButtonLink = function SidebarButtonLink(_ref2) {
+  var id = _ref2.id,
+      icon = _ref2.icon,
+      href = _ref2.href,
+      children = _ref2.children,
+      onClick = _ref2.onClick;
+
+  var _useSidebarContext = useSidebarContext(),
+      isLinkActive = _useSidebarContext.isLinkActive,
+      collapsed = _useSidebarContext.collapsed;
+
+  var linkProps = useLinkProps({
+    href: href,
+    onClick: onClick
+  });
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isInteractedWith = _useState2[0],
+      setIsInteractedWith = _useState2[1];
+
+  var isActive = isLinkActive(href);
+  var showColors = isActive || isInteractedWith;
+  var Icon = "active" in icon ? showColors ? icon.active : icon.inactive : icon;
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: collapsed ? children : null,
+    children: /*#__PURE__*/_jsxs(BaseLink, _objectSpread(_objectSpread({}, linkProps), {}, {
+      id: id,
+      onMouseEnter: function onMouseEnter() {
+        return setIsInteractedWith(true);
+      },
+      onFocus: function onFocus() {
+        return setIsInteractedWith(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsInteractedWith(false);
+      },
+      onBlur: function onBlur() {
+        return setIsInteractedWith(false);
+      },
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"),
+      "aria-current": isActive,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["", " ml-[-3px]"])), showColors ? "text-accent-600" : "text-grey-400"),
+        height: 20,
+        width: 20
+      }), /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              ", "\n              ", "\n              ", "\n            "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
+        children: children
+      })]
+    }))
+  });
+};

package/esm/Sidebar/SidebarContext.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import type { SidebarCollapsed, SidebarVariant } from "./types";
-export interface SideBarContextType {
+import type { SidebarVariant } from "./types";
+export declare type SidebarContextType = {
     variant: SidebarVariant;
-    collapsed: SidebarCollapsed;
-}
-export declare const SIDEBAR_CONTEXT_DEFAULT: SideBarContextType;
-export declare const SidebarContext: import("react").Context<SideBarContextType>;
-export declare const useSidebarContext: () => SideBarContextType;
-export default SidebarContext;
+    collapsed: boolean;
+    isLinkActive: (href: string) => boolean;
+};
+export declare const SidebarContext: import("react").Context<SidebarContextType | null>;
+export declare const useSidebarContext: () => SidebarContextType;

package/esm/Sidebar/SidebarContext.js

@@ -1,10 +1,11 @@
 import { createContext, useContext } from "react";
-export var SIDEBAR_CONTEXT_DEFAULT = {
-  variant: "dark",
-  collapsed: false
-};
-export var SidebarContext = /*#__PURE__*/createContext(SIDEBAR_CONTEXT_DEFAULT);
+export var SidebarContext = /*#__PURE__*/createContext(null);
 export var useSidebarContext = function useSidebarContext() {
-  return useContext(SidebarContext);
-};
-export default SidebarContext;
+  var context = useContext(SidebarContext);
+
+  if (!context) {
+    throw new Error("useSidebarContext used outside of Sidebar");
+  }
+
+  return context;
+};

package/esm/Sidebar/SidebarHeader.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactNode } from "react";
+export declare type SidebarHeaderProps = {
+    className?: string;
+    children?: ReactNode;
+};
+export declare const SidebarHeader: FC<SidebarHeaderProps>;

package/esm/Sidebar/SidebarHeader.js

@@ -0,0 +1,15 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import cx from "clsx";
+import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var SidebarHeader = function SidebarHeader(_ref) {
+  var className = _ref.className,
+      children = _ref.children;
+  return /*#__PURE__*/_jsx("header", {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["h-[72px] shrink-0 border-b border-grey-200/50"]))), className),
+    children: children
+  });
+};

package/esm/Sidebar/SidebarHeading.d.ts

@@ -0,0 +1,7 @@
+import type { FC, ReactNode } from "react";
+export declare type SidebarHeadingProps = {
+    id?: string;
+    className?: string;
+    children: ReactNode;
+};
+export declare const SidebarHeading: FC<SidebarHeadingProps>;

package/esm/Sidebar/SidebarHeading.js

@@ -0,0 +1,22 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import cx from "clsx";
+import stl from "../styles/helpers/satellitePrefixer";
+import { useSidebarContext } from "./SidebarContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var SidebarHeading = function SidebarHeading(_ref) {
+  var id = _ref.id,
+      className = _ref.className,
+      children = _ref.children;
+
+  var _useSidebarContext = useSidebarContext(),
+      collapsed = _useSidebarContext.collapsed;
+
+  return /*#__PURE__*/_jsx("span", {
+    id: id,
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          h-8 block leading-[2rem]\n          display-subheading typo-subdued uppercase select-none\n          ", "\n        "])), collapsed && "invisible"), className),
+    children: children
+  });
+};

package/esm/Sidebar/SidebarLink.d.ts

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