@algolia/satellite 1.0.0-beta.114 → 1.0.0-beta.118

package/esm/Dropdown/DropdownButton.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "title"];
+var _excluded = ["children", "title", "renderFooter"];
 import React from "react";
 import { ChevronDown } from "react-feather";
 import Button from "../Button";
@@ -8,6 +8,7 @@ import Dropdown from "./Dropdown";
 export var DropdownButton = function DropdownButton(_ref) {
   var children = _ref.children,
       title = _ref.title,
+      renderFooter = _ref.renderFooter,
       buttonProps = _objectWithoutProperties(_ref, _excluded);
 
   var renderButton = function renderButton(_ref2) {
@@ -30,7 +31,8 @@ export var DropdownButton = function DropdownButton(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(Dropdown, {
-    renderTarget: renderButton
+    renderTarget: renderButton,
+    renderFooter: renderFooter
   }, children);
 };
 export default DropdownButton;

package/esm/Dropdown/components/DropdownButtonItem.js

@@ -1,8 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 var _excluded = ["children", "variant", "toggle", "startIcon"];
 
@@ -11,6 +12,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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import React from "react";
+import cx from "classnames";
 import stl from "../../styles/helpers/satellitePrefixer";
 import useDropdownItemProps from "../useDropdownItemProps";
 export var DropdownButtonItem = function DropdownButtonItem(props) {
@@ -24,11 +26,13 @@ export var DropdownButtonItem = function DropdownButtonItem(props) {
       mergedProps = _objectWithoutProperties(_props$dropdownItemPr, _excluded);
 
   var showDestructiveVariant = !props.disabled && variant === "destructive";
-  return /*#__PURE__*/React.createElement("button", mergedProps, StartIcon && /*#__PURE__*/React.createElement(StartIcon, {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["mr-2 ", ""])), showDestructiveVariant ? "text-red-700" : "text-grey-500"),
+  return /*#__PURE__*/React.createElement("button", _extends({}, mergedProps, {
+    className: cx(mergedProps.className, stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full"]))))
+  }), StartIcon && /*#__PURE__*/React.createElement(StartIcon, {
+    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 ", ""])), showDestructiveVariant ? "text-red-700" : "text-grey-500"),
     size: "1rem"
   }), /*#__PURE__*/React.createElement("span", {
-    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700")
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700")
   }, children));
 };
 DropdownButtonItem.defaultProps = {

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.d.ts

@@ -0,0 +1,12 @@
+import React, { FC } from "react";
+export declare type DropdownCollapsibleValue = undefined | string | string[];
+export declare type DropdownCollapsiblePropsOnChange = (name: string, value: DropdownCollapsibleValue) => void;
+export interface DropdownCollapsibleItemProps {
+    title: React.ReactNode;
+    name?: string;
+    expanded?: boolean;
+    onClick?: (evt: React.MouseEvent<HTMLElement>, name: string, expandedItems: readonly string[]) => void;
+    children: React.ReactNode;
+}
+export declare const DropdownCollapsibleItem: FC<DropdownCollapsibleItemProps>;
+export default DropdownCollapsibleItem;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.js

@@ -0,0 +1,51 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import React, { useState } from "react";
+import { ChevronDown, ChevronRight } from "react-feather";
+import { uniqueId } from "../../../utils";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { useDropdownCollapsibleItemsGroup } from ".";
+export var DropdownCollapsibleItem = function DropdownCollapsibleItem(_ref) {
+  var title = _ref.title,
+      name = _ref.name,
+      expanded = _ref.expanded,
+      _onClick = _ref.onClick,
+      children = _ref.children;
+
+  var _useDropdownCollapsib = useDropdownCollapsibleItemsGroup(),
+      expandedItems = _useDropdownCollapsib.expandedItems,
+      onItemClick = _useDropdownCollapsib.onItemClick;
+
+  var _useState = useState(function () {
+    return uniqueId("ddci");
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      internalName = _useState2[0];
+
+  var itemName = name !== null && name !== void 0 ? name : internalName;
+  var isExpanded = typeof expanded === "boolean" ? expanded : expandedItems.includes(itemName);
+  return /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col"])))
+  }, /*#__PURE__*/React.createElement("button", {
+    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          w-full h-10 px-4\n          flex items-center justify-between\n          text-grey-900 hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer\n        "]))),
+    onClick: function onClick(evt) {
+      if (typeof expanded === "boolean") {
+        _onClick === null || _onClick === void 0 ? void 0 : _onClick(evt, itemName, expandedItems);
+      } else {
+        onItemClick(itemName);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", null, title), isExpanded ? /*#__PURE__*/React.createElement(ChevronDown, {
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-grey-500"]))),
+    size: "1.25em"
+  }) : /*#__PURE__*/React.createElement(ChevronRight, {
+    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["text-grey-500"]))),
+    size: "1.25em"
+  })), isExpanded && /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-grey-50 border-l-2 border-grey-300"])))
+  }, children));
+};
+export default DropdownCollapsibleItem;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export declare type DropdownCollapsibleItemsGroupProps = {
+    expandedItems: string[];
+    onItemClick(name: string): void;
+    children: ReactNode;
+};
+export declare const DropdownCollapsibleItemsGroup: ({ expandedItems, onItemClick, children, }: DropdownCollapsibleItemsGroupProps) => JSX.Element;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroup.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { DropdownCollapsibleItemsGroupContext } from "./DropdownCollapsibleItemsGroupContext";
+export var DropdownCollapsibleItemsGroup = function DropdownCollapsibleItemsGroup(_ref) {
+  var expandedItems = _ref.expandedItems,
+      onItemClick = _ref.onItemClick,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(DropdownCollapsibleItemsGroupContext.Provider, {
+    value: {
+      expandedItems: expandedItems,
+      onItemClick: onItemClick
+    }
+  }, children);
+};

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface DropdownCollapsibleItemsGroupContext {
+    expandedItems: readonly string[];
+    onItemClick(name: string): void;
+}
+export declare const DropdownCollapsibleItemsGroupContext: import("react").Context<DropdownCollapsibleItemsGroupContext | null>;
+export declare const useDropdownCollapsibleItemsGroup: () => DropdownCollapsibleItemsGroupContext;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsGroupContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+export var DropdownCollapsibleItemsGroupContext = /*#__PURE__*/createContext(null);
+export var useDropdownCollapsibleItemsGroup = function useDropdownCollapsibleItemsGroup() {
+  var context = useContext(DropdownCollapsibleItemsGroupContext);
+
+  if (!context) {
+    throw new Error("useDropdownCollapsibleItemsGroupContext used outside DropdownCollapsibleItemsGroupContext");
+  }
+
+  return context;
+};

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export declare type DropdownCollapsibleItemsMultiGroupProps = {
+    initialExpandedItems?: string[];
+    children: ReactNode;
+};
+/**
+ * Multiple collapsible item can be open at a given time
+ */
+export declare const DropdownCollapsibleItemsMultiGroup: ({ initialExpandedItems, children, }: DropdownCollapsibleItemsMultiGroupProps) => JSX.Element;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsMultiGroup.js

@@ -0,0 +1,30 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from "react";
+import { DropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroup";
+
+/**
+ * Multiple collapsible item can be open at a given time
+ */
+export var DropdownCollapsibleItemsMultiGroup = function DropdownCollapsibleItemsMultiGroup(_ref) {
+  var initialExpandedItems = _ref.initialExpandedItems,
+      children = _ref.children;
+
+  var _useState = useState(function () {
+    return initialExpandedItems !== null && initialExpandedItems !== void 0 ? initialExpandedItems : [];
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      expandedItems = _useState2[0],
+      setExpandedItems = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(DropdownCollapsibleItemsGroup, {
+    expandedItems: expandedItems,
+    onItemClick: function onItemClick(name) {
+      return setExpandedItems(function (items) {
+        return items.includes(name) ? items.filter(function (i) {
+          return i !== name;
+        }) : [].concat(_toConsumableArray(items), [name]);
+      });
+    }
+  }, children);
+};

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export declare type DropdownCollapsibleItemsExclusiveGroupProps = {
+    initialExpandedItem?: string;
+    children: ReactNode;
+};
+/**
+ * Only one collapsible item can be open at a given time (unless you manually override)
+ */
+export declare const DropdownCollapsibleItemsSingleGroup: ({ initialExpandedItem, children, }: DropdownCollapsibleItemsExclusiveGroupProps) => JSX.Element;

package/esm/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItemsSingleGroup.js

@@ -0,0 +1,27 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from "react";
+import { DropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroup";
+
+/**
+ * Only one collapsible item can be open at a given time (unless you manually override)
+ */
+export var DropdownCollapsibleItemsSingleGroup = function DropdownCollapsibleItemsSingleGroup(_ref) {
+  var initialExpandedItem = _ref.initialExpandedItem,
+      children = _ref.children;
+
+  var _useState = useState(function () {
+    return initialExpandedItem ? [initialExpandedItem] : [];
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      expandedItems = _useState2[0],
+      setExpandedItems = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(DropdownCollapsibleItemsGroup, {
+    expandedItems: expandedItems,
+    onItemClick: function onItemClick(name) {
+      return setExpandedItems(function (items) {
+        return items.includes(name) ? [] : [name];
+      });
+    }
+  }, children);
+};

package/esm/Dropdown/components/DropdownCollapsibleItem/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./DropdownCollapsibleItem";
+export * from "./DropdownCollapsibleItemsGroup";
+export * from "./DropdownCollapsibleItemsMultiGroup";
+export * from "./DropdownCollapsibleItemsSingleGroup";
+export { useDropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroupContext";

package/esm/Dropdown/components/DropdownCollapsibleItem/index.js

@@ -0,0 +1,5 @@
+export * from "./DropdownCollapsibleItem";
+export * from "./DropdownCollapsibleItemsGroup";
+export * from "./DropdownCollapsibleItemsMultiGroup";
+export * from "./DropdownCollapsibleItemsSingleGroup";
+export { useDropdownCollapsibleItemsGroup } from "./DropdownCollapsibleItemsGroupContext";

package/esm/Dropdown/components/DropdownFooterItem.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare type DropdownFooterItemProps = {
+    className?: string;
+    children: React.ReactNode;
+};
+export declare const DropdownFooterItem: ({ children, className, ...props }: DropdownFooterItemProps) => JSX.Element | null;
+export default DropdownFooterItem;

package/esm/Dropdown/components/DropdownFooterItem.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+var _templateObject;
+
+var _excluded = ["children", "className"];
+import React from "react";
+import cx from "classnames";
+import stl from "../../styles/helpers/satellitePrefixer";
+export var DropdownFooterItem = function DropdownFooterItem(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  if (!children) return null;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex bg-grey-100 -mb-1 items-center justify-between px-4 py-3 border-t border-grey-200"]))), className)
+  }, props), children);
+};
+export default DropdownFooterItem;

package/esm/Dropdown/components/DropdownLinkItem.js

@@ -30,7 +30,7 @@ export var DropdownLinkItem = function DropdownLinkItem(props) {
 
   return /*#__PURE__*/React.createElement("a", _extends({
     tabIndex: disabled ? -1 : undefined,
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-flex items-center"]))), className)
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center"]))), className)
   }, mergedProps), StartIcon && /*#__PURE__*/React.createElement(StartIcon, {
     className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 flex-shrink-0 text-grey-500"]))),
     size: "1rem"

package/esm/Dropdown/components/DropdownRadioItem.js

@@ -27,11 +27,11 @@ export var DropdownRadioItem = function DropdownRadioItem(props) {
   return /*#__PURE__*/React.createElement("label", {
     className: className
   }, /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex-1 flex items-start space-x-4 py-2 overflow-hidden"])))
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex-1 flex items-start py-2 overflow-hidden"])))
   }, /*#__PURE__*/React.createElement("span", {
-    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-1 truncate"])))
+    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-1 truncate mr-4"])))
   }, children), /*#__PURE__*/React.createElement(RadioButton, _extends({
-    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mt-2px"])))
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mt-2px mr-2px"])))
   }, radioProps))));
 };
 DropdownRadioItem.defaultProps = {

package/esm/Dropdown/index.d.ts

@@ -4,6 +4,8 @@ export * from "./components/DropdownRadioItem";
 export * from "./components/DropdownToggleItem";
 export * from "./components/DropdownLinkItem";
 export * from "./components/DropdownButtonItem";
+export * from "./components/DropdownFooterItem";
+export * from "./components/DropdownCollapsibleItem";
 export * from "./components/DropdownDivider";
 export * from "./components/DropdownTitle";
 export * from "./useDropdownItemProps";

package/esm/Dropdown/index.js

@@ -4,6 +4,8 @@ export * from "./components/DropdownRadioItem";
 export * from "./components/DropdownToggleItem";
 export * from "./components/DropdownLinkItem";
 export * from "./components/DropdownButtonItem";
+export * from "./components/DropdownFooterItem";
+export * from "./components/DropdownCollapsibleItem";
 export * from "./components/DropdownDivider";
 export * from "./components/DropdownTitle";
 export * from "./useDropdownItemProps";

package/esm/Modal/Modal.d.ts

@@ -14,7 +14,7 @@ export interface ModalProps {
     closeIconText?: string;
 }
 export declare const Modal: {
-    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, closeIconText }: ModalProps): React.ReactPortal;
+    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, closeIconText, }: ModalProps): React.ReactPortal;
     Footer: React.FunctionComponent<import("./components/ModalFooter").ModalFooterProps>;
 };
 export default Modal;

package/esm/Modal/Modal.js

@@ -108,19 +108,22 @@ export var Modal = function Modal(_ref) {
     role: "dialog"
   }, /*#__PURE__*/React.createElement(Card, {
     ref: dialogRef,
-    className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["my-6 mx-auto"]))), !fullBleed && stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["p-8"]))), SIZE_CLASSNAMES[size], className),
-    fullBleed: fullBleed
-  }, /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["modal-header flex"])))
+    elevation: "500",
+    className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
+    fullBleed: true
+  }, /*#__PURE__*/React.createElement("header", {
+    className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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")
   }, title && /*#__PURE__*/React.createElement("h2", {
-    className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["truncate mb-8 mr-2 flex-1 display-medium"])))
+    className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex-1 display-heading truncate"])))
   }, title), !hideCloseIcon && /*#__PURE__*/React.createElement(IconButton, {
     icon: X,
     title: closeIconText,
     variant: "subtle",
     onClick: onDismiss,
-    className: cx(!title && stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["float-right"]))))
-  })), children)))), document.body);
+    className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["flex-shrink-0 -mr-2"])))
+  })), /*#__PURE__*/React.createElement("div", {
+    className: fullBleed ? undefined : stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["p-10"])))
+  }, children))))), document.body);
 };
 Modal.Footer = ModalFooter;
 export default Modal;

package/esm/Modal/Modal.tailwind.js

@@ -24,11 +24,6 @@ var modalPlugin = function modalPlugin(_ref) {
     },
     ".modal-dialog-large": {
       maxWidth: 920
-    },
-    // Components
-    ".modal-header > span:first-child": {
-      /* CSSTransitionGroup is adding an additional span in the header, so this is neccessary */
-      width: "100%"
     }
   }); // Animation
 

package/esm/Modal/components/ModalSection.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export declare type ModalSectionProps = {
+    children: ReactNode;
+    /** @ignore */
+    className?: string;
+    /** Negates the modal default horizontal padding when true */
+    fullBleed?: boolean;
+};
+export declare const ModalSection: ({ children, className, fullBleed }: ModalSectionProps) => JSX.Element;
+export default ModalSection;

package/esm/Modal/components/ModalSection.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React from "react";
+import cx from "classnames";
+import stl from "../../styles/helpers/satellitePrefixer";
+export var ModalSection = function ModalSection(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      _ref$fullBleed = _ref.fullBleed,
+      fullBleed = _ref$fullBleed === void 0 ? false : _ref$fullBleed;
+  return /*#__PURE__*/React.createElement("section", {
+    className: cx(fullBleed && stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["-mx-10"]))), className)
+  }, children);
+};
+export default ModalSection;

package/esm/Modal/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./Modal";
+export * from "./components/ModalFooter";
+export * from "./components/ModalSection";
 export { default } from "./Modal";

package/esm/Modal/index.js

@@ -1,2 +1,4 @@
 export * from "./Modal";
+export * from "./components/ModalFooter";
+export * from "./components/ModalSection";
 export { default } from "./Modal";

package/esm/Pagination/CompactPagination/CompactPagination.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare type CompactPaginationLabel = "complete" | "compact" | "none";
+declare type BaseCompactPaginationProps = {
+    /** Currently selected page (1 based index) */
+    currentPage: number;
+    onChange: (page: number) => void;
+    showGoToFirstPage?: boolean;
+    label?: CompactPaginationLabel;
+};
+export declare type DeterminateCompactPaginationProps = BaseCompactPaginationProps & {
+    nbPages: number;
+    showGoToLastPage?: boolean;
+};
+export declare type IndeterminateCompactPaginationProps = BaseCompactPaginationProps & {
+    nextDisabled?: boolean;
+};
+export declare type CompactPaginationProps = DeterminateCompactPaginationProps | IndeterminateCompactPaginationProps;
+export declare const isDeterminateCompactPaginationProps: (props: CompactPaginationProps) => props is DeterminateCompactPaginationProps;
+export declare const isIndeterminateCompactPaginationProps: (props: CompactPaginationProps) => props is IndeterminateCompactPaginationProps;
+export declare const CompactPagination: (props: CompactPaginationProps) => JSX.Element;
+export default CompactPagination;

package/esm/Pagination/CompactPagination/CompactPagination.js

@@ -0,0 +1,56 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import { ChevronsRight, ChevronsLeft, ArrowLeft, ArrowRight } from "react-feather";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { IconButton } from "../../Button";
+export var isDeterminateCompactPaginationProps = function isDeterminateCompactPaginationProps(props) {
+  return "nbPages" in props;
+};
+export var isIndeterminateCompactPaginationProps = function isIndeterminateCompactPaginationProps(props) {
+  return !isDeterminateCompactPaginationProps(props);
+};
+export var CompactPagination = function CompactPagination(props) {
+  var _props$label;
+
+  var labelType = (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : isDeterminateCompactPaginationProps(props) ? "complete" : "compact";
+  var label = labelType === "none" ? null : labelType === "compact" ? "".concat(props.currentPage) : isDeterminateCompactPaginationProps(props) ? "Page ".concat(props.currentPage, " of ").concat(props.nbPages) : "Page ".concat(props.currentPage, " of many");
+  var isFirstPage = props.currentPage === 1;
+  var isLastPage = isDeterminateCompactPaginationProps(props) ? props.currentPage === props.nbPages : !!props.nextDisabled;
+  return /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center space-x-2"])))
+  }, props.showGoToFirstPage && /*#__PURE__*/React.createElement(IconButton, {
+    icon: ChevronsLeft,
+    title: "Go to first page",
+    onClick: function onClick() {
+      return props.onChange(1);
+    },
+    disabled: isFirstPage
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    icon: ArrowLeft,
+    title: "Go to previous page",
+    onClick: function onClick() {
+      return props.onChange(props.currentPage - 1);
+    },
+    disabled: isFirstPage
+  }), label && /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["inline-block text-center tabular-nums px-2"])))
+  }, label), /*#__PURE__*/React.createElement(IconButton, {
+    icon: ArrowRight,
+    title: "Go to next page",
+    onClick: function onClick() {
+      return props.onChange(props.currentPage + 1);
+    },
+    disabled: isLastPage
+  }), isDeterminateCompactPaginationProps(props) && props.showGoToLastPage && /*#__PURE__*/React.createElement(IconButton, {
+    icon: ChevronsRight,
+    title: "Go to last page",
+    onClick: function onClick() {
+      return props.onChange(props.nbPages);
+    },
+    disabled: isLastPage
+  }));
+};
+export default CompactPagination;

package/esm/Pagination/CompactPagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./CompactPagination";
+export { default } from "./CompactPagination";

package/esm/Pagination/CompactPagination/index.js

@@ -0,0 +1,2 @@
+export * from "./CompactPagination";
+export { default } from "./CompactPagination";

package/esm/Pagination/DotPagination/DotPagination.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare type DotPaginationProps = {
+    /** Currently selected page (1 based index) */
+    currentPage: number;
+    onChange: (page: number) => void;
+    nbPages: number;
+};
+export declare const DotPagination: ({ currentPage, onChange, nbPages }: DotPaginationProps) => JSX.Element;
+export default DotPagination;

package/esm/Pagination/DotPagination/DotPagination.js

@@ -0,0 +1,26 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import stl from "../../styles/helpers/satellitePrefixer";
+export var DotPagination = function DotPagination(_ref) {
+  var currentPage = _ref.currentPage,
+      onChange = _ref.onChange,
+      nbPages = _ref.nbPages;
+  return /*#__PURE__*/React.createElement("ul", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex"])))
+  }, new Array(nbPages).fill(undefined).map(function (_, idx) {
+    var pageIdx = idx + 1;
+    return /*#__PURE__*/React.createElement("li", {
+      key: idx
+    }, /*#__PURE__*/React.createElement("button", {
+      "aria-label": "Go to page ".concat(pageIdx),
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              h-3 w-3 rounded-full mx-1\n              ", "\n            "])), currentPage === pageIdx ? "bg-accent-600" : "bg-grey-200"),
+      onClick: function onClick() {
+        return onChange(pageIdx);
+      }
+    }));
+  }));
+};
+export default DotPagination;

package/esm/Pagination/DotPagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DotPagination";
+export { default } from "./DotPagination";

package/esm/Pagination/DotPagination/index.js

@@ -0,0 +1,2 @@
+export * from "./DotPagination";
+export { default } from "./DotPagination";

package/esm/Pagination/{Pagination.d.ts → Pagination/Pagination.d.ts}

@@ -12,5 +12,5 @@ export interface PaginationProps {
  * - Don't use on list with less than 20 items
  * - Place the pagination at the bottom of the split item
  */
-export declare const Pagination: ({ currentPage, nbPages, onChange, maxButtons: maxButtonsParam }: PaginationProps) => JSX.Element;
+export declare const Pagination: ({ currentPage, nbPages, onChange, maxButtons: maxButtonsParam, }: PaginationProps) => JSX.Element;
 export default Pagination;

package/esm/Pagination/{Pagination.js → Pagination/Pagination.js}

@@ -4,9 +4,9 @@ var _templateObject;
 
 import React from "react";
 import { ArrowLeft, ArrowRight } from "react-feather";
-import stl from "../styles/helpers/satellitePrefixer";
-import range from "../utils/range";
-import Button, { ButtonGroup } from "../Button";
+import stl from "../../styles/helpers/satellitePrefixer";
+import range from "../../utils/range";
+import Button, { ButtonGroup } from "../../Button";
 var DEFAULT_MAX_BUTTONS = 10;
 
 var Ellipsis = function Ellipsis() {

package/esm/Pagination/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Pagination";
+export { default } from "./Pagination";

package/esm/Pagination/Pagination/index.js

@@ -0,0 +1,2 @@
+export * from "./Pagination";
+export { default } from "./Pagination";

package/esm/Pagination/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./Pagination";
+export * from "./DotPagination";
+export * from "./CompactPagination";
 export { default } from "./Pagination";

package/esm/Pagination/index.js

@@ -1,2 +1,4 @@
 export * from "./Pagination";
+export * from "./DotPagination";
+export * from "./CompactPagination";
 export { default } from "./Pagination";