@algolia/satellite 1.0.0-beta.133 → 1.0.0-beta.136

package/cjs/DatePicker/DatePicker.tailwind.js

@@ -4,18 +4,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var datePickerPlugin = function datePickerPlugin(_ref) {
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+
+var datePickerPlugin = plugin(function (_ref) {
   var _DayPickerDay, _DayPickerDay3, _addComponents;
 
   var addComponents = _ref.addComponents,
       theme = _ref.theme,
       prefix = _ref.prefix;
+
+  /** @type {string} */
   var defaultRadius = theme("borderRadius.DEFAULT");
-  var nebula600 = theme("colors.nebula.600");
-  var nebula200 = theme("colors.nebula.200");
+  /** @type {string} */
+
+  var accent600 = theme("colors.accent.600");
+  /** @type {string} */
+
+  var accent200 = theme("colors.accent.200");
 
   var not = function not() {
     for (var _len = arguments.length, modifiers = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -55,13 +61,13 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
         position: "absolute",
         backgroundColor: theme("colors.blue.200"),
         border: "1px solid ".concat(theme("colors.blue.300")),
-        borderRadius: 9999,
-        width: 32,
-        height: 32,
+        borderRadius: "9999px",
+        width: "32px",
+        height: "32px",
         left: "50%",
         top: "50%",
         transform: "translate(-50%, -50%)",
-        zIndex: -1
+        zIndex: "-1"
       }
     }), (0, _defineProperty2["default"])(_DayPickerDay, "&--selected".concat(not("outside")), {
       color: theme("colors.white")
@@ -70,22 +76,22 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
     ".DayPicker-Day": (0, _defineProperty2["default"])({
       borderRadius: defaultRadius,
       "&--today": {
-        color: nebula600
+        color: accent600
       }
     }, "&--selected".concat(not("outside")), {
-      backgroundColor: nebula600,
+      backgroundColor: accent600,
       "&:hover": {
-        backgroundColor: nebula600
+        backgroundColor: accent600
       }
     })
   }, "&--selected".concat(not("outside")), {
-    backgroundColor: nebula600,
+    backgroundColor: accent600,
     "&:hover": {
-      backgroundColor: nebula600
+      backgroundColor: accent600
     }
   })), (0, _defineProperty2["default"])(_addComponents, prefix(".date-range-picker"), {
     "& .DayPicker-Day": (_DayPickerDay3 = {}, (0, _defineProperty2["default"])(_DayPickerDay3, "&--displayedRanges".concat(not("outside")), {
-      borderRadius: 0,
+      borderRadius: "0px",
       backgroundColor: theme("colors.grey.200")
     }), (0, _defineProperty2["default"])(_DayPickerDay3, "&--displayedRangesStart".concat(not("outside")), {
       color: theme("colors.white"),
@@ -99,33 +105,32 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
       borderBottomRightRadius: defaultRadius
     }), (0, _defineProperty2["default"])(_DayPickerDay3, "&--selected".concat(not("outside")), {
       color: theme("colors.black"),
-      borderRadius: 0,
-      backgroundColor: nebula200,
+      borderRadius: "0px",
+      backgroundColor: accent200,
       "&:hover": {
-        backgroundColor: nebula200
+        backgroundColor: accent200
       }
     }), (0, _defineProperty2["default"])(_DayPickerDay3, "&--start".concat(not("outside")), {
       color: theme("colors.white"),
-      borderRadius: 0,
+      borderRadius: "0px",
       borderTopLeftRadius: defaultRadius,
       borderBottomLeftRadius: defaultRadius,
-      backgroundColor: nebula600,
+      backgroundColor: accent600,
       "&:hover": {
-        backgroundColor: nebula600
+        backgroundColor: accent600
       }
     }), (0, _defineProperty2["default"])(_DayPickerDay3, "&--end".concat(not("outside")), {
       color: theme("colors.white"),
-      borderRadius: 0,
+      borderRadius: "0px",
       borderTopRightRadius: defaultRadius,
       borderBottomRightRadius: defaultRadius,
-      backgroundColor: nebula600,
+      backgroundColor: accent600,
       "&:hover": {
-        backgroundColor: nebula600
+        backgroundColor: accent600
       }
     }), _DayPickerDay3)
   }), _addComponents), {
     respectPrefix: false
   });
-};
-
+});
 module.exports = datePickerPlugin;

package/cjs/DatePicker/DateRangePicker/DateRangePicker.js

@@ -7,16 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = require("react");
 
+var _Satellite = require("../../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
 var _Calendar = _interopRequireDefault(require("../components/Calendar"));
@@ -29,6 +31,8 @@ var _Modal = _interopRequireDefault(require("../components/Modal"));
 
 var _SidePanel = _interopRequireDefault(require("../components/SidePanel"));
 
+var _utils = require("../utils");
+
 var _DateRangePickerDisplay = _interopRequireDefault(require("./DateRangePickerDisplay"));
 
 var _dateRangePickerReducer = require("./dateRangePickerReducer");
@@ -50,6 +54,10 @@ var defaultValidator = function defaultValidator(_ref) {
   return (0, _dateRangePickerTimeRange.isCompleteTimeRange)(candidateRange) ? null : [new Error("Invalid time range")];
 };
 
+var DEFAULT_DATE_RANGE_PICKER_LOCALE = _objectSpread(_objectSpread({}, _utils.DEFAULT_DATE_PICKER_LOCALE), {}, {
+  openButton: "Enter a date period..."
+});
+
 var DateRangePicker = function DateRangePicker(_ref2) {
   var _validate, _displayedRange$start, _displayedRange$start2, _displayedRange$end, _displayOnlyRanges$ma, _state$hovered;
 
@@ -70,8 +78,11 @@ var DateRangePicker = function DateRangePicker(_ref2) {
       renderRightPanel = _ref2.renderRightPanel,
       buttonSize = _ref2.buttonSize,
       modalPlacement = _ref2.modalPlacement,
-      locale = _ref2.locale,
+      propsLocale = _ref2.locale,
       props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var contextLocale = (0, _Satellite.useLocale)("datePicker");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DATE_RANGE_PICKER_LOCALE), contextLocale), propsLocale);
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),

package/cjs/DatePicker/DateRangePicker/DateRangePickerDisplay.d.ts

@@ -1,4 +1,5 @@
 import type { FunctionComponent } from "react";
+import type { WithRequiredProperty } from "../../types";
 import { DisplayProps } from "../components/Display";
 import type { DatePickerLocale } from "../types";
 import { DateRangePickerTimeRange } from "./dateRangePickerTimeRange";
@@ -7,7 +8,7 @@ export interface DateRangePickerDisplayProps {
     onClick: DisplayProps["onClick"];
     range: DateRangePickerTimeRange;
     buttonSize?: DisplayProps["size"];
-    locale?: DatePickerLocale;
+    locale: WithRequiredProperty<DatePickerLocale, "openButton">;
 }
 declare const DateRangePickerDisplay: FunctionComponent<DateRangePickerDisplayProps>;
 export default DateRangePickerDisplay;

package/cjs/DatePicker/DateRangePicker/DateRangePickerDisplay.js

@@ -41,7 +41,7 @@ var DateRangePickerDisplay = function DateRangePickerDisplay(_ref) {
         dateTime: range.end.toISOString(),
         children: (0, _utils.formatDate)(range.end)
       })]
-    }) : (locale === null || locale === void 0 ? void 0 : locale.openButton) || "Enter a date period..."
+    }) : locale.openButton
   });
 };
 

package/cjs/DatePicker/components/Calendar.d.ts

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from "react";
 import { DayPickerProps } from "react-day-picker";
+import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
 declare type ExcludedDayPickerProps = "captionElement" | "showOutsideDays" | "enableOutsideDaysClick" | "fixedWeeks" | "labels" | "navbarElement" | "onTodayButtonClick" | "pagedNavigation" | "renderDay" | "renderWeek" | "reverseMonths" | "showWeekNumbers" | "showWeekDays" | "todayButton" | "weekdayElement" | "weekdaysLong" | "weekdaysShort";
 export declare type EditableYearProps = {
@@ -10,7 +11,7 @@ export declare type EditableYearProps = {
     initialDate?: Date;
 };
 export declare type CalendarProps = Omit<Omit<DayPickerProps, "locale">, ExcludedDayPickerProps> & EditableYearProps & {
-    locale?: DatePickerLocale;
+    locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
 };
 declare const Calendar: FunctionComponent<CalendarProps>;
 export default Calendar;

package/cjs/DatePicker/components/FooterActions.d.ts

@@ -1,11 +1,12 @@
 import type { FunctionComponent } from "react";
 import { ButtonProps } from "../../Button";
+import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
 export interface FooterActionsProps {
     onCancel: ButtonProps["onClick"];
     onApply: ButtonProps["onClick"];
     disableApply: boolean;
-    locale?: DatePickerLocale;
+    locale: WithRequiredProperty<DatePickerLocale, "cancel" | "apply">;
 }
 declare const FooterActions: FunctionComponent<FooterActionsProps>;
 export default FooterActions;

package/cjs/DatePicker/components/FooterActions.js

@@ -27,12 +27,12 @@ var FooterActions = function FooterActions(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
       onClick: onCancel,
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2"]))),
-      children: (locale === null || locale === void 0 ? void 0 : locale.cancel) || "Cancel"
+      children: locale.cancel
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
       disabled: disableApply,
       onClick: onApply,
       variant: "primary",
-      children: (locale === null || locale === void 0 ? void 0 : locale.apply) || "Apply"
+      children: locale.apply
     })]
   });
 };

package/cjs/DatePicker/components/Modal.js

@@ -15,16 +15,16 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
-var _reactDom = require("react-dom");
-
 var _reactPopper = require("react-popper");
 
 var _ClickAwayContainer = require("../../ClickAwayContainer");
 
+var _Satellite = require("../../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -53,6 +53,7 @@ var Modal = function Modal(_ref) {
       _ref$modifiers = _ref.modifiers,
       modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
       className = _ref.className;
+  var createPortal = (0, _Satellite.useCreatePortal)();
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -71,19 +72,19 @@ var Modal = function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
+  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
     element: datePickerElement,
     onClickAway: function onClickAway(evt) {
       return _onClickAway === null || _onClickAway === void 0 ? void 0 : _onClickAway(evt);
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
       ref: setDatePickerElement,
-      className: (0, _classnames["default"])(className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["z-dropdown bg-white shadow-z400"]))))
+      className: (0, _clsx["default"])(className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["z-dropdown bg-white shadow-z400"]))))
     }, attributes.popper), {}, {
       style: styles.popper,
       children: children
     }))
-  }), document.body);
+  }));
 };
 
 var _default = Modal;

package/cjs/DatePicker/components/NavBar.d.ts

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from "react";
 import type { NavbarElementProps } from "react-day-picker";
+import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
 export declare type NavBarYearProps = {
     editableYear?: false;
@@ -9,7 +10,7 @@ export declare type NavBarYearProps = {
     onYearChange: (year: number) => void;
 };
 export declare type NavBarProps = Omit<NavbarElementProps, "locale"> & NavBarYearProps & {
-    locale?: DatePickerLocale;
+    locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
 };
 declare const NavBar: FunctionComponent<NavBarProps>;
 export default NavBar;

package/cjs/DatePicker/components/NavBar.js

@@ -13,7 +13,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -55,17 +55,17 @@ var NavBar = function NavBar(_ref) {
     className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full top-3 left-0 pt-5 px-5 pb-2 flex justify-between"]))),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
       icon: _reactFeather.ChevronLeft,
-      title: (locale === null || locale === void 0 ? void 0 : locale.previousMonth) || "Previous month",
+      title: locale.previousMonth,
       onClick: function onClick() {
         return onPreviousClick();
       },
       disabled: !showPreviousButton
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex items-center text-center"])))),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex items-center text-center"])))),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["font-medium text-md"]))),
         children: [localeUtils.getMonths()[month.getMonth()], " ", props.editableYear ? /*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
-          className: (0, _classnames["default"])("DayPicker-Year", (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["pl-0.5 font-medium outline-none border-transparent border-2 rounded focus:border-nebula-600 focus:shadow-z100 appearance-none"])))),
+          className: (0, _clsx["default"])("DayPicker-Year", (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["pl-0.5 font-medium outline-none border-transparent border-2 rounded focus:border-accent-600 focus:shadow-z100 appearance-none"])))),
           value: month.getFullYear(),
           onChange: function onChange(e) {
             return props.onYearChange(parseInt(e.currentTarget.value));
@@ -80,7 +80,7 @@ var NavBar = function NavBar(_ref) {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
       icon: _reactFeather.ChevronRight,
-      title: (locale === null || locale === void 0 ? void 0 : locale.nextMonth) || "Next month",
+      title: locale.nextMonth,
       onClick: function onClick() {
         return onNextClick();
       },

package/cjs/DatePicker/utils.d.ts

@@ -1 +1,3 @@
+import type { DatePickerLocale } from "./types";
 export declare const formatDate: (date: Date | number) => string;
+export declare const DEFAULT_DATE_PICKER_LOCALE: Required<DatePickerLocale>;

package/cjs/DatePicker/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatDate = void 0;
+exports.formatDate = exports.DEFAULT_DATE_PICKER_LOCALE = void 0;
 
 var _format = _interopRequireDefault(require("date-fns/format"));
 
@@ -13,4 +13,12 @@ var formatDate = function formatDate(date) {
   return (0, _format["default"])(date, "MMM do, yyyy");
 };
 
-exports.formatDate = formatDate;
+exports.formatDate = formatDate;
+var DEFAULT_DATE_PICKER_LOCALE = {
+  apply: "Apply",
+  cancel: "Cancel",
+  openButton: "Enter a date...",
+  previousMonth: "Previous month",
+  nextMonth: "Next month"
+};
+exports.DEFAULT_DATE_PICKER_LOCALE = DEFAULT_DATE_PICKER_LOCALE;

package/cjs/Dropdown/Dropdown.d.ts

@@ -59,6 +59,6 @@ export declare const Dropdown: {
         children: ReactNode;
     }) => JSX.Element | null;
     Divider: () => JSX.Element;
-    Title: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+    Title: import("react").FunctionComponent<import("./components/DropdownTitle").DropdownTitleProps>;
 };
 export default Dropdown;

package/cjs/Dropdown/Dropdown.js

@@ -15,18 +15,18 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
-var _reactDom = require("react-dom");
-
 var _reactPopper = require("react-popper");
 
 var _Card = _interopRequireDefault(require("../Card"));
 
 var _ClickAwayContainer = require("../ClickAwayContainer");
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _DropdownButtonItem = _interopRequireDefault(require("./components/DropdownButtonItem"));
@@ -85,6 +85,7 @@ var Dropdown = function Dropdown(_ref) {
       renderTarget = _ref.renderTarget,
       renderFooter = _ref.renderFooter,
       children = _ref.children;
+  var createPortal = (0, _Satellite.useCreatePortal)();
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -130,7 +131,7 @@ var Dropdown = function Dropdown(_ref) {
         className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["inline-block leading-none"]))),
         ref: setTargetEl,
         children: target
-      }), showMenu && targetEl && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
+      }), showMenu && targetEl && createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
         element: menuContainerEl,
         onClickAway: function onClickAway(evt) {
           var isContainedInTarget = targetEl === null || targetEl === void 0 ? void 0 : targetEl.contains(evt.target);
@@ -141,7 +142,7 @@ var Dropdown = function Dropdown(_ref) {
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
           style: styles.popper,
-          className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown min-w-64 max-w-128"]))), menuClassName),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown min-w-64 max-w-128"]))), menuClassName),
           ref: setMenuContainerEl,
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
             fullBleed: true,
@@ -152,7 +153,7 @@ var Dropdown = function Dropdown(_ref) {
             }) : null]
           })
         }))
-      }), document.body)]
+      }))]
     })
   });
 };

package/cjs/Dropdown/DropdownButton.d.ts

@@ -5,6 +5,7 @@ export interface DropdownButtonProps extends Omit<ButtonProps<"button">, "title"
     /** Descriptive title for `Dropdown` */
     title: ReactNode;
     renderFooter?: (args: RenderTargetParams) => ReactNode;
+    children: ReactNode;
 }
 export declare const DropdownButton: FunctionComponent<DropdownButtonProps>;
 export default DropdownButton;

package/cjs/Dropdown/components/DropdownButtonItem.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -23,7 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3;
 
-var _excluded = ["children", "variant", "toggle", "startIcon"];
+var _excluded = ["toggle", "children", "variant", "startIcon"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -33,15 +33,15 @@ var DropdownButtonItem = function DropdownButtonItem(props) {
   var dropdownItemProps = (0, _useDropdownItemProps["default"])(props);
 
   var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
+      toggle = _props$dropdownItemPr.toggle,
       children = _props$dropdownItemPr.children,
       variant = _props$dropdownItemPr.variant,
-      toggle = _props$dropdownItemPr.toggle,
       StartIcon = _props$dropdownItemPr.startIcon,
       mergedProps = (0, _objectWithoutProperties2["default"])(_props$dropdownItemPr, _excluded);
 
   var showDestructiveVariant = !props.disabled && variant === "destructive";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", _objectSpread(_objectSpread({}, mergedProps), {}, {
-    className: (0, _classnames["default"])(mergedProps.className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full"])))),
+    className: (0, _clsx["default"])(mergedProps.className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full"])))),
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), showDestructiveVariant ? "text-red-700" : "text-grey-500"),
       size: "1rem"

package/cjs/Dropdown/components/DropdownFooterItem.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -33,7 +33,7 @@ var DropdownFooterItem = function DropdownFooterItem(_ref) {
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   if (!children) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex bg-grey-100 -mb-1 items-center justify-between px-4 py-3 border-t border-grey-200"]))), className)
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex bg-grey-100 -mb-1 items-center justify-between px-4 py-3 border-t border-grey-200"]))), className)
   }, props), {}, {
     children: children
   }));

package/cjs/Dropdown/components/DropdownLinkItem.js

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -44,11 +44,10 @@ var DropdownLinkItem = function DropdownLinkItem(props) {
       mergedProps = (0, _objectWithoutProperties2["default"])(_props$dropdownItemPr, _excluded);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({
-    tabIndex: disabled ? -1 : undefined,
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), className)
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), className)
   }, mergedProps), {}, {
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 flex-shrink-0 text-grey-500"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 text-grey-500"]))),
       size: "1rem"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full truncate"]))),

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

@@ -1,4 +1,6 @@
-import type { FunctionComponent } from "react";
-export declare type DropdownTitleProps = JSX.IntrinsicElements["h4"];
+import type { FunctionComponent, ReactNode } from "react";
+export declare type DropdownTitleProps = JSX.IntrinsicElements["h4"] & {
+    children: ReactNode;
+};
 export declare const DropdownTitle: FunctionComponent<DropdownTitleProps>;
 export default DropdownTitle;

package/cjs/Dropdown/components/DropdownTitle.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -31,7 +31,7 @@ var DropdownTitle = function DropdownTitle(_ref) {
   var className = _ref.className,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", _objectSpread(_objectSpread({}, props), {}, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center h-10 px-4\n          border-grey-100 border-b border-t first:border-t-0\n          display-subheading"]))), className)
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center h-10 px-4\n          border-grey-100 border-b border-t first:border-t-0\n          display-subheading"]))), className)
   }));
 };
 

package/cjs/Dropdown/components/DropdownToggleItem.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -42,15 +42,15 @@ var DropdownToggleItem = function DropdownToggleItem(props) {
       toggleProps = (0, _objectWithoutProperties2["default"])(_props$dropdownItemPr, _excluded);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), className),
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 flex-shrink-0 text-grey-500"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 text-grey-500"]))),
       size: "1rem"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex-1 truncate mr-4"]))),
       children: children
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, _objectSpread({
-      className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex-shrink-0"])))
+      className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"])))
     }, toggleProps))]
   });
 };

package/cjs/Dropdown/useDropdownItemProps.d.ts

@@ -6,8 +6,16 @@ export interface DropdownBaseItemProps<T extends HTMLElement = HTMLElement> {
     onClick?: EventHandler<MouseEvent<T>>;
 }
 export declare const useDropdownItemProps: <T extends HTMLElement = HTMLElement>(props: DropdownBaseItemProps<T>) => {
+    disabled: boolean;
+    "aria-disabled": boolean;
+    tabIndex: number;
+    onClick: undefined;
     className: string;
+} | {
+    disabled?: undefined;
+    "aria-disabled"?: undefined;
+    tabIndex?: undefined;
     onClick: (evt: MouseEvent<T, globalThis.MouseEvent>) => void;
-    disabled: boolean | undefined;
+    className: string;
 };
 export default useDropdownItemProps;