@algolia/satellite 1.0.0-beta.117 → 1.0.0-beta.121

package/README.md

@@ -113,9 +113,9 @@ const plugins = [
     // Here, it will keep all the classnames starting with:
     // - 'ais-*' to preserve the instant-search widgets style
     // - 'DayPicker*' to preserve all the DatePicker styles (used in the DatePicker and DateRangePicker)
-    whitelistPatterns: [/^ais-/, /^DayPicker/]
+    whitelistPatterns: [/^ais-/, /^DayPicker/],
   }),
-  cssnano({ preset: "default" })
+  cssnano({ preset: "default" }),
 ];
 
 module.exports = { plugins };

package/cjs/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from "react";
 export declare type AnnouncementBadgeSizes = "default" | "small";
 export interface AnnouncementBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     size?: AnnouncementBadgeSizes;
-    text?: "new" | "beta" | "internal";
+    text?: "new" | "beta" | "internal" | "pilot";
     variant?: "accent" | "red";
     children?: never;
 }

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -13,6 +13,10 @@ interface State {
  *
  * Use this component when the user needs to search through a long list of results.
  *
+ * ## Menu Size Variations
+ * - **Medium (default)**: the standard dropdown menu height for most use cases
+ * - **Large**: when numerous results should be displayed in the dropdown to ease selection
+ *
  * ## Best practices
  *
  * - Provide an empty state if there is no result
@@ -31,7 +35,7 @@ export declare class AutoComplete<T extends Option> extends Component<AutoComple
         options: never[];
         separatorKeyCodes: never[];
         separatorKeys: never[];
-        optionItemComponent: React.ComponentType<import("./types").OptionItemProps>;
+        optionItemComponent: import("./types").OptionItemComponentType;
         noWrap: boolean;
     };
     state: State;
@@ -46,7 +50,7 @@ export declare class AutoComplete<T extends Option> extends Component<AutoComple
     updateInputWidth: () => void;
     handleKeyDown: (state: ControllerStateAndHelpers<Option>) => (evt: React.KeyboardEvent<any>) => void;
     handleChange: (option: Option) => void;
-    handleShowAllResults: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    handleShowAllResults: (evt: React.MouseEvent<HTMLButtonElement>) => void;
     removeValue: (removedOption: Option) => void;
     renderInput: (results: Option[], autocompleteHelpers: ControllerStateAndHelpers<Option>, fieldState: FieldState) => JSX.Element;
     renderMenu: (results: Option[], autocompleteHelpers: ControllerStateAndHelpers<Option>) => JSX.Element;

package/cjs/AutoComplete/AutoComplete.js

@@ -65,7 +65,7 @@ var _DefaultOptionItem = _interopRequireDefault(require("./components/DefaultOpt
 
 var _AutoCompleteEmptyState = _interopRequireDefault(require("./components/AutoCompleteEmptyState"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
 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); }
 
@@ -155,6 +155,10 @@ var defaultEmptyState = /*#__PURE__*/_react["default"].createElement(_AutoComple
  *
  * Use this component when the user needs to search through a long list of results.
  *
+ * ## Menu Size Variations
+ * - **Medium (default)**: the standard dropdown menu height for most use cases
+ * - **Large**: when numerous results should be displayed in the dropdown to ease selection
+ *
  * ## Best practices
  *
  * - Provide an empty state if there is no result
@@ -448,6 +452,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
           isOpen = autocompleteHelpers.isOpen;
       var _this$props4 = _this.props,
           menuClassName = _this$props4.menuClassName,
+          menuSize = _this$props4.menuSize,
           _this$props4$emptySta = _this$props4.emptyState,
           emptyState = _this$props4$emptySta === void 0 ? AutoComplete.defaultProps.emptyState : _this$props4$emptySta,
           menuFooter = _this$props4.menuFooter,
@@ -496,26 +501,26 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
         }, results.length === 0 ? /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, getMenuProps(), {
           className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["min-h-10"])))
         }), emptyState) : /*#__PURE__*/_react["default"].createElement(_ScrollIndicator["default"], {
-          className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["max-h-64"])))
+          className: menuSize === "large" ? (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["max-h-96"]))) : (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["max-h-64"])))
         }, /*#__PURE__*/_react["default"].createElement("ul", getMenuProps(), results.slice(0, showAllResults ? Number.MAX_SAFE_INTEGER : maxResults).map(function (result, index) {
           return /*#__PURE__*/_react["default"].createElement("li", (0, _extends2["default"])({
             key: result.value
           }, getItemProps({
             item: result,
             disabled: result.disabled,
-            className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n                            autocomplete-result\n                            flex items-center min-h-10 px-4 cursor-pointer\n                            ", "\n                            ", "\n                          "])), index === highlightedIndex && "bg-grey-100", result.disabled && "cursor-not-allowed")
+            className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n                            autocomplete-result\n                            flex items-center min-h-10 px-4 cursor-pointer\n                            ", "\n                            ", "\n                          "])), index === highlightedIndex && "bg-grey-100", result.disabled && "cursor-not-allowed")
           })), /*#__PURE__*/_react["default"].createElement(OptionItem, (0, _extends2["default"])({}, optionItemProps, {
             highlighted: index === highlightedIndex,
             option: result
           })));
         }), extraResults > 0 && !showAllResults && /*#__PURE__*/_react["default"].createElement("li", {
-          className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["p-2 text-right"])))
+          className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["p-2 text-right"])))
         }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
           variant: "subtle",
           size: "small",
           onMouseDown: _this.handleShowAllResults
         }, "Show ", (0, _pluralize["default"])(extraResults, "result"), " more")))), menuFooter && /*#__PURE__*/_react["default"].createElement("footer", {
-          className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"])))
+          className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"])))
         }, menuFooter)));
       });
     });

package/cjs/AutoComplete/types.d.ts

@@ -31,6 +31,11 @@ export interface AutoCompleteBaseProps {
     /** Keep the input on a single line */
     noWrap?: boolean;
     endItem?: React.ReactNode;
+    /**
+     * `medium` will display about 5 results in the dropdown; use `large` variant to display more
+     * @default "medium"
+     */
+    menuSize?: "medium" | "large";
 }
 export interface AutoCompleteSingleProps extends AutoCompleteBaseProps {
     multiple?: false;

package/cjs/AutoComplete/utils.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.defaultCreateFromInputValue = exports.caseInsensitiveCreateFromInputValue = void 0;
 exports.isAutoCompleteMultiProps = isAutoCompleteMultiProps;
-exports.caseInsensitiveCreateFromInputValue = exports.defaultCreateFromInputValue = void 0;
 
 function isAutoCompleteMultiProps(props) {
   return Boolean(props.multiple);

package/cjs/Avatars/ApplicationAvatar.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { ApplicationAvatarSize, MinimalApplication } from "./types";
-interface ApplicationAvatarProps {
+export interface ApplicationAvatarProps {
     /** A minimal application object containing `applicationID` and `name`. */
     application: MinimalApplication;
     /** @default "medium" */

package/cjs/Avatars/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getUserInitials = exports.getUserBackgroundClassName = exports.getApplicationInitials = exports.getApplicationIdInitial = exports.pickApplicationColors = void 0;
+exports.pickApplicationColors = exports.getUserInitials = exports.getUserBackgroundClassName = exports.getApplicationInitials = exports.getApplicationIdInitial = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/cjs/Button/styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getIconColorClassName = exports.BUTTON_VARIANT_CLASSNAMES = exports.BUTTON_LOADER_ICON_SIZES = exports.BUTTON_SIZE_CLASSNAMES = void 0;
+exports.getIconColorClassName = exports.BUTTON_VARIANT_CLASSNAMES = exports.BUTTON_SIZE_CLASSNAMES = exports.BUTTON_LOADER_ICON_SIZES = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/cjs/Card/Card.tailwind.js

@@ -31,7 +31,8 @@ var cardPlugin = function cardPlugin(_ref) {
       boxShadow: theme("boxShadow.z400")
     },
     ".card-z500": {
-      boxShadow: theme("boxShadow.z500")
+      boxShadow: theme("boxShadow.z500"),
+      borderRadius: 8
     }
   });
 };

package/cjs/Card/components/CardHeader.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 export declare type CardHeaderProps = JSX.IntrinsicElements["div"];
-export declare const CardHeader: ({ className, ...props }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => JSX.Element;
+export declare const CardHeader: ({ className, ...props }: CardHeaderProps) => JSX.Element;
 export default CardHeader;

package/cjs/Checkbox/Checkbox.d.ts

@@ -20,5 +20,5 @@ export declare type CheckboxProps = CheckboxInputProps & CheckboxCustomProps;
  * - A checkbox control has two primary states: selected and unselected. If required, there's an additional visual state for indeterminate (usually for a parent checkbox, when some children checkboxes are selected, but not all of them)
  * - Checkboxes require the use of a button to apply the settings once they are selected
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLInputElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & Pick<React.InputHTMLAttributes<HTMLInputElement>, "required" | "disabled" | "onChange" | "defaultChecked" | "autoFocus" | "checked"> & CheckboxCustomProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<React.InputHTMLAttributes<HTMLInputElement>, "required" | "disabled" | "defaultChecked" | "onChange" | "autoFocus" | "checked"> & CheckboxCustomProps & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/cjs/ClickAwayContainer/ClickAwayContainer.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ClickAwayContainer = exports.useClickAwayContext = exports.ClickAwayContext = void 0;
+exports.useClickAwayContext = exports["default"] = exports.ClickAwayContext = exports.ClickAwayContainer = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 

package/cjs/DatePicker/DatePicker/datePickerReducer.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.datePickerReducer = exports.initDatePickerReducer = exports.DatePickerActionTypes = void 0;
+exports.initDatePickerReducer = exports.datePickerReducer = exports.DatePickerActionTypes = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/cjs/DatePicker/DateRangePicker/dateRangePickerReducer.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dateRangePickerReducer = exports.initDateRangePickerReducer = exports.DateRangePickerActionTypes = void 0;
+exports.initDateRangePickerReducer = exports.dateRangePickerReducer = exports.DateRangePickerActionTypes = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/cjs/DatePicker/DateRangePicker/dateRangePickerTimeRange.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isPartialTimeRange = exports.isCompleteTimeRange = exports.isEmptyTimeRange = void 0;
+exports.isPartialTimeRange = exports.isEmptyTimeRange = exports.isCompleteTimeRange = void 0;
 
 var isEmptyTimeRange = function isEmptyTimeRange(range) {
   return Boolean(range && !(range.start || range.end));

package/cjs/DatePicker/utils.d.ts

@@ -1 +1 @@
-export declare const formatDate: (date: number | Date) => string;
+export declare const formatDate: (date: Date | number) => string;

package/cjs/Dropdown/Dropdown.js

@@ -144,7 +144,7 @@ var Dropdown = function Dropdown(_ref) {
   }), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
     fullBleed: true,
     elevation: "300",
-    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col py-1"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col py-1 text-grey-900"])))
   }, children, footer ? /*#__PURE__*/_react["default"].createElement(_DropdownFooterItem["default"], null, footer) : null))), document.body)));
 };
 

package/cjs/Dropdown/DropdownContext.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.useDropdownContext = exports.DropdownContext = void 0;
+exports.useDropdownContext = exports["default"] = exports.DropdownContext = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 

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

@@ -1,6 +1,4 @@
 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;

package/cjs/Dropdown/components/DropdownCollapsibleItem/DropdownCollapsibleItem.js

@@ -21,7 +21,7 @@ var _utils = require("../../../utils");
 
 var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
 
-var _ = require(".");
+var _DropdownCollapsibleItemsGroupContext = require("./DropdownCollapsibleItemsGroupContext");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
@@ -36,7 +36,7 @@ var DropdownCollapsibleItem = function DropdownCollapsibleItem(_ref) {
       _onClick = _ref.onClick,
       children = _ref.children;
 
-  var _useDropdownCollapsib = (0, _.useDropdownCollapsibleItemsGroup)(),
+  var _useDropdownCollapsib = (0, _DropdownCollapsibleItemsGroupContext.useDropdownCollapsibleItemsGroup)(),
       expandedItems = _useDropdownCollapsib.expandedItems,
       onItemClick = _useDropdownCollapsib.onItemClick;
 
@@ -66,7 +66,7 @@ var DropdownCollapsibleItem = function DropdownCollapsibleItem(_ref) {
     className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"]))),
     size: "1.25em"
   })), isExpanded && /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-50 border-l-2 border-grey-300"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-50 border-l-2 border-grey-300 typo-subdued"])))
   }, children));
 };
 

package/cjs/Dropdown/useDropdownItemProps.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.useDropdownItemProps = void 0;
+exports.useDropdownItemProps = exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -21,7 +21,7 @@ var useDropdownItemProps = function useDropdownItemProps(props) {
   var _useDropdownContext = (0, _DropdownContext.useDropdownContext)(),
       showMenu = _useDropdownContext.showMenu;
 
-  var className = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n      flex items-center\n      min-h-10 px-4 text-left\n      focus:no-underline hover:no-underline\n      ", "\n    "])), props.disabled ? "text-grey-300 cursor-not-allowed" : "text-grey-900 hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer"), props.className);
+  var className = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n      flex items-center\n      min-h-10 px-4 text-left\n      focus:no-underline hover:no-underline\n      ", "\n    "])), props.disabled ? "text-grey-300 cursor-not-allowed" : "text-inherit hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer"), props.className);
   return {
     className: className,
     onClick: props.disabled ? function (evt) {

package/cjs/Field/useFieldState.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.useFieldState = void 0;
+exports.useFieldState = exports["default"] = void 0;
 
 var _react = require("react");
 

package/cjs/Link/Link.d.ts

@@ -5,7 +5,7 @@ export declare type LinkProps = {
     endIcon?: IconComponentType;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
 export declare const Link: React.ForwardRefExoticComponent<{
-    startIcon?: React.ComponentClass<import("react-feather").IconProps, any> | React.FunctionComponent<import("react-feather").IconProps> | undefined;
-    endIcon?: React.ComponentClass<import("react-feather").IconProps, any> | React.FunctionComponent<import("react-feather").IconProps> | undefined;
+    startIcon?: IconComponentType | undefined;
+    endIcon?: IconComponentType | undefined;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/cjs/Modal/Modal.js

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

package/cjs/Modal/Modal.tailwind.js

@@ -26,11 +26,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/cjs/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/cjs/Modal/components/ModalSection.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ModalSection = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+
+var _templateObject;
+
+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["default"].createElement("section", {
+    className: (0, _classnames["default"])(fullBleed && (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["-mx-10"]))), className)
+  }, children);
+};
+
+exports.ModalSection = ModalSection;
+var _default = ModalSection;
+exports["default"] = _default;

package/cjs/Modal/index.d.ts

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

package/cjs/Modal/index.js

@@ -27,6 +27,34 @@ Object.keys(_Modal).forEach(function (key) {
   });
 });
 
+var _ModalFooter = require("./components/ModalFooter");
+
+Object.keys(_ModalFooter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ModalFooter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ModalFooter[key];
+    }
+  });
+});
+
+var _ModalSection = require("./components/ModalSection");
+
+Object.keys(_ModalSection).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ModalSection[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ModalSection[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/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/cjs/Pagination/CompactPagination/CompactPagination.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isIndeterminateCompactPaginationProps = exports.isDeterminateCompactPaginationProps = exports["default"] = exports.CompactPagination = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactFeather = require("react-feather");
+
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+
+var _Button = require("../../Button");
+
+var _templateObject, _templateObject2;
+
+var isDeterminateCompactPaginationProps = function isDeterminateCompactPaginationProps(props) {
+  return "nbPages" in props;
+};
+
+exports.isDeterminateCompactPaginationProps = isDeterminateCompactPaginationProps;
+
+var isIndeterminateCompactPaginationProps = function isIndeterminateCompactPaginationProps(props) {
+  return !isDeterminateCompactPaginationProps(props);
+};
+
+exports.isIndeterminateCompactPaginationProps = isIndeterminateCompactPaginationProps;
+
+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["default"].createElement("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center space-x-2"])))
+  }, props.showGoToFirstPage && /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
+    icon: _reactFeather.ChevronsLeft,
+    title: "Go to first page",
+    onClick: function onClick() {
+      return props.onChange(1);
+    },
+    disabled: isFirstPage
+  }), /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
+    icon: _reactFeather.ArrowLeft,
+    title: "Go to previous page",
+    onClick: function onClick() {
+      return props.onChange(props.currentPage - 1);
+    },
+    disabled: isFirstPage
+  }), label && /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["inline-block text-center tabular-nums px-2"])))
+  }, label), /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
+    icon: _reactFeather.ArrowRight,
+    title: "Go to next page",
+    onClick: function onClick() {
+      return props.onChange(props.currentPage + 1);
+    },
+    disabled: isLastPage
+  }), isDeterminateCompactPaginationProps(props) && props.showGoToLastPage && /*#__PURE__*/_react["default"].createElement(_Button.IconButton, {
+    icon: _reactFeather.ChevronsRight,
+    title: "Go to last page",
+    onClick: function onClick() {
+      return props.onChange(props.nbPages);
+    },
+    disabled: isLastPage
+  }));
+};
+
+exports.CompactPagination = CompactPagination;
+var _default = CompactPagination;
+exports["default"] = _default;

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

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