@primer/components 0.0.0-2021103235619 → 0.0.0-2021104151625

package/lib/DatePicker/DatePickerAnchor.js

@@ -1,202 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatePickerAnchor = void 0;
-
-var _octiconsReact = require("@primer/octicons-react");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Button = _interopRequireWildcard(require("../Button"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _constants = require("../constants");
-
-var _StyledOcticon = _interopRequireDefault(require("../StyledOcticon"));
-
-var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
-
-var _TextInput = _interopRequireDefault(require("../TextInput"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _dateParser = require("./dateParser");
-
-var _ = require("..");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const DatePickerAnchorButton = (0, _styledComponents.default)(_Button.default).withConfig({
-  displayName: "DatePickerAnchor__DatePickerAnchorButton",
-  componentId: "sc-8gpb9d-0"
-})(["align-items:center;display:flex;flex-direction:row;justify-content:space-between;max-width:350px;overflow:hidden;& ", " ~ svg{margin-left:", ";}& svg ~ ", "{margin-left:", ";}"], _Text.default, (0, _constants.get)('space.2'), _Text.default, (0, _constants.get)('space.2'));
-
-const DatePickerAnchor = /*#__PURE__*/_react.default.forwardRef(({
-  onAction
-}, ref) => {
-  const {
-    configuration: {
-      anchorVariant,
-      iconPlacement,
-      placeholder,
-      variant
-    },
-    disabled,
-    formattedDate,
-    inputDate,
-    onDateInput
-  } = (0, _useDatePicker.default)();
-  const [inputValue, setInputValue] = (0, _react.useState)(formattedDate);
-  const inputRef = (0, _react.useRef)(null);
-  const [inputValid, setInputValid] = (0, _react.useState)(true);
-  const [inputFocused, setInputFocused] = (0, _react.useState)(false);
-  const keyPressHandler = (0, _react.useCallback)(event => {
-    if (disabled) {
-      return;
-    }
-
-    if ([' ', 'Enter'].includes(event.key)) {
-      onAction === null || onAction === void 0 ? void 0 : onAction(event);
-    }
-  }, [disabled, onAction]);
-  const clickHandler = (0, _react.useCallback)(event => {
-    if (disabled) {
-      return;
-    }
-
-    onAction === null || onAction === void 0 ? void 0 : onAction(event);
-  }, [disabled, onAction]);
-  (0, _react.useEffect)(() => {
-    if (document.activeElement !== inputRef.current) {
-      setInputValue(formattedDate);
-    }
-  }, [formattedDate]);
-  const onInputChangeHandler = (0, _react.useCallback)(e => {
-    const value = e.currentTarget.value;
-    setInputValue(value);
-
-    if (!value) {
-      return;
-    }
-
-    const parsedDate = (0, _dateParser.parseDate)(value, variant);
-    setInputValid(!!parsedDate);
-
-    if (parsedDate) {
-      onDateInput(parsedDate);
-    }
-  }, [onDateInput, variant]);
-
-  const onFocusHandler = () => {
-    setInputValue(inputDate);
-    setInputFocused(true);
-  };
-
-  const onBlurHandler = () => {
-    setInputValue(formattedDate);
-    setInputValid(true);
-    setInputFocused(false);
-  };
-
-  const inputSx = (0, _react.useMemo)(() => {
-    let sxObject = {};
-
-    if (iconPlacement === 'start') {
-      sxObject = { ...sxObject,
-        pl: 5,
-        pr: 2
-      };
-    } else if (iconPlacement === 'end') {
-      sxObject = { ...sxObject,
-        pl: 2,
-        pr: 5
-      };
-    }
-
-    return sxObject;
-  }, [iconPlacement]);
-
-  if (anchorVariant === 'input') {
-    const calendarButton = side => /*#__PURE__*/_react.default.createElement(_Button.ButtonInvisible, {
-      onClick: clickHandler,
-      sx: {
-        width: '32px',
-        px: '6px',
-        position: 'absolute',
-        [side]: '1px',
-        top: '1px',
-        bottom: '1px'
-      }
-    }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-      icon: _octiconsReact.CalendarIcon
-    }));
-
-    const iconSx = () => ({
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      right: iconPlacement === 'end' ? '36px' : '10px',
-      display: 'flex',
-      alignItems: 'center'
-    });
-
-    return /*#__PURE__*/_react.default.createElement(_Box.default, {
-      ref: ref,
-      sx: {
-        position: 'relative',
-        display: 'flex'
-      }
-    }, iconPlacement === 'start' && calendarButton('left'), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-      ref: inputRef,
-      placeholder: placeholder,
-      value: inputValue,
-      onChange: onInputChangeHandler,
-      sx: inputSx,
-      onBlur: onBlurHandler,
-      onFocus: onFocusHandler
-    }), /*#__PURE__*/_react.default.createElement(_Box.default, {
-      sx: iconSx()
-    }, inputValid && inputFocused && /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-      icon: _octiconsReact.CheckIcon,
-      color: "success.emphasis"
-    }), !inputValid && /*#__PURE__*/_react.default.createElement(_.Tooltip, {
-      direction: "s",
-      text: "Invalid entry. Please make sure you use the 'MM/DD/YYYY' format."
-    }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-      icon: _octiconsReact.AlertIcon,
-      color: "attention.emphasis"
-    }))), iconPlacement === 'end' && calendarButton('right'));
-  }
-
-  const calendarIcon = () => /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-    icon: _octiconsReact.CalendarIcon,
-    color: "fg.muted",
-    sx: {
-      my: '2px'
-    }
-  });
-
-  return /*#__PURE__*/_react.default.createElement(_Box.default, {
-    ref: ref
-  }, /*#__PURE__*/_react.default.createElement(DatePickerAnchorButton, {
-    onClick: clickHandler,
-    onKeyPress: keyPressHandler,
-    "aria-label": formattedDate
-  }, iconPlacement === 'start' && calendarIcon(), anchorVariant !== 'icon-only' && /*#__PURE__*/_react.default.createElement(_Text.default, {
-    sx: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    }
-  }, formattedDate), iconPlacement === 'end' && calendarIcon()));
-});
-
-exports.DatePickerAnchor = DatePickerAnchor;

package/lib/DatePicker/DatePickerOverlay.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { AnchoredOverlayProps } from '../AnchoredOverlay';
-export declare const DatePickerOverlay: React.FC<AnchoredOverlayProps>;

package/lib/DatePicker/DatePickerOverlay.js

@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatePickerOverlay = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
-
-var _AnchoredOverlay = require("../AnchoredOverlay");
-
-var _DatePickerPanel = require("./DatePickerPanel");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const DatePickerOverlay = ({
-  onClose,
-  ...rest
-}) => {
-  const {
-    dialogOpen,
-    onClose: onDatePickerClose,
-    setDialogOpen,
-    currentViewingDate
-  } = (0, _useDatePicker.default)();
-
-  const onOverlayClose = async gesture => {
-    if (!dialogOpen) {
-      setDialogOpen(true);
-      await onDatePickerClose();
-      setDialogOpen(false);
-      onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
-    }
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, _extends({}, rest, {
-    onClose: onOverlayClose,
-    focusTrapSettings: {
-      restoreFocusOnCleanUp: true
-    },
-    focusZoneSettings: {
-      disabled: true
-    },
-    "aria-modal": "true",
-    "aria-labelledby": `${currentViewingDate.getMonth()} ${currentViewingDate.getFullYear()}`,
-    "aria-live": "polite"
-  }), /*#__PURE__*/_react.default.createElement(_DatePickerPanel.DatePickerPanel, null));
-};
-
-exports.DatePickerOverlay = DatePickerOverlay;
-DatePickerOverlay.displayName = "DatePickerOverlay";

package/lib/DatePicker/DatePickerPanel.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const DatePickerPanel: () => JSX.Element;

package/lib/DatePicker/DatePickerPanel.js

@@ -1,363 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatePickerPanel = void 0;
-
-var _dateFns = require("date-fns");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _Month = require("./Month");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _constants = require("../constants");
-
-var _useDatePicker = _interopRequireWildcard(require("./useDatePicker"));
-
-var _octiconsReact = require("@primer/octicons-react");
-
-var _StyledOcticon = _interopRequireDefault(require("../StyledOcticon"));
-
-var _Button = _interopRequireWildcard(require("../Button"));
-
-var _sx = _interopRequireDefault(require("../sx"));
-
-var _useFocusZone = require("../hooks/useFocusZone");
-
-var _focusZone = require("../behaviors/focusZone");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
-
-const DatePickerPanelContainer = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "DatePickerPanel__DatePickerPanelContainer",
-  componentId: "sc-19upxpo-0"
-})(["align-items:stretch;display:flex;flex-direction:column;position:relative;"]);
-const DatePickerTopNav = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "DatePickerPanel__DatePickerTopNav",
-  componentId: "sc-19upxpo-1"
-})(["display:flex;justify-content:space-between;position:absolute;top:0;left:0;right:0;padding:", ";z-index:10;"], (0, _constants.get)('space.3'));
-const DatePickerPanelMonths = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "DatePickerPanel__DatePickerPanelMonths",
-  componentId: "sc-19upxpo-2"
-})(["align-items:flex-start;display:flex;flex-direction:row;gap:", ";margin-top:", ";padding:", ";position:relative;"], (0, _constants.get)('space.6'), (0, _constants.get)('space.1'), (0, _constants.get)('space.3'));
-const DatePickerPanelFooter = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "DatePickerPanel__DatePickerPanelFooter",
-  componentId: "sc-19upxpo-3"
-})(["align-items:flex-start;border-top:1px solid;border-top-color:", ";display:flex;gap:", ";padding-top:12px;padding-bottom:12px;padding-left:", ";padding-right:", ";flex-direction:row;justify-content:space-between;position:relative;"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.6'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'));
-const ArrowButton = (0, _styledComponents.default)(_Button.default).withConfig({
-  displayName: "DatePickerPanel__ArrowButton",
-  componentId: "sc-19upxpo-4"
-})(["width:40px;height:28px;"]);
-
-const Select = _styledComponents.default.select.withConfig({
-  displayName: "DatePickerPanel__Select",
-  componentId: "sc-19upxpo-5"
-})(["background:", ";border:0;color:", ";font-weight:600;", ";", ";", ";"], (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('colors.fg.default'), _constants.TYPOGRAPHY, _constants.COMMON, _sx.default);
-
-const Option = _styledComponents.default.option.withConfig({
-  displayName: "DatePickerPanel__Option",
-  componentId: "sc-19upxpo-6"
-})(["background:", ";border:0;color:", ";font-weight:400;padding:", " ", ";", ";", ";", ";"], (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), _constants.TYPOGRAPHY, _constants.COMMON, _sx.default);
-
-const DatePickerPanel = () => {
-  const {
-    configuration,
-    saveValue,
-    revertValue,
-    currentViewingDate,
-    goToMonth,
-    nextMonth,
-    previousMonth,
-    onDayFocus,
-    setFocusDate,
-    viewMode
-  } = (0, _useDatePicker.default)();
-  const panelRef = (0, _react.useRef)(null);
-  const headerRef = (0, _react.useRef)(null);
-  const datePanelRef = (0, _react.useRef)(null);
-  const footerRef = (0, _react.useRef)(null);
-  (0, _useFocusZone.useFocusZone)({
-    containerRef: headerRef,
-    bindKeys: _focusZone.FocusKeys.Tab,
-    focusInStrategy: 'closest'
-  });
-  const getNextFocusable = (0, _react.useCallback)((direction, from, event) => {
-    var _datePanelRef$current, _datePanelRef$current2;
-
-    const key = event.key;
-    const {
-      disableWeekends,
-      minDate,
-      maxDate
-    } = configuration;
-    const fromDate = from === null || from === void 0 ? void 0 : from.getAttribute('data-date');
-    const focusDate = fromDate ? new Date(fromDate) : new Date();
-    let newDate = (0, _useDatePicker.normalizeDate)(focusDate);
-
-    switch (key) {
-      case 'ArrowRight':
-        {
-          // Increase selection by 1 day
-          newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.addDays)(focusDate, 1));
-          if (maxDate && (0, _dateFns.isAfter)(newDate, maxDate)) newDate = maxDate;
-
-          if (disableWeekends && (0, _dateFns.isWeekend)(newDate)) {
-            const monday = (0, _dateFns.nextMonday)(newDate);
-            newDate = maxDate && (0, _dateFns.isAfter)(monday, maxDate) ? maxDate : monday;
-          }
-
-          setFocusDate(newDate);
-          onDayFocus(newDate);
-          break;
-        }
-
-      case 'ArrowLeft':
-        {
-          // Decrease selection by 1 day
-          newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.subDays)(focusDate, 1));
-          if (minDate && (0, _dateFns.isBefore)(newDate, minDate)) newDate = minDate;
-
-          if (disableWeekends && (0, _dateFns.isWeekend)(newDate)) {
-            const friday = (0, _dateFns.previousFriday)(newDate);
-            newDate = minDate && (0, _dateFns.isBefore)(friday, minDate) ? minDate : friday;
-          }
-
-          setFocusDate(newDate);
-          onDayFocus(newDate);
-          break;
-        }
-
-      case 'ArrowUp':
-        {
-          // Decrease selection by 1 week
-          newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.subWeeks)(focusDate, 1));
-          if (minDate && (0, _dateFns.isBefore)(newDate, minDate)) newDate = minDate;
-          setFocusDate(newDate);
-          onDayFocus(newDate);
-          break;
-        }
-
-      case 'ArrowDown':
-        {
-          // Increase selection by 1 week
-          newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.addWeeks)(focusDate, 1));
-          if (maxDate && (0, _dateFns.isAfter)(newDate, maxDate)) newDate = maxDate;
-          setFocusDate(newDate);
-          onDayFocus(newDate);
-          break;
-        }
-
-      case 'Home':
-        {
-          newDate = focusDate;
-
-          if (disableWeekends) {
-            newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.isMonday)(focusDate) ? focusDate : (0, _dateFns.previousMonday)(focusDate));
-          } else {
-            newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.isSunday)(focusDate) ? focusDate : (0, _dateFns.previousSunday)(focusDate));
-          }
-
-          if (minDate && (0, _dateFns.isBefore)(newDate, minDate)) newDate = minDate;
-          setFocusDate(newDate);
-          onDayFocus(newDate);
-          break;
-        }
-
-      case 'End':
-        {
-          newDate = focusDate;
-
-          if (disableWeekends) {
-            newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.isFriday)(focusDate) ? focusDate : (0, _dateFns.nextFriday)(focusDate));
-          } else {
-            newDate = (0, _useDatePicker.normalizeDate)((0, _dateFns.isSaturday)(focusDate) ? focusDate : (0, _dateFns.nextSaturday)(focusDate));
-          }
-
-          if (maxDate && (0, _dateFns.isAfter)(newDate, maxDate)) newDate = maxDate;
-          setFocusDate(newDate);
-          onDayFocus(newDate);
-          break;
-        }
-
-      case 'PageUp':
-        {
-          newDate = (0, _useDatePicker.normalizeDate)(event.shiftKey ? (0, _dateFns.subYears)(focusDate, 1) : (0, _dateFns.subMonths)(focusDate, 1));
-          if (minDate && (0, _dateFns.isBefore)(newDate, minDate)) newDate = minDate;
-          setFocusDate(newDate);
-          onDayFocus(newDate);
-          break;
-        }
-
-      case 'PageDown':
-        {
-          newDate = (0, _useDatePicker.normalizeDate)(event.shiftKey ? (0, _dateFns.addYears)(focusDate, 1) : (0, _dateFns.addMonths)(focusDate, 1));
-          if (maxDate && (0, _dateFns.isAfter)(newDate, maxDate)) newDate = maxDate;
-          setFocusDate(newDate);
-          onDayFocus(newDate);
-          break;
-        }
-
-      default:
-        {
-          break;
-        }
-    }
-
-    return (_datePanelRef$current = (_datePanelRef$current2 = datePanelRef.current) === null || _datePanelRef$current2 === void 0 ? void 0 : _datePanelRef$current2.querySelector(`[data-date="${(0, _dateFns.format)(newDate, 'MM/dd/yyyy')}"]`)) !== null && _datePanelRef$current !== void 0 ? _datePanelRef$current : undefined;
-  }, [configuration, onDayFocus, setFocusDate]);
-  (0, _useFocusZone.useFocusZone)({
-    containerRef: datePanelRef,
-    bindKeys: _focusZone.FocusKeys.ArrowAll | _focusZone.FocusKeys.HomeAndEnd | _focusZone.FocusKeys.PageUpDown,
-    focusInStrategy: 'previous',
-    getNextFocusable
-  }, [getNextFocusable]);
-  (0, _useFocusZone.useFocusZone)({
-    containerRef: footerRef,
-    bindKeys: _focusZone.FocusKeys.Tab,
-    focusInStrategy: 'closest'
-  });
-  const previousDisabled = (0, _react.useMemo)(() => {
-    const {
-      minDate
-    } = configuration;
-    if (!minDate) return false;
-    const previous = (0, _dateFns.subMonths)(currentViewingDate, 1);
-
-    if (minDate.getFullYear() >= previous.getFullYear() && minDate.getMonth() > previous.getMonth()) {
-      return true;
-    }
-
-    return false;
-  }, [configuration, currentViewingDate]);
-  const nextDisabled = (0, _react.useMemo)(() => {
-    const {
-      maxDate,
-      view
-    } = configuration;
-    if (!maxDate) return false;
-    const next = (0, _dateFns.addMonths)(currentViewingDate, view === '2-month' ? 2 : 1);
-
-    if (maxDate.getFullYear() <= next.getFullYear() && maxDate.getMonth() < next.getMonth()) {
-      return true;
-    }
-
-    return false;
-  }, [configuration, currentViewingDate]);
-  const currentMonth = (0, _react.useMemo)(() => currentViewingDate.getMonth(), [currentViewingDate]);
-  const currentYear = (0, _react.useMemo)(() => currentViewingDate.getFullYear(), [currentViewingDate]);
-  const headerSelectionHandler = (0, _react.useCallback)(e => {
-    const selection = parseInt(e.currentTarget.value, 10);
-
-    if (e.currentTarget.id === 'picker-header-year') {
-      goToMonth(new Date(selection, currentMonth));
-    } else {
-      goToMonth(new Date(currentYear, selection));
-    }
-  }, [currentMonth, currentYear, goToMonth]);
-  const getMonthPicker = (0, _react.useMemo)(() => {
-    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-    const monthElements = [];
-
-    for (let i = 0; i < months.length; i++) {
-      monthElements.push( /*#__PURE__*/_react.default.createElement(Option, {
-        key: i,
-        value: i
-      }, months[i]));
-    }
-
-    return /*#__PURE__*/_react.default.createElement(Select, {
-      id: "picker-header-month",
-      value: currentMonth,
-      sx: {
-        mr: '6px'
-      },
-      onChange: headerSelectionHandler
-    }, monthElements);
-  }, [currentMonth, headerSelectionHandler]);
-  const getYearPicker = (0, _react.useMemo)(() => {
-    const years = [];
-    const minYear = currentYear - 200;
-    const maxYear = currentYear + 200;
-
-    for (let i = minYear; i <= maxYear; i++) {
-      years.push( /*#__PURE__*/_react.default.createElement(Option, {
-        key: i,
-        value: i
-      }, i));
-    }
-
-    return /*#__PURE__*/_react.default.createElement(Select, {
-      id: "picker-header-year",
-      value: currentYear,
-      onChange: headerSelectionHandler
-    }, years);
-  }, [currentYear, headerSelectionHandler]);
-  return /*#__PURE__*/_react.default.createElement(DatePickerPanelContainer, {
-    ref: panelRef
-  }, /*#__PURE__*/_react.default.createElement(DatePickerTopNav, {
-    ref: headerRef
-  }, configuration.compressedHeader && /*#__PURE__*/_react.default.createElement(_Box.default, {
-    sx: {
-      flex: 1
-    }
-  }, getMonthPicker, getYearPicker), /*#__PURE__*/_react.default.createElement(ArrowButton, {
-    variant: "small",
-    sx: {
-      mr: 1
-    },
-    onClick: previousMonth,
-    disabled: previousDisabled,
-    "aria-label": "Previous Month",
-    "aria-live": "polite"
-  }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-    icon: _octiconsReact.ChevronLeftIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/_react.default.createElement(ArrowButton, {
-    variant: "small",
-    onClick: nextMonth,
-    disabled: nextDisabled,
-    "aria-label": "Next Month",
-    "aria-live": "polite"
-  }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-    icon: _octiconsReact.ChevronRightIcon,
-    color: "fg.muted"
-  }))), /*#__PURE__*/_react.default.createElement(DatePickerPanelMonths, {
-    ref: datePanelRef
-  }, /*#__PURE__*/_react.default.createElement(_Month.Month, {
-    date: currentViewingDate
-  }), viewMode === '2-month' && /*#__PURE__*/_react.default.createElement(_Month.Month, {
-    date: (0, _dateFns.addMonths)(currentViewingDate, 1)
-  })), /*#__PURE__*/_react.default.createElement(DatePickerPanelFooter, {
-    ref: footerRef
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    variant: "small",
-    sx: {
-      mr: 1
-    },
-    onClick: () => revertValue(),
-    "aria-label": "Reset Selection",
-    "aria-live": "polite"
-  }, "Reset"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    variant: "small",
-    onClick: () => goToMonth(new Date()),
-    "aria-label": "Go to Today",
-    "aria-live": "polite"
-  }, "Today")), configuration.confirmation && /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
-    variant: "small",
-    onClick: () => saveValue(),
-    "aria-label": "Apply Selection",
-    "aria-live": "polite"
-  }, "Apply")));
-};
-
-exports.DatePickerPanel = DatePickerPanel;
-DatePickerPanel.displayName = "DatePickerPanel";

package/lib/DatePicker/Day.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { FontSizeProps } from 'styled-system';
-import { SystemCommonProps, SystemLayoutProps } from '../constants';
-import { SxProp } from '../sx';
-import { DaySelection } from './useDatePicker';
-export declare type DayProps = {
-    blocked?: boolean;
-    disabled?: boolean;
-    focused?: boolean;
-    onAction?: (date: Date, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
-    selected?: DaySelection;
-    date: Date;
-} & FontSizeProps & SystemCommonProps & SxProp & SystemLayoutProps;
-export declare const Day: React.FC<DayProps>;
-export declare const BlankDay: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;