@algolia/satellite 1.0.0-beta.140 → 1.0.0-beta.142

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -45,6 +45,7 @@ export declare class AutoComplete<T extends Option = Option> extends Component<A
     state: State;
     inputContainerRef: HTMLDivElement | null;
     inputRef: HTMLInputElement | null;
+    menuWrapperRef: HTMLDivElement | null;
     componentDidUpdate(prevProps: AutoCompleteProps<T>): void;
     handleClearClick: () => void;
     handleFakeInputClick: () => void | null;

package/cjs/AutoComplete/AutoComplete.js

@@ -45,6 +45,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _Card = _interopRequireDefault(require("../Card"));
 
+var _ClickAwayContainer = require("../ClickAwayContainer");
+
 var _FieldStateContext = require("../Field/FieldStateContext");
 
 var _Satellite = require("../Satellite");
@@ -202,6 +204,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputContainerRef", null);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputRef", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "menuWrapperRef", null);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClearClick", function () {
       return _this.setState({
         inputValue: ""
@@ -524,47 +527,53 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
         strategy: "fixed",
         referenceElement: (_this$inputContainerR3 = _this.inputContainerRef) !== null && _this$inputContainerR3 !== void 0 ? _this$inputContainerR3 : undefined,
         modifiers: MENU_POPPER_MODFIERS,
+        innerRef: function innerRef(wrapperEl) {
+          return _this.menuWrapperRef = wrapperEl;
+        },
         children: function children(popper) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown"]))), menuClassName),
-            style: _objectSpread(_objectSpread({}, popper.style), dropdownStyle),
-            "data-popper-placement": popper.placement,
-            ref: popper.ref,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
-              fullBleed: true,
-              elevation: "300",
-              children: [results.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
-                className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["min-h-10"]))),
-                children: emptyState
-              })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollIndicator["default"], {
-                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"]))),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
-                  children: [results.slice(0, showAllResults ? Number.MAX_SAFE_INTEGER : maxResults).map(function (result, index) {
-                    return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", _objectSpread(_objectSpread({}, getItemProps({
-                      item: result,
-                      disabled: result.disabled,
-                      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")
-                    })), {}, {
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionItem, _objectSpread(_objectSpread({}, optionItemProps), {}, {
-                        highlighted: index === highlightedIndex,
-                        option: result,
-                        optionItemPrefix: _this.locale.optionItemPrefix
-                      }))
-                    }), result.value);
-                  }), extraResults > 0 && !showAllResults && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-                    className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["p-2 text-right"]))),
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
-                      variant: "subtle",
-                      size: "small",
-                      onMouseDown: _this.handleShowAllResults,
-                      children: _this.locale.showMoreButton(extraResults)
-                    })
-                  })]
-                }))
-              }), menuFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
-                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"]))),
-                children: menuFooter
-              })]
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
+            element: _this.menuWrapperRef,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown"]))), menuClassName),
+              style: _objectSpread(_objectSpread({}, popper.style), dropdownStyle),
+              "data-popper-placement": popper.placement,
+              ref: popper.ref,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
+                fullBleed: true,
+                elevation: "300",
+                children: [results.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+                  className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["min-h-10"]))),
+                  children: emptyState
+                })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollIndicator["default"], {
+                  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"]))),
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+                    children: [results.slice(0, showAllResults ? Number.MAX_SAFE_INTEGER : maxResults).map(function (result, index) {
+                      return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", _objectSpread(_objectSpread({}, getItemProps({
+                        item: result,
+                        disabled: result.disabled,
+                        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")
+                      })), {}, {
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionItem, _objectSpread(_objectSpread({}, optionItemProps), {}, {
+                          highlighted: index === highlightedIndex,
+                          option: result,
+                          optionItemPrefix: _this.locale.optionItemPrefix
+                        }))
+                      }), result.value);
+                    }), extraResults > 0 && !showAllResults && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                      className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["p-2 text-right"]))),
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+                        variant: "subtle",
+                        size: "small",
+                        onMouseDown: _this.handleShowAllResults,
+                        children: _this.locale.showMoreButton(extraResults)
+                      })
+                    })]
+                  }))
+                }), menuFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
+                  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"]))),
+                  children: menuFooter
+                })]
+              })
             })
           });
         }

package/cjs/Badge/Badge.d.ts

@@ -3,9 +3,9 @@ import type { AtLeastOne, ColorVariant, IconComponentType } from "../types";
 export declare type BadgeSizes = "default" | "small";
 export declare type BadgeVariants = ColorVariant | "pink";
 interface BaseBadgeProps extends HTMLAttributes<HTMLDivElement> {
-    /** @default grey */
+    /** @default "grey" */
     variant?: BadgeVariants;
-    /** @default default */
+    /** @default "default" */
     size?: BadgeSizes;
 }
 declare type BadgeContentProps = {

package/cjs/Banners/Alert/Alert.d.ts

@@ -9,11 +9,11 @@ export interface AlertProps {
     style?: CSSProperties;
     /** Descriptive title for `Alert` */
     title?: ReactNode;
-    /** @default grey */
+    /** @default "grey" */
     variant?: AlertColorVariant;
     /**
      * Usage context description
-     * @default section
+     * @default "section"
      */
     usageContext?: AlertContextType;
     icon?: IconComponentType;

package/cjs/Banners/Promote/Promote.js

@@ -82,6 +82,7 @@ var Promote = function Promote(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
     className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["relative flex"]))),
     fullBleed: true,
+    as: "section",
     children: [illustration && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-full min-w-24 max-w-64 flex items-center justify-center bg-grey-100"]))),
       children: illustration

package/cjs/Button/ButtonGroup.d.ts

@@ -1,6 +1,10 @@
 import type { FunctionComponent, ReactNode } from "react";
 export interface ButtonGroupProps {
     className?: string;
+    /**
+     * Specify HTML element `ButtonGroup` should be presented as.
+     * @default "div"
+     */
     as?: keyof JSX.IntrinsicElements;
     children: ReactNode;
 }

package/cjs/Button/types.d.ts

@@ -8,9 +8,9 @@ export declare type MinimalButtonProps = {
 export declare type AcceptableButtonType = "a" | "button" | ComponentType<MinimalButtonProps>;
 export declare type ExtractProps<T> = T extends "a" | "button" ? JSX.IntrinsicElements[T] : T extends ComponentType<infer P> ? P : never;
 export interface ButtonBaseProps {
-    /** @default neutral */
+    /** @default "neutral" */
     variant?: ButtonVariant;
-    /** @default medium */
+    /** @default "medium" */
     size?: ButtonSize;
     /** Left aligned icon */
     startIcon?: IconComponentType;

package/cjs/Card/Card.d.ts

@@ -2,12 +2,18 @@ import type { CSSProperties, ForwardRefExoticComponent, PropsWithoutRef, ReactNo
 import CardHeader from "./components/CardHeader";
 import CardTitle from "./components/CardTitle";
 export declare type CardElevation = "100" | "200" | "300" | "400" | "500";
+declare type CardAs = "section" | "aside" | "main" | "div" | "span";
 export interface CardProps {
     id?: string;
     /** @ignore */
     className?: string;
     /** @ignore */
     style?: CSSProperties;
+    /**
+     * Specify HTML element `Card` should be presented as.
+     * @default "div"
+     */
+    as?: CardAs;
     /** Should the content take up full full width of the `Card`. */
     fullBleed?: boolean;
     children: ReactNode;

package/cjs/Card/Card.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Card = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -19,10 +23,14 @@ var _CardHeader = _interopRequireDefault(require("./components/CardHeader"));
 
 var _CardTitle = _interopRequireDefault(require("./components/CardTitle"));
 
-var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "as", "elevation", "fullBleed"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var ELEVATION_CLASSNAMES = {
   "100": (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["card-z100"]))),
   "200": (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["card-z200"]))),
@@ -33,20 +41,17 @@ var ELEVATION_CLASSNAMES = {
 
 /** The `Card` is a useful component for containing content within a page. */
 var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var id = _ref.id,
-      className = _ref.className,
+  var className = _ref.className,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? "section" : _ref$as,
       _ref$elevation = _ref.elevation,
       elevation = _ref$elevation === void 0 ? "100" : _ref$elevation,
-      style = _ref.style,
       fullBleed = _ref.fullBleed,
-      children = _ref.children;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
-    id: id,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _react.createElement)(as, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["card ", " display-body"])), fullBleed && "card-fullbleed"), ELEVATION_CLASSNAMES[elevation], className),
-    style: style,
-    children: children
-  });
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["card ", " display-body"])), fullBleed && "card-fullbleed"), ELEVATION_CLASSNAMES[elevation], className)
+  }));
 });
 exports.Card = Card;
 Card.displayName = "Card";

package/cjs/Checkbox/Checkbox.d.ts

@@ -2,13 +2,13 @@ import type { HTMLAttributes, InputHTMLAttributes } from "react";
 declare type CheckboxCustomProps = {
     /**
      * `Checkbox` text position
-     * @default right
+     * @default "right"
      */
     textPosition?: "left" | "right";
     indeterminate?: boolean;
     /**
      * Color of the `Checkbox`
-     * @default accent.600
+     * @default "accent.600"
      */
     checkedColor?: string;
 };

package/cjs/ClickAwayContainer/ClickAwayContainer.d.ts

@@ -13,7 +13,7 @@ export interface ClickAwayContainerProps {
     /** Will be called if a click away event (mousedown, touchstart, focusin)
      * happens outside of the subtree tracked by this component instance
      * */
-    onClickAway(evt: Event): void;
+    onClickAway?(evt: Event): void;
     children?: ReactNode;
 }
 /**

package/cjs/ClickAwayContainer/ClickAwayContainer.js

@@ -78,7 +78,7 @@ var ClickAwayContainer = function ClickAwayContainer(_ref) {
     });
 
     if (!isEventInside) {
-      onClickAway(evt);
+      onClickAway === null || onClickAway === void 0 ? void 0 : onClickAway(evt);
     }
   }, [elementsSet, onClickAway]);
   (0, _useClickAway["default"])(fakeElementRef, handleClickAway, AWAY_EVENTS);

package/cjs/DatePicker/DatePicker/DatePicker.d.ts

@@ -17,7 +17,7 @@ interface RenderTargetParams {
     isOpen: boolean;
 }
 export declare type DatePickerProps = {
-    calendarProps?: Pick<CalendarProps, "fromMonth" | "toMonth" | "disabledDays">;
+    calendarProps?: Pick<CalendarProps, "fromMonth" | "toMonth" | "disabled">;
     onOpen?: DisplayProps["onClick"];
     onChange?: (value: Date | null) => void;
     onSubmit?: (event: MouseEvent<HTMLButtonElement>, value: Date | null) => void;

package/cjs/DatePicker/DatePicker/DatePicker.js

@@ -119,7 +119,8 @@ var DatePicker = function DatePicker(props) {
     } : {
       editableYear: false
     };
-  }, [props]);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       ref: setTargetElement,
@@ -152,9 +153,11 @@ var DatePicker = function DatePicker(props) {
         className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar["default"], _objectSpread(_objectSpread(_objectSpread({
-            numberOfMonths: 1
+            mode: "single",
+            numberOfMonths: 1,
+            defaultMonth: value !== null && value !== void 0 ? value : undefined
           }, (_props$calendarProps = props === null || props === void 0 ? void 0 : props.calendarProps) !== null && _props$calendarProps !== void 0 ? _props$calendarProps : {}), {}, {
-            selectedDays: value !== null && value !== void 0 ? value : undefined,
+            selected: value !== null && value !== void 0 ? value : undefined,
             onDayClick: handleDayClick
           }, yearProps), {}, {
             locale: locale

package/cjs/DatePicker/DatePicker.tailwind.js

@@ -8,7 +8,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var plugin = require("tailwindcss/plugin");
 
 var datePickerPlugin = plugin(function (_ref) {
-  var _DayPickerDay, _DayPickerDay3, _addComponents;
+  var _rdpDay, _rdpDay2, _rdpDay4, _addComponents;
 
   var addComponents = _ref.addComponents,
       theme = _ref.theme,
@@ -29,12 +29,12 @@ var datePickerPlugin = plugin(function (_ref) {
     }
 
     return modifiers.map(function (modifier) {
-      return ":not(.DayPicker-Day--".concat(modifier, ")");
+      return ":not(.rdp-day_".concat(modifier, ")");
     }).join("");
   };
 
   addComponents((_addComponents = {
-    ".DayPicker-Year": {
+    ".rdp-year": {
       // ChevronDown svg from react-feather,
       backgroundImage: 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>\')',
       backgroundRepeat: "no-repeat",
@@ -42,17 +42,69 @@ var datePickerPlugin = plugin(function (_ref) {
       backgroundPositionY: "5px",
       paddingRight: "1rem"
     },
-    ".DayPicker-Month": {
-      marginTop: "0rem"
+    ".rdp-caption_end": {
+      marginLeft: "1em",
+      marginRight: "0"
+    },
+    ".rdp-caption_start": {
+      marginLeft: "0",
+      marginRight: "1em"
     }
   }, (0, _defineProperty2["default"])(_addComponents, prefix(".date-picker, .date-range-picker"), {
-    "& .DayPicker-Months": {
-      // Hack to align dates on the same grid
-      alignItems: "start"
+    ".rdp[dir='rtl']": {
+      ".rdp-months": {
+        ".rdp-caption_start": {
+          "margin-left": "0",
+          marginLeft: "0",
+          marginRight: "1em"
+        },
+        ".rdp-caption_end": {
+          marginLeft: "1em",
+          marginRight: "0"
+        }
+      },
+      ".rdp-day": (_rdpDay = {}, (0, _defineProperty2["default"])(_rdpDay, "&_displayedRanges".concat(not("outside")), {
+        borderRadius: "0px",
+        backgroundColor: theme("colors.grey.200")
+      }), (0, _defineProperty2["default"])(_rdpDay, "&_displayedRangesStart".concat(not("outside")), {
+        color: theme("colors.white"),
+        backgroundColor: theme("colors.grey.600"),
+        borderTopRightRadius: defaultRadius,
+        borderBottomRightRadius: defaultRadius
+      }), (0, _defineProperty2["default"])(_rdpDay, "&_displayedRangesEnd".concat(not("outside")), {
+        color: theme("colors.white"),
+        backgroundColor: theme("colors.grey.600"),
+        borderTopLeftRadius: defaultRadius,
+        borderBottomLeftRadius: defaultRadius
+      }), (0, _defineProperty2["default"])(_rdpDay, "&_range_start".concat(not("outside")), {
+        color: theme("colors.white"),
+        borderRadius: "0px",
+        borderTopRightRadius: defaultRadius,
+        borderBottomRightRadius: defaultRadius,
+        backgroundColor: accent600,
+        "&:hover": {
+          backgroundColor: accent600
+        }
+      }), (0, _defineProperty2["default"])(_rdpDay, "&_range_end".concat(not("outside")), {
+        color: theme("colors.white"),
+        borderRadius: "0px",
+        borderTopLeftRadius: defaultRadius,
+        borderBottomLeftRadius: defaultRadius,
+        backgroundColor: accent600,
+        "&:hover": {
+          backgroundColor: accent600
+        }
+      }), _rdpDay)
+    },
+    "& .rdp-head_cell": {
+      textTransform: "capitalize",
+      fontWeight: "normal",
+      fontSize: "0.95em",
+      color: theme("colors.grey.500")
     },
-    "& .DayPicker-Day": (_DayPickerDay = {
+    "& .rdp-day": (_rdpDay2 = {
       borderRadius: defaultRadius
-    }, (0, _defineProperty2["default"])(_DayPickerDay, "&--today".concat(not("outside")), {
+    }, (0, _defineProperty2["default"])(_rdpDay2, "&_today".concat(not("outside")), {
       color: theme("colors.grey.900"),
       position: "relative",
       "&:before": {
@@ -69,48 +121,54 @@ var datePickerPlugin = plugin(function (_ref) {
         transform: "translate(-50%, -50%)",
         zIndex: "-1"
       }
-    }), (0, _defineProperty2["default"])(_DayPickerDay, "&--selected".concat(not("outside")), {
+    }), (0, _defineProperty2["default"])(_rdpDay2, "&_selected".concat(not("outside")), {
       color: theme("colors.white")
-    }), _DayPickerDay)
+    }), _rdpDay2)
   }), (0, _defineProperty2["default"])(_addComponents, prefix(".date-picker"), (0, _defineProperty2["default"])({
-    ".DayPicker-Day": (0, _defineProperty2["default"])({
+    ".rdp-day": (0, _defineProperty2["default"])({
       borderRadius: defaultRadius,
-      "&--today": {
+      "&_today": {
         color: accent600
       }
-    }, "&--selected".concat(not("outside")), {
+    }, "&_selected".concat(not("outside")), {
       backgroundColor: accent600,
       "&:hover": {
         backgroundColor: accent600
+      },
+      "&:focus": {
+        border: "0px"
       }
     })
-  }, "&--selected".concat(not("outside")), {
+  }, "&_selected".concat(not("outside")), {
     backgroundColor: accent600,
     "&:hover": {
       backgroundColor: accent600
     }
   })), (0, _defineProperty2["default"])(_addComponents, prefix(".date-range-picker"), {
-    "& .DayPicker-Day": (_DayPickerDay3 = {}, (0, _defineProperty2["default"])(_DayPickerDay3, "&--displayedRanges".concat(not("outside")), {
+    "& .rdp-day": (_rdpDay4 = {}, (0, _defineProperty2["default"])(_rdpDay4, "&_displayedRanges".concat(not("outside")), {
       borderRadius: "0px",
       backgroundColor: theme("colors.grey.200")
-    }), (0, _defineProperty2["default"])(_DayPickerDay3, "&--displayedRangesStart".concat(not("outside")), {
+    }), (0, _defineProperty2["default"])(_rdpDay4, "&_displayedRangesStart".concat(not("outside")), {
       color: theme("colors.white"),
       backgroundColor: theme("colors.grey.600"),
       borderTopLeftRadius: defaultRadius,
       borderBottomLeftRadius: defaultRadius
-    }), (0, _defineProperty2["default"])(_DayPickerDay3, "&--displayedRangesEnd".concat(not("outside")), {
+    }), (0, _defineProperty2["default"])(_rdpDay4, "&_displayedRangesEnd".concat(not("outside")), {
       color: theme("colors.white"),
       backgroundColor: theme("colors.grey.600"),
       borderTopRightRadius: defaultRadius,
       borderBottomRightRadius: defaultRadius
-    }), (0, _defineProperty2["default"])(_DayPickerDay3, "&--selected".concat(not("outside")), {
+    }), (0, _defineProperty2["default"])(_rdpDay4, "&_selected".concat(not("outside")), {
       color: theme("colors.black"),
       borderRadius: "0px",
       backgroundColor: accent200,
       "&:hover": {
         backgroundColor: accent200
+      },
+      "&:focus": {
+        border: "0px"
       }
-    }), (0, _defineProperty2["default"])(_DayPickerDay3, "&--start".concat(not("outside")), {
+    }), (0, _defineProperty2["default"])(_rdpDay4, "&_range_start".concat(not("outside")), {
       color: theme("colors.white"),
       borderRadius: "0px",
       borderTopLeftRadius: defaultRadius,
@@ -119,7 +177,7 @@ var datePickerPlugin = plugin(function (_ref) {
       "&:hover": {
         backgroundColor: accent600
       }
-    }), (0, _defineProperty2["default"])(_DayPickerDay3, "&--end".concat(not("outside")), {
+    }), (0, _defineProperty2["default"])(_rdpDay4, "&_range_end".concat(not("outside")), {
       color: theme("colors.white"),
       borderRadius: "0px",
       borderTopRightRadius: defaultRadius,
@@ -128,7 +186,7 @@ var datePickerPlugin = plugin(function (_ref) {
       "&:hover": {
         backgroundColor: accent600
       }
-    }), _DayPickerDay3)
+    }), _rdpDay4)
   }), _addComponents), {
     respectPrefix: false
   });

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

@@ -20,7 +20,7 @@ export declare type DateRangePickerProps = {
     id?: string;
     range: DateRangePickerTimeRange | null;
     displayOnlyRanges?: DateRangePickerTimeRange[];
-    calendarProps?: Pick<CalendarProps, "fromMonth" | "toMonth" | "disabledDays" | "numberOfMonths">;
+    calendarProps?: Pick<CalendarProps, "fromMonth" | "toMonth" | "disabled" | "numberOfMonths">;
     stateReducer?: (state: DateRangePickerReducerState, action: DateRangePickerReducerAction, defaultReducer: typeof dateRangePickerReducer) => DateRangePickerReducerState;
     initialState?: Partial<DateRangePickerReducerState>;
     onAction?: (action: DateRangePickerReducerAction, state: DateRangePickerReducerState) => void;
@@ -30,5 +30,5 @@ export declare type DateRangePickerProps = {
     renderRightPanel?: (args: RightSidePanelComponentArgs) => ReactNode;
     buttonSize?: DateRangePickerDisplayProps["buttonSize"];
 } & SharedDatePickerProps;
-declare const DateRangePicker: FunctionComponent<DateRangePickerProps>;
+export declare const DateRangePicker: FunctionComponent<DateRangePickerProps>;
 export default DateRangePicker;