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

package/cjs/Modal/Modal.js

@@ -160,9 +160,11 @@ var Modal = function Modal(_ref) {
       }, modalAccessibilityProps), {}, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
           ref: dialogRef,
+          as: "section",
           elevation: "500",
           className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
           fullBleed: true,
+          "aria-label": title || "Modal",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
             className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n                px-8 min-h-14\n                flex items-center justify-between  space-x-2\n                ", "\n                ", "\n              "])), title ? "border-b border-grey-100" : "justify-end", !title && hideCloseIcon && "hidden"),
             children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {

package/cjs/Tooltip/TooltipWrapper.js

@@ -145,7 +145,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   }, [cancelTransition, hideDelay, internalShow, scheduleTransition]);
   (0, _react.useEffect)(function () {
     if (isControlled || !showTooltip) return;
-    var handleMouseMouve = (0, _lodash["default"])(function (evt) {
+    var handleMouseMove = (0, _lodash["default"])(function (evt) {
       var target = evt.target;
       var isWithinBounds = [targetEl, interactive ? popperEl : null].some(function (ref) {
         return Boolean(ref && (ref === target || ref.contains(target)));
@@ -159,10 +159,10 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
     }, 16, {
       leading: true
     });
-    document.addEventListener("mousemove", handleMouseMouve);
+    document.addEventListener("mousemove", handleMouseMove);
     return function () {
-      handleMouseMouve.cancel();
-      document.removeEventListener("mousemove", handleMouseMouve);
+      handleMouseMove.cancel();
+      document.removeEventListener("mousemove", handleMouseMove);
     };
   }, [isControlled, popperEl, scheduleHideTooltip, scheduleShowTooltip, showTooltip, targetEl, interactive]);
   /**

package/cjs/styles/base.tailwind.js

@@ -19,6 +19,12 @@ var basePlugin = plugin(function (_ref) {
       /* Enable kerning and optional ligatures */
       "text-rendering": "optimizeLegibility"
     }
+  }); // Accent color
+
+  addBase({
+    ":root": {
+      "accent-color": theme("colors.accent.600")
+    }
   }); // Text selection
 
   addBase({
@@ -26,8 +32,7 @@ var basePlugin = plugin(function (_ref) {
       background: theme("colors.accent.600"),
       color: theme("colors.white")
     }
-  }); // TODO: Headers base styles ?
-  // Base styles for links
+  }); // Base styles for links
 
   addBase({
     a: {

package/esm/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/esm/AutoComplete/AutoComplete.js

@@ -36,6 +36,7 @@ import { X } from "react-feather";
 import { Popper } from "react-popper";
 import Button from "../Button";
 import Card from "../Card";
+import { ClickAwayContainer } from "../ClickAwayContainer";
 import { FieldStateContext } from "../Field/FieldStateContext";
 import { SatelliteContext } from "../Satellite";
 import ScrollIndicator from "../ScrollIndicator";
@@ -172,6 +173,8 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "inputRef", null);
 
+    _defineProperty(_assertThisInitialized(_this), "menuWrapperRef", null);
+
     _defineProperty(_assertThisInitialized(_this), "handleClearClick", function () {
       return _this.setState({
         inputValue: ""
@@ -508,47 +511,53 @@ export 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__*/_jsx("div", {
-            className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["z-dropdown"]))), menuClassName),
-            style: _objectSpread(_objectSpread({}, popper.style), dropdownStyle),
-            "data-popper-placement": popper.placement,
-            ref: popper.ref,
-            children: /*#__PURE__*/_jsxs(Card, {
-              fullBleed: true,
-              elevation: "300",
-              children: [results.length === 0 ? /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
-                className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["min-h-10"]))),
-                children: emptyState
-              })) : /*#__PURE__*/_jsx(ScrollIndicator, {
-                className: menuSize === "large" ? stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["max-h-64"]))),
-                children: /*#__PURE__*/_jsxs("ul", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
-                  children: [results.slice(0, showAllResults ? Number.MAX_SAFE_INTEGER : maxResults).map(function (result, index) {
-                    return /*#__PURE__*/_jsx("li", _objectSpread(_objectSpread({}, getItemProps({
-                      item: result,
-                      disabled: result.disabled,
-                      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")
-                    })), {}, {
-                      children: /*#__PURE__*/_jsx(OptionItem, _objectSpread(_objectSpread({}, optionItemProps), {}, {
-                        highlighted: index === highlightedIndex,
-                        option: result,
-                        optionItemPrefix: _this.locale.optionItemPrefix
-                      }))
-                    }), result.value);
-                  }), extraResults > 0 && !showAllResults && /*#__PURE__*/_jsx("li", {
-                    className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["p-2 text-right"]))),
-                    children: /*#__PURE__*/_jsx(Button, {
-                      variant: "subtle",
-                      size: "small",
-                      onMouseDown: _this.handleShowAllResults,
-                      children: _this.locale.showMoreButton(extraResults)
-                    })
-                  })]
-                }))
-              }), menuFooter && /*#__PURE__*/_jsx("footer", {
-                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"]))),
-                children: menuFooter
-              })]
+          return /*#__PURE__*/_jsx(ClickAwayContainer, {
+            element: _this.menuWrapperRef,
+            children: /*#__PURE__*/_jsx("div", {
+              className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["z-dropdown"]))), menuClassName),
+              style: _objectSpread(_objectSpread({}, popper.style), dropdownStyle),
+              "data-popper-placement": popper.placement,
+              ref: popper.ref,
+              children: /*#__PURE__*/_jsxs(Card, {
+                fullBleed: true,
+                elevation: "300",
+                children: [results.length === 0 ? /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+                  className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["min-h-10"]))),
+                  children: emptyState
+                })) : /*#__PURE__*/_jsx(ScrollIndicator, {
+                  className: menuSize === "large" ? stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["max-h-64"]))),
+                  children: /*#__PURE__*/_jsxs("ul", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+                    children: [results.slice(0, showAllResults ? Number.MAX_SAFE_INTEGER : maxResults).map(function (result, index) {
+                      return /*#__PURE__*/_jsx("li", _objectSpread(_objectSpread({}, getItemProps({
+                        item: result,
+                        disabled: result.disabled,
+                        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")
+                      })), {}, {
+                        children: /*#__PURE__*/_jsx(OptionItem, _objectSpread(_objectSpread({}, optionItemProps), {}, {
+                          highlighted: index === highlightedIndex,
+                          option: result,
+                          optionItemPrefix: _this.locale.optionItemPrefix
+                        }))
+                      }), result.value);
+                    }), extraResults > 0 && !showAllResults && /*#__PURE__*/_jsx("li", {
+                      className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["p-2 text-right"]))),
+                      children: /*#__PURE__*/_jsx(Button, {
+                        variant: "subtle",
+                        size: "small",
+                        onMouseDown: _this.handleShowAllResults,
+                        children: _this.locale.showMoreButton(extraResults)
+                      })
+                    })]
+                  }))
+                }), menuFooter && /*#__PURE__*/_jsx("footer", {
+                  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"]))),
+                  children: menuFooter
+                })]
+              })
             })
           });
         }

package/esm/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/esm/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/esm/Banners/Promote/Promote.js

@@ -68,6 +68,7 @@ export var Promote = function Promote(_ref) {
   return /*#__PURE__*/_jsxs(Card, {
     className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["relative flex"]))),
     fullBleed: true,
+    as: "section",
     children: [illustration && /*#__PURE__*/_jsx("div", {
       className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-full min-w-24 max-w-64 flex items-center justify-center bg-grey-100"]))),
       children: illustration

package/esm/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/esm/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/esm/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/esm/Card/Card.js

@@ -1,13 +1,19 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+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) { _defineProperty(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; }
+
 import cx from "clsx";
-import { forwardRef } from "react";
+import { createElement, forwardRef } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import CardHeader from "./components/CardHeader";
 import CardTitle from "./components/CardTitle";
-import { jsx as _jsx } from "react/jsx-runtime";
 var ELEVATION_CLASSNAMES = {
   "100": stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["card-z100"]))),
   "200": stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["card-z200"]))),
@@ -18,20 +24,18 @@ var ELEVATION_CLASSNAMES = {
 
 /** The `Card` is a useful component for containing content within a page. */
 export var Card = /*#__PURE__*/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__*/_jsx("section", {
-    id: id,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/createElement(as, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
-    className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["card ", " display-body"])), fullBleed && "card-fullbleed"), ELEVATION_CLASSNAMES[elevation], className),
-    style: style,
-    children: children
-  });
+    className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["card ", " display-body"])), fullBleed && "card-fullbleed"), ELEVATION_CLASSNAMES[elevation], className)
+  }));
 });
 Card.displayName = "Card";
 Card.Header = CardHeader;

package/esm/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/esm/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/esm/ClickAwayContainer/ClickAwayContainer.js

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

package/esm/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/esm/DatePicker/DatePicker/DatePicker.js

@@ -99,7 +99,8 @@ var DatePicker = function DatePicker(props) {
     } : {
       editableYear: false
     };
-  }, [props]);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props]);
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx("span", {
       ref: setTargetElement,
@@ -132,9 +133,11 @@ var DatePicker = function DatePicker(props) {
         className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex"]))),
         children: [/*#__PURE__*/_jsxs("div", {
           children: [/*#__PURE__*/_jsx(Calendar, _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/esm/DatePicker/DatePicker.tailwind.js

@@ -3,7 +3,7 @@ import _plugin from "tailwindcss/plugin";
 // @ts-check
 var plugin = _plugin;
 var datePickerPlugin = plugin(function (_ref) {
-  var _DayPickerDay, _DayPickerDay3, _addComponents;
+  var _rdpDay, _rdpDay2, _rdpDay4, _addComponents;
 
   var addComponents = _ref.addComponents,
       theme = _ref.theme,
@@ -24,12 +24,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",
@@ -37,17 +37,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"
     }
   }, _defineProperty(_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 = {}, _defineProperty(_rdpDay, "&_displayedRanges".concat(not("outside")), {
+        borderRadius: "0px",
+        backgroundColor: theme("colors.grey.200")
+      }), _defineProperty(_rdpDay, "&_displayedRangesStart".concat(not("outside")), {
+        color: theme("colors.white"),
+        backgroundColor: theme("colors.grey.600"),
+        borderTopRightRadius: defaultRadius,
+        borderBottomRightRadius: defaultRadius
+      }), _defineProperty(_rdpDay, "&_displayedRangesEnd".concat(not("outside")), {
+        color: theme("colors.white"),
+        backgroundColor: theme("colors.grey.600"),
+        borderTopLeftRadius: defaultRadius,
+        borderBottomLeftRadius: defaultRadius
+      }), _defineProperty(_rdpDay, "&_range_start".concat(not("outside")), {
+        color: theme("colors.white"),
+        borderRadius: "0px",
+        borderTopRightRadius: defaultRadius,
+        borderBottomRightRadius: defaultRadius,
+        backgroundColor: accent600,
+        "&:hover": {
+          backgroundColor: accent600
+        }
+      }), _defineProperty(_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
-    }, _defineProperty(_DayPickerDay, "&--today".concat(not("outside")), {
+    }, _defineProperty(_rdpDay2, "&_today".concat(not("outside")), {
       color: theme("colors.grey.900"),
       position: "relative",
       "&:before": {
@@ -64,48 +116,54 @@ var datePickerPlugin = plugin(function (_ref) {
         transform: "translate(-50%, -50%)",
         zIndex: "-1"
       }
-    }), _defineProperty(_DayPickerDay, "&--selected".concat(not("outside")), {
+    }), _defineProperty(_rdpDay2, "&_selected".concat(not("outside")), {
       color: theme("colors.white")
-    }), _DayPickerDay)
+    }), _rdpDay2)
   }), _defineProperty(_addComponents, prefix(".date-picker"), _defineProperty({
-    ".DayPicker-Day": _defineProperty({
+    ".rdp-day": _defineProperty({
       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
     }
   })), _defineProperty(_addComponents, prefix(".date-range-picker"), {
-    "& .DayPicker-Day": (_DayPickerDay3 = {}, _defineProperty(_DayPickerDay3, "&--displayedRanges".concat(not("outside")), {
+    "& .rdp-day": (_rdpDay4 = {}, _defineProperty(_rdpDay4, "&_displayedRanges".concat(not("outside")), {
       borderRadius: "0px",
       backgroundColor: theme("colors.grey.200")
-    }), _defineProperty(_DayPickerDay3, "&--displayedRangesStart".concat(not("outside")), {
+    }), _defineProperty(_rdpDay4, "&_displayedRangesStart".concat(not("outside")), {
       color: theme("colors.white"),
       backgroundColor: theme("colors.grey.600"),
       borderTopLeftRadius: defaultRadius,
       borderBottomLeftRadius: defaultRadius
-    }), _defineProperty(_DayPickerDay3, "&--displayedRangesEnd".concat(not("outside")), {
+    }), _defineProperty(_rdpDay4, "&_displayedRangesEnd".concat(not("outside")), {
       color: theme("colors.white"),
       backgroundColor: theme("colors.grey.600"),
       borderTopRightRadius: defaultRadius,
       borderBottomRightRadius: defaultRadius
-    }), _defineProperty(_DayPickerDay3, "&--selected".concat(not("outside")), {
+    }), _defineProperty(_rdpDay4, "&_selected".concat(not("outside")), {
       color: theme("colors.black"),
       borderRadius: "0px",
       backgroundColor: accent200,
       "&:hover": {
         backgroundColor: accent200
+      },
+      "&:focus": {
+        border: "0px"
       }
-    }), _defineProperty(_DayPickerDay3, "&--start".concat(not("outside")), {
+    }), _defineProperty(_rdpDay4, "&_range_start".concat(not("outside")), {
       color: theme("colors.white"),
       borderRadius: "0px",
       borderTopLeftRadius: defaultRadius,
@@ -114,7 +172,7 @@ var datePickerPlugin = plugin(function (_ref) {
       "&:hover": {
         backgroundColor: accent600
       }
-    }), _defineProperty(_DayPickerDay3, "&--end".concat(not("outside")), {
+    }), _defineProperty(_rdpDay4, "&_range_end".concat(not("outside")), {
       color: theme("colors.white"),
       borderRadius: "0px",
       borderTopRightRadius: defaultRadius,
@@ -123,7 +181,7 @@ var datePickerPlugin = plugin(function (_ref) {
       "&:hover": {
         backgroundColor: accent600
       }
-    }), _DayPickerDay3)
+    }), _rdpDay4)
   }), _addComponents), {
     respectPrefix: false
   });

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