@algolia/satellite 1.0.0-beta.120 → 1.0.0-beta.124

package/cjs/{Table → Tables/Table}/Table.js

@@ -17,14 +17,16 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _Footer = _interopRequireDefault(require("./components/Footer"));
+
+var _templateObject, _templateObject2, _templateObject3;
 
 var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight"];
 
 /**
- * Data tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
  *
  * #### Do
  *
@@ -52,13 +54,13 @@ var Table = function Table(_ref) {
       highlight = _ref$highlight === void 0 ? true : _ref$highlight,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["table-wrapper rounded text-grey-900 bg-white display-body"]))), className)
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["rounded text-grey-900 bg-white display-body"]))), className)
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["overflow-x-auto"])))
   }, /*#__PURE__*/_react["default"].createElement("table", (0, _extends2["default"])({}, props, {
     className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["table ", " ", ""])), hasActions && "table-with-actions", highlight && "table-with-highlight")
-  }))), footer && /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["table-footer ", ""])), smallFooter && "table-footer-small")
+  }))), footer && /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
+    size: smallFooter ? "small" : "default"
   }, footer));
 };
 

package/cjs/Tables/Table/Table.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = tablePlugin;
+/**
+ * @type {import('../../tailwind-types').TailwindPlugin}
+ */
+declare const tablePlugin: import('../../tailwind-types').TailwindPlugin;

package/cjs/{Table → Tables/Table}/Table.tailwind.js

@@ -1,20 +1,14 @@
 "use strict";
 
-// @ts-check
-var rgba = require("../styles/rgba"); // purgecss whitelist: th, td, tr
+// purgecss whitelist: th, td, tr
 
 /**
- * @type {import('../tailwind-types').TailwindPlugin}
+ * @type {import('../../tailwind-types').TailwindPlugin}
  */
-
-
 var tablePlugin = function tablePlugin(_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
-    ".table-wrapper": {
-      border: "1px solid ".concat(theme("colors.grey.200"))
-    },
     ".table": {
       width: "100%",
       borderCollapse: "collapse",
@@ -22,6 +16,9 @@ var tablePlugin = function tablePlugin(_ref) {
       "th, td": {
         padding: "14px 16px"
       },
+      thead: {
+        backgroundColor: theme("colors.grey.50")
+      },
       th: {
         borderBottom: "1px solid ".concat(theme("colors.grey.200")),
         fontWeight: "normal"
@@ -37,19 +34,8 @@ var tablePlugin = function tablePlugin(_ref) {
     },
     ".table-with-highlight": {
       "tr:hover td": {
-        backgroundColor: rgba(theme("colors.grey.100"), 0.6)
+        backgroundColor: theme("colors.grey.50")
       }
-    },
-    ".table-footer": {
-      backgroundColor: theme("colors.grey.100"),
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      color: theme("colors.grey.600"),
-      padding: "12px 16px"
-    },
-    ".table-footer-small": {
-      padding: "4px 16px"
     }
   });
 };

package/cjs/Tables/Table/components/Footer.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare type FooterSizes = "default" | "small";
+export interface FooterProps {
+    size?: FooterSizes;
+    children?: React.ReactNode;
+}
+export declare const Footer: ({ size, children }: FooterProps) => JSX.Element;
+export default Footer;

package/cjs/Tables/Table/components/Footer.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Footer = 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, _templateObject2, _templateObject3;
+
+var Footer = function Footer(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "default" : _ref$size,
+      children = _ref.children;
+  var SIZE_CLASSNAMES = {
+    "default": (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["py-3 px-4"]))),
+    small: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["py-1 px-4"])))
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-t border-grey-200 text-grey-600 flex items-center justify-center"]))), SIZE_CLASSNAMES[size])
+  }, children);
+};
+
+exports.Footer = Footer;
+var _default = Footer;
+exports["default"] = _default;

package/cjs/Tables/Table/index.d.ts

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

package/cjs/{Table → Tables/Table}/index.js

@@ -6,7 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {};
-exports["default"] = void 0;
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Table["default"];
+  }
+});
 
 var _Table = _interopRequireWildcard(require("./Table"));
 
@@ -24,7 +29,4 @@ Object.keys(_Table).forEach(function (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; }
-
-var _default = _Table["default"];
-exports["default"] = _default;
+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/Tables/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Table";
+export * from "./DataTable";
+export { default } from "./Table";

package/cjs/Tables/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Table["default"];
+  }
+});
+
+var _Table = _interopRequireWildcard(require("./Table"));
+
+Object.keys(_Table).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Table[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Table[key];
+    }
+  });
+});
+
+var _DataTable = require("./DataTable");
+
+Object.keys(_DataTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataTable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DataTable[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/index.d.ts

@@ -34,7 +34,7 @@ export * from "./Satellite";
 export * from "./Select";
 export * from "./Sidebar";
 export * from "./Switch";
-export * from "./Table";
+export * from "./Tables";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextArea";

package/cjs/index.js

@@ -492,16 +492,16 @@ Object.keys(_Switch).forEach(function (key) {
   });
 });
 
-var _Table = require("./Table");
+var _Tables = require("./Tables");
 
-Object.keys(_Table).forEach(function (key) {
+Object.keys(_Tables).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Table[key]) return;
+  if (key in exports && exports[key] === _Tables[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Table[key];
+      return _Tables[key];
     }
   });
 });

package/cjs/styles/tailwind.config.js

@@ -151,5 +151,5 @@ module.exports = {
     borderWidth: ["responsive", "first"],
     visibility: ["responsive", "group-hover"]
   },
-  plugins: [require("./base.tailwind"), typography.plugin, require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Flag/Flag.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../RangeSlider/RangeSlider.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Sidebar/Sidebar.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
+  plugins: [require("./base.tailwind"), typography.plugin, require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Flag/Flag.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../RangeSlider/RangeSlider.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Sidebar/Sidebar.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Tables/DataTable/DataTable.tailwind"), require("../Tables/Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
 };

package/cjs/utils/index.d.ts

@@ -4,4 +4,5 @@ export { range } from "./range";
 export { uniqBy } from "./uniqBy";
 export { uniqueId } from "./uniqueId";
 export { isNil } from "./isNil";
+export { toSentenceCase } from "./toSentenceCase";
 export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

package/cjs/utils/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "range", {
     return _range.range;
   }
 });
+Object.defineProperty(exports, "toSentenceCase", {
+  enumerable: true,
+  get: function get() {
+    return _toSentenceCase.toSentenceCase;
+  }
+});
 Object.defineProperty(exports, "uniqBy", {
   enumerable: true,
   get: function get() {
@@ -50,4 +56,6 @@ var _uniqBy = require("./uniqBy");
 
 var _uniqueId = require("./uniqueId");
 
-var _isNil = require("./isNil");
+var _isNil = require("./isNil");
+
+var _toSentenceCase = require("./toSentenceCase");

package/cjs/utils/toSentenceCase.d.ts

@@ -0,0 +1,3 @@
+/** Converts PascalCase and camelCase to Sentence case */
+export declare const toSentenceCase: (str: string) => string;
+export default toSentenceCase;

package/cjs/utils/toSentenceCase.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toSentenceCase = exports["default"] = void 0;
+
+var _capitalize = _interopRequireDefault(require("lodash/capitalize"));
+
+/** Converts PascalCase and camelCase to Sentence case */
+var toSentenceCase = function toSentenceCase(str) {
+  var firstChar = str.charAt(0);
+  var remainingChars = str.slice(1).replace(/\s/g, "").replace(/([A-Z]+)/g, "$1").replace(/([A-Z][a-z])/g, " $1").trim();
+  return (0, _capitalize["default"])("".concat(firstChar).concat(remainingChars));
+};
+
+exports.toSentenceCase = toSentenceCase;
+var _default = toSentenceCase;
+exports["default"] = _default;

package/esm/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

package/esm/AutoComplete/AutoComplete.js

@@ -10,7 +10,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -113,6 +113,10 @@ var defaultEmptyState = /*#__PURE__*/React.createElement(AutoCompleteEmptyState,
  *
  * 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
@@ -420,6 +424,7 @@ export 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,
@@ -468,26 +473,26 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
         }, results.length === 0 ? /*#__PURE__*/React.createElement("div", _extends({}, getMenuProps(), {
           className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["min-h-10"])))
         }), emptyState) : /*#__PURE__*/React.createElement(ScrollIndicator, {
-          className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["max-h-64"])))
+          className: menuSize === "large" ? stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["max-h-64"])))
         }, /*#__PURE__*/React.createElement("ul", getMenuProps(), results.slice(0, showAllResults ? Number.MAX_SAFE_INTEGER : maxResults).map(function (result, index) {
           return /*#__PURE__*/React.createElement("li", _extends({
             key: result.value
           }, getItemProps({
             item: result,
             disabled: result.disabled,
-            className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\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: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\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.createElement(OptionItem, _extends({}, optionItemProps, {
             highlighted: index === highlightedIndex,
             option: result
           })));
         }), extraResults > 0 && !showAllResults && /*#__PURE__*/React.createElement("li", {
-          className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-2 text-right"])))
+          className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["p-2 text-right"])))
         }, /*#__PURE__*/React.createElement(Button, {
           variant: "subtle",
           size: "small",
           onMouseDown: _this.handleShowAllResults
         }, "Show ", pluralize(extraResults, "result"), " more")))), menuFooter && /*#__PURE__*/React.createElement("footer", {
-          className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"])))
+          className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"])))
         }, menuFooter)));
       });
     });

package/esm/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/esm/Button/styles.d.ts

@@ -2,4 +2,4 @@ import { ButtonBaseProps, ButtonSize, ButtonVariant } from "./types";
 export declare const BUTTON_SIZE_CLASSNAMES: Record<ButtonSize, string>;
 export declare const BUTTON_LOADER_ICON_SIZES: Record<ButtonSize, number>;
 export declare const BUTTON_VARIANT_CLASSNAMES: Record<ButtonVariant, string>;
-export declare const getIconColorClassName: ({ disabled, variant }: ButtonBaseProps) => string;
+export declare const getIconColorClassName: ({ disabled, variant }: Pick<ButtonBaseProps, "disabled" | "variant">) => string;

package/esm/Checkbox/Checkbox.js

@@ -77,6 +77,7 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(CheckboxIcon, {
     className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["checkbox-icon"])))
   }), /*#__PURE__*/React.createElement("input", _extends({}, checkboxProps, {
+    "aria-checked": indeterminate ? "mixed" : isChecked,
     id: id,
     className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n              opacity-0 absolute inset-0 cursor-pointer\n              ", "\n            "])), disabled && "cursor-not-allowed"),
     type: "checkbox",

package/esm/DatePicker/DatePicker.tailwind.js

@@ -28,6 +28,10 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
       textAlign: "center"
     }
   }, _defineProperty(_addComponents, prefix(".date-picker, .date-range-picker"), {
+    "& .DayPicker-Months": {
+      // Hack to align dates on the same grid
+      alignItems: "start"
+    },
     "& .DayPicker-Day": (_DayPickerDay = {
       borderRadius: defaultRadius
     }, _defineProperty(_DayPickerDay, "&--today".concat(not("outside")), {
@@ -42,8 +46,9 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
         borderRadius: 9999,
         width: 32,
         height: 32,
-        left: 2,
-        top: 4,
+        left: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
         zIndex: -1
       }
     }), _defineProperty(_DayPickerDay, "&--selected".concat(not("outside")), {

package/esm/Dropdown/DropdownButton.d.ts

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 import { ButtonProps } from "../Button";
 import { RenderTargetParams } from "./Dropdown";
-export interface DropdownButtonProps extends Omit<ButtonProps<"button">, "title"> {
+export interface DropdownButtonProps extends Omit<ButtonProps<"button">, "title" | "endIcon"> {
     /** Title displayed in the `Dropdown` */
     title: React.ReactNode;
     renderFooter?: (args: RenderTargetParams) => React.ReactNode;

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

@@ -4,6 +4,7 @@ export declare type DotPaginationProps = {
     currentPage: number;
     onChange: (page: number) => void;
     nbPages: number;
+    size?: "small" | "medium";
 };
-export declare const DotPagination: ({ currentPage, onChange, nbPages }: DotPaginationProps) => JSX.Element;
+export declare const DotPagination: ({ currentPage, onChange, nbPages, size }: DotPaginationProps) => JSX.Element;
 export default DotPagination;

package/esm/Pagination/DotPagination/DotPagination.js

@@ -7,7 +7,9 @@ import stl from "../../styles/helpers/satellitePrefixer";
 export var DotPagination = function DotPagination(_ref) {
   var currentPage = _ref.currentPage,
       onChange = _ref.onChange,
-      nbPages = _ref.nbPages;
+      nbPages = _ref.nbPages,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "medium" : _ref$size;
   return /*#__PURE__*/React.createElement("ul", {
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex"])))
   }, new Array(nbPages).fill(undefined).map(function (_, idx) {
@@ -16,7 +18,7 @@ export var DotPagination = function DotPagination(_ref) {
       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"),
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              rounded-full mx-1\n              ", "\n              ", "\n            "])), currentPage === pageIdx ? "bg-accent-600" : "bg-grey-200", size === "medium" ? "h-3 w-3" : "h-2 w-2"),
       onClick: function onClick() {
         return onChange(pageIdx);
       }

package/esm/Pagination/Pagination/Pagination.js

@@ -23,6 +23,7 @@ var Group = function Group(_ref) {
       onChange = _ref.onChange;
   return /*#__PURE__*/React.createElement(React.Fragment, null, group.map(function (index) {
     return /*#__PURE__*/React.createElement(Button, {
+      "aria-label": "Go to page ".concat(index),
       key: index,
       variant: index === currentPage ? "primary" : "neutral",
       onClick: function onClick() {
@@ -63,6 +64,7 @@ export var Pagination = function Pagination(_ref2) {
   return /*#__PURE__*/React.createElement(ButtonGroup, {
     as: "nav"
   }, /*#__PURE__*/React.createElement(Button, {
+    "aria-label": "Go to previous page",
     disabled: currentPage === 1,
     onClick: function onClick() {
       return onChange(currentPage - 1);
@@ -82,6 +84,7 @@ export var Pagination = function Pagination(_ref2) {
     onChange: onChange,
     group: groups[2]
   }), /*#__PURE__*/React.createElement(Button, {
+    "aria-label": "Go to next page",
     disabled: currentPage === nbPages,
     onClick: function onClick() {
       return onChange(currentPage + 1);

package/esm/ProgressSpinner/ProgressSpinner.js

@@ -28,7 +28,7 @@ export var ProgressSpinner = function ProgressSpinner(_ref) {
     viewBox: "".concat(size / 2, " ").concat(size / 2, " ").concat(size, " ").concat(size),
     width: size,
     height: size
-  }), /*#__PURE__*/React.createElement("circle", {
+  }), /*#__PURE__*/React.createElement("title", null, "Loading spinner"), /*#__PURE__*/React.createElement("circle", {
     cx: size,
     cy: size,
     r: (size - thickness) / 2,

package/esm/Tables/DataTable/DataTable.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import type { ColumnDefinition, Row, Status, SelectMode, PaginationConfiguration, Sorting, DataConfiguration, GetItemId } from "./types";
+declare type CanSelectItem<Item> = (item: Item, idx: number) => boolean;
+export interface DataTableProps<Item> {
+    data: Item[];
+    itemId?: GetItemId<Item>;
+    pagination?: PaginationConfiguration;
+    sorting?: Sorting[];
+    onChange?(dataConfiguration: DataConfiguration): void;
+    status?: Status;
+    noDataContent?: React.ReactNode;
+    errorContent?: React.ReactNode;
+    columns: ColumnDefinition<Item>[];
+    selectMode?: SelectMode;
+    selection?: string[];
+    onSelectionChange?(rowId: string[]): void;
+    canSelectItem?: CanSelectItem<Item>;
+    canHoverRow?(row: Row<Item>): boolean;
+    onRowHoveredChanged?(row: Row<Item> | null): void;
+}
+/**
+ * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ *
+ * #### Do
+ *
+ * - Organize columns and rows based on the needs of your users. To help people read the table, order the columns by importance from left to right, with the key pieces of content opening the row
+ * - Include units of measurement symbols in the header so you don't need to repeat them throughout the columns
+ * - Indicate sorting capabilities of a column with a chevron in the cell header
+ * - Start by columns with highest value to the user, and continue with less important ones
+ *
+ * #### Do not
+ *
+ * - Center align text in cells
+ *
+ * ## Best practices
+ *
+ * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
+ * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
+ */
+export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, }: DataTableProps<Item>) => JSX.Element;
+export default DataTable;