feat(datepickers): introduce DatepickerRange component

packages/datepickers/examples/range.md

@@ -0,0 +1,44 @@
+```jsx
+const { Field, Label, Input, Message } = require('@zendeskgarden/react-forms/src');
+const { addDays, compareAsc } = require('date-fns');
+
+initialState = {
+  startValue: new Date(),
+  endValue: addDays(new Date(), 16)
+};
+
+const isInvalid = () => compareAsc(state.startValue, state.endValue) === 1;
+
+<DatepickerRange
+  startValue={state.startValue}
+  endValue={state.endValue}
+  onChange={changes => setState({ startValue: changes.startValue, endValue: changes.endValue })}
+>
+  <Grid>
+    <Row>
+      <Col md>
+        <Field>
+          <Label>Start</Label>
+          <DatepickerRange.Start>
+            <Input />
+          </DatepickerRange.Start>
+        </Field>
+      </Col>
+      <Col md>
+        <Field>
+          <Label>End</Label>
+          <DatepickerRange.End>
+            <Input validation={isInvalid() ? 'error' : undefined}/>
+          </DatepickerRange.End>
+          {isInvalid() && <Message validation="error">End date must occur after the Start date</Message>}
+        </Field>
+      </Col>
+    </Row>
+    <Row>
+      <Col>
+        <DatepickerRange.Calendar />
+      </Col>
+    </Row>
+  </Grid>
+</DatepickerRange>;
+```

packages/datepickers/src/Datepicker.tsx → packages/datepickers/src/Datepicker/Datepicker.tsx

@@ -15,14 +15,14 @@ import parse from 'date-fns/parse';
 import { isRtl, withTheme } from '@zendeskgarden/react-theming';
 import { KEY_CODES } from '@zendeskgarden/container-utilities';
 
-import { StyledMenu } from './styled';
+import { StyledMenu } from '../styled';
 import {
   getRtlPopperPlacement,
   getPopperPlacement,
   GARDEN_PLACEMENT
 } from './utils/garden-placements';
 import Calendar from './components/Calendar';
-import { datepickerReducer, retrieveInitialState } from './utils/reducer';
+import { datepickerReducer, retrieveInitialState } from './utils/datepicker-reducer';
 import { DatepickerContext } from './utils/useDatepickerContext';
 
 /**
@@ -328,7 +328,8 @@ Datepicker.defaultProps = {
   refKey: 'ref',
   animate: true,
   eventsEnabled: true,
-  zIndex: 1000
+  zIndex: 1000,
+  locale: 'en-US'
 };
 
 export default withTheme(Datepicker) as FunctionComponent<IDatepickerProps>;

packages/datepickers/src/components/Calendar.tsx → packages/datepickers/src/Datepicker/components/Calendar.tsx

@@ -24,9 +24,9 @@ import {
   StyledCalendarItem,
   StyledDayLabel,
   StyledDay
-} from '../styled';
+} from '../../styled';
 import useDatepickerContext from '../utils/useDatepickerContext';
-import { getStartOfWeek } from '../utils/calendar-utils';
+import { getStartOfWeek } from '../../utils/calendar-utils';
 import MonthSelector from './MonthSelector';
 
 interface ICalendarProps {

packages/datepickers/src/components/MonthSelector.tsx → packages/datepickers/src/Datepicker/components/MonthSelector.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useCallback } from 'react';
-import { StyledHeader, StyledHeaderPaddle, StyledHeaderLabel } from '../styled';
+import { StyledHeader, StyledHeaderPaddle, StyledHeaderLabel } from '../../styled';
 import useDatepickerContext from '../utils/useDatepickerContext';
 
 import ChevronLeftStrokeIcon from '@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg';
@@ -33,7 +33,7 @@ const MonthSelector: React.FunctionComponent<IMonthSelectorProps> = ({ locale, s
   );
 
   return (
-    <StyledHeader>
+    <StyledHeader isSmall={small}>
       <StyledHeaderPaddle
         isSmall={small}
         onClick={() => {

packages/datepickers/src/utils/useDatepickerContext.ts → packages/datepickers/src/Datepicker/utils/useDatepickerContext.ts

@@ -6,7 +6,7 @@
  */
 
 import { useContext, createContext } from 'react';
-import { IDatepickerState, DatepickerAction } from './reducer';
+import { IDatepickerState, DatepickerAction } from './datepicker-reducer';
 
 export interface IDatepickerContext {
   state: IDatepickerState;