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

package/cjs/Medallion/Medallion.js

@@ -9,7 +9,7 @@ exports["default"] = exports.Medallion = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
@@ -25,6 +25,7 @@ var VARIANT_CLASSNAMES = {
   green: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["medallion-green text-green-700"]))),
   orange: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["medallion-orange text-orange-600"]))),
   red: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["medallion-red text-red-600"]))),
+  // eslint-disable-next-line @algolia/satellite/prefer-accent -- here we're definitely refering to the color itself
   white: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["medallion-white text-nebula-500"])))
 };
 
@@ -37,7 +38,7 @@ var Medallion = function Medallion(_ref) {
       className = _ref.className;
   var medallionClassName = VARIANT_CLASSNAMES[variant];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["medallion inline-flex items-center justify-center rounded-full ", ""])), size === "large" && "medallion-large"), medallionClassName, className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["medallion inline-flex items-center justify-center rounded-full ", ""])), size === "large" && "medallion-large"), medallionClassName, className),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
       className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["p-1 ", ""])), size === "large" && "w-10 h-10")
     })

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

@@ -13,12 +13,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
-var _reactDom = require("react-dom");
-
 var _reactFeather = require("react-feather");
 
 var _reactTransitionGroup = require("react-transition-group");
@@ -95,6 +93,7 @@ var Modal = function Modal(_ref) {
       _ref$centerY = _ref.centerY,
       centerY = _ref$centerY === void 0 ? false : _ref$centerY,
       propsLocale = _ref.locale;
+  var createPortal = (0, _Satellite.useCreatePortal)();
   var contextLocale = (0, _Satellite.useLocale)("modal");
 
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_MODAL_LOCALE), contextLocale), propsLocale);
@@ -150,19 +149,19 @@ var Modal = function Modal(_ref) {
     "aria-label": "Modal"
   });
 
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContainer, {
+  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContainer, {
     "in": open,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-900/30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-900/30 z-modalOverlay inset-x-0 inset-y-0 fixed w-full h-full"]))))
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
-        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["modal-container inset-x-0 inset-y-0 fixed w-full h-full p-4 overflow-x-hidden overflow-y-auto"]))), centerY && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"])))),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["modal-container inset-x-0 inset-y-0 fixed w-full h-full p-4 overflow-x-hidden overflow-y-auto"]))), centerY && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"])))),
         ref: setModalWrapperRef
       }, modalAccessibilityProps), {}, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
           ref: dialogRef,
           elevation: "500",
-          className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
           fullBleed: true,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
             className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n                px-8 min-h-14\n                flex items-center justify-between  space-x-2\n                ", "\n                ", "\n              "])), title ? "border-b border-grey-100" : "justify-end", !title && hideCloseIcon && "hidden"),
@@ -184,7 +183,7 @@ var Modal = function Modal(_ref) {
         })
       }))]
     })
-  }), document.body);
+  }));
 };
 
 exports.Modal = Modal;

package/cjs/Modal/components/ModalFooter.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _FlexGrid = _interopRequireDefault(require("../../FlexGrid"));
 
@@ -34,7 +34,7 @@ var ModalFooter = function ModalFooter(_ref) {
       children = _ref.children,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["mt-8"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["mt-8"]))), className),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGrid["default"], {
       spacing: "md",
       alignment: "center",

package/cjs/Modal/components/ModalSection.js

@@ -9,7 +9,7 @@ exports["default"] = exports.ModalSection = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -23,7 +23,7 @@ var ModalSection = function ModalSection(_ref) {
       _ref$fullBleed = _ref.fullBleed,
       fullBleed = _ref$fullBleed === void 0 ? false : _ref$fullBleed;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
-    className: (0, _classnames["default"])(fullBleed && (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["-mx-10"]))), className),
+    className: (0, _clsx["default"])(fullBleed && (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["-mx-10"]))), className),
     children: children
   });
 };

package/cjs/ProgressBar/ProgressBar.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
@@ -39,13 +39,13 @@ var ProgressBar = function ProgressBar(_ref) {
       barClassName = _ref.barClassName,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["progress-bar"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["progress-bar"]))), className),
     role: "progressbar",
     "aria-valuenow": value,
     "aria-valuemin": 0,
     "aria-valuemax": 100,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["progress-bar-progress"]))), barClassName),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["progress-bar-progress"]))), barClassName),
       style: {
         width: "".concat(value, "%"),
         transition: "all 150ms ease-in-out"

package/cjs/ProgressSpinner/ProgressSpinner.js

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
@@ -42,7 +42,7 @@ var ProgressSpinner = function ProgressSpinner(_ref) {
       align = _ref.align,
       svgProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, svgProps), {}, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["progress-spinner"]))), align && ALIGN_CLASSNAMES[align], className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["progress-spinner"]))), align && ALIGN_CLASSNAMES[align], className),
     viewBox: "".concat(size / 2, " ").concat(size / 2, " ").concat(size, " ").concat(size),
     width: size,
     height: size,

package/cjs/RadioGroup/RadioButton.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -33,7 +33,7 @@ var RadioButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, props), {}, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["radio-button"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["radio-button"]))), className),
     type: "radio",
     ref: ref
   }));

package/cjs/RangeSlider/RangeSlider.js

@@ -15,7 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -93,7 +93,7 @@ var RangeSlider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["range-slider ", ""])), disabled && "opacity-70"), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["range-slider ", ""])), disabled && "opacity-70"), className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["range-slider-track-1"]))),
       style: {

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

@@ -17,11 +17,13 @@ var Satellite = function Satellite(_ref) {
   var _ref$router = _ref.router,
       router = _ref$router === void 0 ? _SatelliteRouter.router : _ref$router,
       locales = _ref.locales,
+      portalTarget = _ref.portalTarget,
       children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SatelliteContext["default"].Provider, {
     value: {
       router: router,
-      locales: locales
+      locales: locales,
+      portalTarget: portalTarget
     },
     children: children
   });

package/cjs/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/cjs/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/cjs/Satellite/index.js

@@ -69,6 +69,20 @@ Object.keys(_locale).forEach(function (key) {
   });
 });
 
+var _useCreatePortal = require("./useCreatePortal");
+
+Object.keys(_useCreatePortal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useCreatePortal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useCreatePortal[key];
+    }
+  });
+});
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -96,11 +96,12 @@ var ScrollIndicator = function ScrollIndicator(_ref) {
       setScrollIndicatorsRef = _useScrollIndicators.setScrollIndicatorsRef;
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])(VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n          ", "\n          ", "\n        "])), showTopIndicator && "scroll-indicator-top", showBottomIndicator && "scroll-indicator-bottom"), wrapperClassName),
+    className: (0, _clsx["default"])(VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n          ", "\n          ", "\n        "])), showTopIndicator && "scroll-indicator-top", showBottomIndicator && "scroll-indicator-bottom"), wrapperClassName),
     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
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["scroll-indicator-content"]))), className),
+      ref: setScrollIndicatorsRef,
+      tabIndex: 0
     }, children)
   });
 };

package/cjs/Select/Select.js

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -49,7 +49,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       className = _ref.className,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("select", _objectSpread(_objectSpread({}, props), {}, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["select-input display-body"]))), VARIANT_CLASSNAMES[variant], className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["select-input display-body"]))), VARIANT_CLASSNAMES[variant], className),
     ref: ref
   }));
 });

package/cjs/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/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 _clsx = _interopRequireDefault(require("clsx"));
 
 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, _clsx["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 -mr-px"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["relative px-3 pb-7 flex flex-col no-scrollbar overflow-x-hidden"]))),
+        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>;