@algolia/satellite 1.0.0-beta.132 → 1.0.0-beta.135

package/cjs/Satellite/useCreatePortal.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCreatePortal = void 0;
+
+var _react = require("react");
+
+var _reactDom = require("react-dom");
+
+var _SatelliteContext = require("./SatelliteContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var useCreatePortal = function useCreatePortal() {
+  var _useSatelliteContext = (0, _SatelliteContext.useSatelliteContext)(),
+      portalTarget = _useSatelliteContext.portalTarget; // SSR? Too bad! Abort, abort!
+
+
+  if (typeof document === "undefined") return function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
+  };
+  return function (children) {
+    return /*#__PURE__*/(0, _reactDom.createPortal)(children, portalTarget !== null && portalTarget !== void 0 ? portalTarget : document.body);
+  };
+};
+
+exports.useCreatePortal = useCreatePortal;

package/cjs/ScrollIndicator/ScrollIndicator.d.ts

@@ -1,11 +1,14 @@
-import type { CSSProperties, FunctionComponent, ReactHTML } from "react";
+import type { CSSProperties, FunctionComponent, ReactHTML, ReactNode } from "react";
 export declare type ScrollIndicatorVariant = "light" | "dark";
 export interface ScrollIndicatorProps {
     wrapperClassName?: string;
+    /** @ignore */
     className?: string;
+    /** @ignore */
     style?: CSSProperties;
     tagName?: keyof ReactHTML;
     variant?: ScrollIndicatorVariant;
+    children: ReactNode;
 }
 export declare const ScrollIndicator: FunctionComponent<ScrollIndicatorProps>;
 export default ScrollIndicator;

package/cjs/ScrollIndicator/ScrollIndicator.js

@@ -100,7 +100,8 @@ var ScrollIndicator = function ScrollIndicator(_ref) {
     children: /*#__PURE__*/(0, _react.createElement)(tagName, {
       style: style,
       className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["scroll-indicator-content"]))), className),
-      ref: setScrollIndicatorsRef
+      ref: setScrollIndicatorsRef,
+      tabIndex: 0
     }, children)
   });
 };

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

@@ -1,5 +1,5 @@
 export = scrollIndicatorPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const scrollIndicatorPlugin: import('../tailwind-types').TailwindPlugin;
+declare const scrollIndicatorPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/cjs/ScrollIndicator/ScrollIndicator.tailwind.js

@@ -1,13 +1,11 @@
 "use strict";
 
 // @ts-check
-var rgba = require("../styles/rgba");
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
+var plugin = require("tailwindcss/plugin");
 
+var rgba = require("../styles/rgba");
 
-var scrollIndicatorPlugin = function scrollIndicatorPlugin(_ref) {
+var scrollIndicatorPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -17,16 +15,16 @@ var scrollIndicatorPlugin = function scrollIndicatorPlugin(_ref) {
       "&::before, &::after": {
         position: "absolute",
         width: "100%",
-        height: 48,
-        left: 0,
+        height: "48px",
+        left: "0px",
         pointerEvents: "none"
       },
       "&::before": {
-        top: 0,
+        top: "0px",
         backgroundImage: "linear-gradient(0, ".concat(rgba(theme("colors.white"), 0), " 0%, ").concat(theme("colors.white"), " 100%)")
       },
       "&::after": {
-        bottom: 0,
+        bottom: "0px",
         backgroundImage: "linear-gradient(180deg, ".concat(rgba(theme("colors.white"), 0), " 0%, ").concat(theme("colors.white"), " 100%)")
       }
     },
@@ -50,6 +48,5 @@ var scrollIndicatorPlugin = function scrollIndicatorPlugin(_ref) {
       overflowY: "auto"
     }
   });
-};
-
+});
 module.exports = scrollIndicatorPlugin;

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

@@ -1,5 +1,5 @@
-export = buttonPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const buttonPlugin: import('../tailwind-types').TailwindPlugin;
+export = selectPlugin;
+declare const selectPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/cjs/Select/Select.tailwind.js

@@ -1,16 +1,14 @@
 "use strict";
 
 // @ts-check
+var plugin = require("tailwindcss/plugin");
+
 var disabledColor = require("../styles/disabledColor");
 
 var _require = require("../styles/helpers/icons"),
     selectIconBG = _require.selectIconBG;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-
 
-var buttonPlugin = function buttonPlugin(_ref) {
+var selectPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -77,6 +75,5 @@ var buttonPlugin = function buttonPlugin(_ref) {
       backgroundSize: "12px, auto"
     }
   });
-};
-
-module.exports = buttonPlugin;
+});
+module.exports = selectPlugin;

package/cjs/Sidebar/Sidebar.d.ts

@@ -1,12 +1,35 @@
-import type { DetailedHTMLProps, HTMLAttributes } from "react";
-import type { SidebarCollapsed, SidebarVariant } from "./types";
-export interface SidebarProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
+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;
-    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/cjs/Sidebar/Sidebar.js

@@ -2,70 +2,80 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Sidebar = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.Sidebar = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = require("react");
 
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-
-var _SidebarHeader = _interopRequireDefault(require("./components/SidebarHeader"));
+var _Satellite = require("../Satellite");
 
-var _SidebarLink = _interopRequireDefault(require("./components/SidebarLink"));
+var _ScrollIndicator = _interopRequireDefault(require("../ScrollIndicator"));
 
-var _SidebarContext = _interopRequireWildcard(require("./SidebarContext"));
-
-var _jsxRuntime = require("react/jsx-runtime");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
-var _templateObject;
+var _matchLocation = _interopRequireDefault(require("../utils/matchLocation"));
 
-var _excluded = ["className", "variant", "collapsed", "children"];
+var _SidebarContext = require("./SidebarContext");
 
-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); }
+var _jsxRuntime = require("react/jsx-runtime");
 
-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 _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) { (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 DEFAULT_SIDEBAR_LOCALE = {
+  primarySidebarLabel: "Primary Navigation Sidebar",
+  secondarySidebarLabel: "Secondary Navigation Sidebar"
+};
+
 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 ? _SidebarContext.SIDEBAR_CONTEXT_DEFAULT.variant : _ref$variant,
+      variant = _ref$variant === void 0 ? "primary" : _ref$variant,
       _ref$collapsed = _ref.collapsed,
-      collapsed = _ref$collapsed === void 0 ? _SidebarContext.SIDEBAR_CONTEXT_DEFAULT.collapsed : _ref$collapsed,
-      children = _ref.children,
-      navProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var sidebarContext = (0, _react.useMemo)(function () {
-    return {
+      collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
+      _ref$isLinkActive = _ref.isLinkActive,
+      isLinkActiveProp = _ref$isLinkActive === void 0 ? _matchLocation["default"] : _ref$isLinkActive,
+      location = _ref.location,
+      children = _ref.children;
+  var isLinkActive = (0, _react.useCallback)(function (href) {
+    return isLinkActiveProp(href, location);
+  }, [isLinkActiveProp, location]);
+  var contextLocale = (0, _Satellite.useLocale)("sidebar");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_SIDEBAR_LOCALE), contextLocale), localeProp);
+
+  var label = typeof labelProp === "string" ? labelProp : variant === "primary" ? locale.primarySidebarLabel : locale.secondarySidebarLabel;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarContext.SidebarContext.Provider, {
+    value: {
+      collapsed: collapsed,
       variant: variant,
-      collapsed: collapsed
-    };
-  }, [variant, collapsed]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarContext["default"].Provider, {
-    value: sidebarContext,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", _objectSpread(_objectSpread({}, navProps), {}, {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["sidebar ", " ", " display-body"])), variant === "light" && "sidebar-light", collapsed && "sidebar-collapsed"), className),
-      children: children
-    }))
+      isLinkActive: isLinkActive
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
+      id: id,
+      "aria-label": label,
+      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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__*/(0, _jsxRuntime.jsx)(_ScrollIndicator["default"], {
+        wrapperClassName: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-full"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["relative px-3 pb-7 flex flex-col no-scrollbar"]))),
+        children: children
+      })
+    })
   });
 };
 
-exports.Sidebar = Sidebar;
-Sidebar.Header = _SidebarHeader["default"];
-Sidebar.Link = _SidebarLink["default"];
-var _default = Sidebar;
-exports["default"] = _default;
+exports.Sidebar = Sidebar;

package/cjs/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/cjs/Sidebar/SidebarButtonLink.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarButtonLink = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("react");
+
+var _Link = require("../Link");
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _Tooltip = require("../Tooltip");
+
+var _useLinkProps = _interopRequireDefault(require("../utils/useLinkProps"));
+
+var _SidebarContext = require("./SidebarContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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) { (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,
+      children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
+    placement: "right",
+    delay: 0,
+    hideDelay: 0,
+    modifiers: [{
+      name: "offset",
+      options: {
+        offset: [0, 32]
+      }
+    }],
+    content: title,
+    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 _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
+      isLinkActive = _useSidebarContext.isLinkActive,
+      collapsed = _useSidebarContext.collapsed;
+
+  var linkProps = (0, _useLinkProps["default"])({
+    href: href,
+    onClick: onClick
+  });
+
+  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 Icon = "active" in icon ? showColors ? icon.active : icon.inactive : icon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+    title: collapsed ? children : null,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Link.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: (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"),
+      "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"),
+        height: 20,
+        width: 20
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n              ", "\n              ", "\n              ", "\n            "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
+        children: children
+      })]
+    }))
+  });
+};
+
+exports.SidebarButtonLink = SidebarButtonLink;

package/cjs/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/cjs/Sidebar/SidebarContext.js

@@ -3,22 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSidebarContext = exports["default"] = exports.SidebarContext = exports.SIDEBAR_CONTEXT_DEFAULT = void 0;
+exports.useSidebarContext = exports.SidebarContext = void 0;
 
 var _react = require("react");
 
-var SIDEBAR_CONTEXT_DEFAULT = {
-  variant: "dark",
-  collapsed: false
-};
-exports.SIDEBAR_CONTEXT_DEFAULT = SIDEBAR_CONTEXT_DEFAULT;
-var SidebarContext = /*#__PURE__*/(0, _react.createContext)(SIDEBAR_CONTEXT_DEFAULT);
+var SidebarContext = /*#__PURE__*/(0, _react.createContext)(null);
 exports.SidebarContext = SidebarContext;
 
 var useSidebarContext = function useSidebarContext() {
-  return (0, _react.useContext)(SidebarContext);
+  var context = (0, _react.useContext)(SidebarContext);
+
+  if (!context) {
+    throw new Error("useSidebarContext used outside of Sidebar");
+  }
+
+  return context;
 };
 
-exports.useSidebarContext = useSidebarContext;
-var _default = SidebarContext;
-exports["default"] = _default;
+exports.useSidebarContext = useSidebarContext;

package/cjs/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/cjs/Sidebar/SidebarHeader.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarHeader = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+var SidebarHeader = function SidebarHeader(_ref) {
+  var className = _ref.className,
+      children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["h-[72px] shrink-0 border-b border-grey-200/50"]))), className),
+    children: children
+  });
+};
+
+exports.SidebarHeader = SidebarHeader;

package/cjs/Sidebar/SidebarHeading.d.ts

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

package/cjs/Sidebar/SidebarHeading.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarHeading = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _SidebarContext = require("./SidebarContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+var SidebarHeading = function SidebarHeading(_ref) {
+  var className = _ref.className,
+      children = _ref.children;
+
+  var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
+      collapsed = _useSidebarContext.collapsed;
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          h-8 pl-2 block leading-[2rem]\n          display-subheading typo-subdued uppercase select-none\n          ", "\n        "])), collapsed && "invisible"), className),
+    children: children
+  });
+};
+
+exports.SidebarHeading = SidebarHeading;

package/cjs/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>;