@primer/components 0.0.0-202192602912 → 0.0.0-20219266052

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-202192602912",
+  "version": "0.0.0-20219266052",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -43,16 +43,20 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@primer/octicons-react": "^16.1.0",
-    "@primer/primitives": "6.0.0",
+    "@primer/octicons-react": "^13.0.0",
+    "@primer/primitives": "5.1.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
     "@styled-system/props": "5.1.5",
     "@styled-system/theme-get": "5.1.2",
+    "@types/history": "4.7.8",
+    "@types/styled-components": "5.1.11",
+    "@types/styled-system": "5.1.12",
+    "@types/styled-system__css": "5.0.16",
+    "@types/styled-system__theme-get": "5.0.1",
     "classnames": "2.3.1",
     "color2k": "1.2.4",
-    "date-fns": "2.25.0",
     "deepmerge": "4.2.2",
     "focus-visible": "5.2.0",
     "styled-system": "5.1.5"
@@ -81,11 +85,6 @@
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.1.9",
-    "@types/history": "4.7.9",
-    "@types/styled-components": "5.1.15",
-    "@types/styled-system": "5.1.13",
-    "@types/styled-system__css": "5.0.16",
-    "@types/styled-system__theme-get": "5.0.1",
     "@types/chroma-js": "2.1.3",
     "@types/enzyme": "3.10.9",
     "@types/jest": "26.0.23",

package/lib/DatePicker/DatePicker.d.ts

@@ -1,48 +0,0 @@
-import React from 'react';
-import { OverlayProps } from '../Overlay';
-import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
-import { FocusZoneHookSettings } from '../hooks/useFocusZone';
-import { DatePickerConfiguration, Selection } from './useDatePicker';
-declare type OpenGesture = 'anchor-click' | 'anchor-key-press';
-declare type CloseGesture = 'anchor-click' | 'click-outside' | 'escape';
-export interface DatePickerProps extends DatePickerConfiguration {
-    /**
-     * An override to the internal ref that will be spread on to the renderAnchor
-     */
-    anchorRef?: React.RefObject<HTMLElement>;
-    /**
-     * Settings to apply to the Focus Zone on the internal `Overlay` component.
-     */
-    focusTrapSettings?: Partial<FocusTrapHookSettings>;
-    /**
-     * Settings to apply to the Focus Zone on the internal `Overlay` component.
-     */
-    focusZoneSettings?: Partial<FocusZoneHookSettings>;
-    initialValue?: 'today' | Date | string | null;
-    iconOnly?: boolean;
-    placeholder?: string;
-    /**
-     * Determines whether the overlay portion of the component should be shown or not
-     */
-    open?: boolean;
-    /**
-     * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
-     */
-    onOpen?: (gesture: OpenGesture) => unknown;
-    /**
-     * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
-     */
-    onClose?: (gesture: CloseGesture) => unknown;
-    /**
-     * Props to be spread on the internal `Overlay` component.
-     */
-    overlayProps?: Partial<OverlayProps>;
-    /**
-     * A custom function component used to render the anchor element.
-     * Will receive the selected text as `children` prop when an item is activated.
-     */
-    renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element;
-    value?: Selection;
-}
-export declare const DatePicker: React.FC<DatePickerProps>;
-export {};

package/lib/DatePicker/DatePicker.js

@@ -1,92 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatePicker = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _DatePickerAnchor = require("./DatePickerAnchor");
-
-var _useDatePicker = require("./useDatePicker");
-
-var _DatePickerOverlay = require("./DatePickerOverlay");
-
-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 DatePicker = ({
-  anchorVariant,
-  anchorRef: externalAnchorRef,
-  confirmation,
-  dateFormat,
-  focusTrapSettings,
-  focusZoneSettings,
-  maxDate,
-  minDate,
-  onOpen: onOpenExternal,
-  onClose: onCloseExternal,
-  open,
-  overlayProps,
-  renderAnchor,
-  selection,
-  value,
-  view,
-  weekStartsOn
-}) => {
-  const buttonRef = (0, _react.useRef)(null);
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const datePickerConfiguration = {
-    anchorVariant,
-    confirmation,
-    dateFormat,
-    maxDate,
-    minDate,
-    selection,
-    view,
-    weekStartsOn
-  };
-
-  const onOpen = gesture => {
-    setIsOpen(true);
-    onOpenExternal === null || onOpenExternal === void 0 ? void 0 : onOpenExternal(gesture);
-  };
-
-  const onClose = gesture => {
-    setIsOpen(false);
-    onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal(gesture);
-  };
-
-  const toggleIsOpen = () => {
-    if (isOpen) {
-      setIsOpen(false);
-      onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
-    } else {
-      setIsOpen(true);
-      onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
-    }
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_useDatePicker.DatePickerProvider, {
-    configuration: datePickerConfiguration,
-    value: value,
-    closePicker: () => setIsOpen(false)
-  }, /*#__PURE__*/_react.default.createElement(_DatePickerAnchor.DatePickerAnchor, {
-    ref: buttonRef,
-    onAction: toggleIsOpen
-  }), /*#__PURE__*/_react.default.createElement(_DatePickerOverlay.DatePickerOverlay, {
-    anchorRef: externalAnchorRef !== null && externalAnchorRef !== void 0 ? externalAnchorRef : buttonRef,
-    renderAnchor: renderAnchor,
-    open: open !== null && open !== void 0 ? open : isOpen,
-    onOpen: onOpen,
-    onClose: onClose,
-    overlayProps: overlayProps,
-    focusTrapSettings: focusTrapSettings,
-    focusZoneSettings: focusZoneSettings
-  }));
-};
-
-exports.DatePicker = DatePicker;
-DatePicker.displayName = "DatePicker";

package/lib/DatePicker/DatePickerAnchor.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export interface DatePickerAnchorProps {
-    onAction?: (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
-}
-export declare const DatePickerAnchor: React.ForwardRefExoticComponent<DatePickerAnchorProps & React.RefAttributes<HTMLDivElement>>;

package/lib/DatePicker/DatePickerAnchor.js

@@ -1,158 +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"));
-
-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;& ", "{margin-left:", ";}"], _Text.default, (0, _constants.get)('space.2'));
-
-const DatePickerAnchor = /*#__PURE__*/_react.default.forwardRef(({
-  onAction
-}, ref) => {
-  const {
-    configuration: {
-      anchorVariant,
-      iconPlacement,
-      selection
-    },
-    disabled,
-    formattedDate
-  } = (0, _useDatePicker.default)();
-  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]);
-  const onInputChangeHandler = (0, _react.useCallback)(e => {
-    const value = e.currentTarget.value;
-    if (!value) return;
-
-    if (selection === 'range') {
-      var _values$, _values$2;
-
-      const values = value.split(' - ');
-      const dates = {
-        from: new Date((_values$ = values[0]) === null || _values$ === void 0 ? void 0 : _values$.trim()),
-        to: new Date((_values$2 = values[1]) === null || _values$2 === void 0 ? void 0 : _values$2.trim())
-      };
-      console.log(dates);
-    } else if (selection === 'multi') {
-      const values = value.split(',');
-      const dates = [];
-
-      for (const date of values) {
-        dates.push(new Date(date.trim()));
-      }
-
-      console.log(dates);
-    } else {
-      const date = new Date(value);
-      console.log(date);
-    }
-  }, [selection]);
-
-  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'
-      }
-    }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-      icon: _octiconsReact.CalendarIcon
-    }));
-
-    const inputSx = () => {
-      if (iconPlacement === 'start') {
-        return {
-          pl: 5,
-          pr: 2
-        };
-      } else if (iconPlacement === 'end') {
-        return {
-          pl: 2,
-          pr: 5
-        };
-      } else {
-        return {};
-      }
-    };
-
-    return /*#__PURE__*/_react.default.createElement(_Box.default, {
-      ref: ref,
-      sx: {
-        position: 'relative',
-        display: 'flex',
-        flex: 1
-      }
-    }, iconPlacement === 'start' && calendarButton('left'), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-      defaultValue: formattedDate,
-      onChange: onInputChangeHandler,
-      sx: inputSx()
-    }), iconPlacement === 'end' && calendarButton('right'));
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_Box.default, {
-    ref: ref
-  }, /*#__PURE__*/_react.default.createElement(DatePickerAnchorButton, {
-    onClick: clickHandler,
-    onKeyPress: keyPressHandler
-  }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-    icon: _octiconsReact.CalendarIcon,
-    color: "fg.muted",
-    sx: {
-      my: '2px'
-    }
-  }), anchorVariant !== 'icon-only' && /*#__PURE__*/_react.default.createElement(_Text.default, {
-    sx: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    }
-  }, formattedDate)));
-});
-
-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,39 +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 {
-    revertValue
-  } = (0, _useDatePicker.default)();
-
-  const onOverlayClose = gesture => {
-    revertValue();
-    onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, _extends({
-    onClose: onOverlayClose
-  }, rest), /*#__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,126 +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 = _interopRequireDefault(require("./useDatePicker"));
-
-var _octiconsReact = require("@primer/octicons-react");
-
-var _StyledOcticon = _interopRequireDefault(require("../StyledOcticon"));
-
-var _Button = _interopRequireWildcard(require("../Button"));
-
-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;"]);
-const DatePickerPanelMonths = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "DatePickerPanel__DatePickerPanelMonths",
-  componentId: "sc-19upxpo-1"
-})(["align-items:flex-start;display:flex;flex-direction:row;gap:", ";padding:", ";position:relative;"], (0, _constants.get)('space.6'), (0, _constants.get)('space.3'));
-const DatePickerPanelFooter = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "DatePickerPanel__DatePickerPanelFooter",
-  componentId: "sc-19upxpo-2"
-})(["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-3"
-})(["position:absolute;width:40px;height:28px;top:12px;", ";"], props => `${props.side}: ${(0, _constants.get)('space.3')(props)}`);
-
-const DatePickerPanel = () => {
-  const {
-    configuration,
-    saveValue,
-    revertValue,
-    currentViewingDate,
-    goToMonth,
-    nextMonth,
-    previousMonth
-  } = (0, _useDatePicker.default)();
-  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]);
-  return /*#__PURE__*/_react.default.createElement(DatePickerPanelContainer, null, /*#__PURE__*/_react.default.createElement(DatePickerPanelMonths, null, /*#__PURE__*/_react.default.createElement(ArrowButton, {
-    variant: "small",
-    side: "left",
-    onClick: previousMonth,
-    disabled: previousDisabled
-  }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-    icon: _octiconsReact.ChevronLeftIcon,
-    color: "fg.muted"
-  })), /*#__PURE__*/_react.default.createElement(_Month.Month, {
-    month: currentViewingDate.getMonth(),
-    year: currentViewingDate.getFullYear()
-  }), configuration.view === '2-month' && /*#__PURE__*/_react.default.createElement(_Month.Month, {
-    month: (0, _dateFns.addMonths)(currentViewingDate, 1).getMonth(),
-    year: (0, _dateFns.addMonths)(currentViewingDate, 1).getFullYear()
-  }), /*#__PURE__*/_react.default.createElement(ArrowButton, {
-    variant: "small",
-    side: "right",
-    onClick: nextMonth,
-    disabled: nextDisabled
-  }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-    icon: _octiconsReact.ChevronRightIcon,
-    color: "fg.muted"
-  }))), /*#__PURE__*/_react.default.createElement(DatePickerPanelFooter, null, /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    variant: "small",
-    sx: {
-      mr: 1
-    },
-    onClick: () => revertValue()
-  }, "Reset"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    variant: "small",
-    onClick: () => goToMonth(new Date())
-  }, "Today")), configuration.confirmation && /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
-    variant: "small",
-    onClick: () => saveValue()
-  }, "Apply")));
-};
-
-exports.DatePickerPanel = DatePickerPanel;
-DatePickerPanel.displayName = "DatePickerPanel";

package/lib/DatePicker/Day.d.ts

@@ -1,14 +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 interface DayProps extends FontSizeProps, SystemCommonProps, SxProp, SystemLayoutProps {
-    blocked?: boolean;
-    disabled?: boolean;
-    onAction?: (date: Date, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
-    selected?: DaySelection;
-    date: Date;
-}
-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>;