@elliemae/ds-date-picker 2.0.0-next.6 → 2.0.0-rc.1

package/cjs/components/DatePickerRenderMonth/DatePickerRenderMonth.js

@@ -4,43 +4,43 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
-var ChevronDoubleLeft = require('@elliemae/ds-icons/ChevronDoubleLeft');
-var ChevronDoubleRight = require('@elliemae/ds-icons/ChevronDoubleRight');
-var Grid = require('@elliemae/ds-basic/Grid');
+var dsIcons = require('@elliemae/ds-icons');
+var dsGrid = require('@elliemae/ds-grid');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var ChevronDoubleLeft__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDoubleLeft);
-var ChevronDoubleRight__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDoubleRight);
 
 var _ChevronDoubleLeft, _ChevronDoubleRight;
-const renderMonthElement = ({
-  month,
-  onYearSelect
-}) => /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
-  height: "20px",
-  cols: ['auto', 1, 'auto'],
-  alignItems: "flex-end",
-  mr: "10px"
-}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
-  role: "button",
-  tabIndex: "0",
-  "data-testid": "date-picker-prev-year-arrow",
-  onClick: () => onYearSelect(month, month.year() - 1)
-}, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx__default["default"](ChevronDoubleLeft__default["default"], {
-  width: 13.6,
-  height: 13.6
-})))), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
-  "data-testid": "date-picker-header"
-}, void 0, /*#__PURE__*/_jsx__default["default"]("strong", {}, void 0, month.format('MMMM YYYY'))), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
-  role: "button",
-  tabIndex: "0",
-  "data-testid": "date-picker-next-year-arrow",
-  onClick: () => onYearSelect(month, month.year() + 1)
-}, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx__default["default"](ChevronDoubleRight__default["default"], {
-  width: 13.6,
-  height: 13.6
-})))));
+const renderMonthElement = _ref => {
+  let {
+    month,
+    onYearSelect
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    height: "20px",
+    cols: ['auto', 1, 'auto'],
+    alignItems: "flex-end",
+    mr: "10px"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
+    role: "button",
+    tabIndex: "0",
+    "data-testid": "date-picker-prev-year-arrow",
+    onClick: () => onYearSelect(month, month.year() - 1)
+  }, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDoubleLeft, {
+    width: 13.6,
+    height: 13.6
+  })))), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    "data-testid": "date-picker-header"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("strong", {}, void 0, month.format('MMMM YYYY'))), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
+    role: "button",
+    tabIndex: "0",
+    "data-testid": "date-picker-next-year-arrow",
+    onClick: () => onYearSelect(month, month.year() + 1)
+  }, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDoubleRight, {
+    width: 13.6,
+    height: 13.6
+  })))));
+};
 
 exports.renderMonthElement = renderMonthElement;

package/cjs/components/DatePickerSingleDate/DatePickerSingleDate.js

@@ -6,9 +6,11 @@ require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactDates = require('react-dates');
 var moment = require('moment');
-var dsDatePicker = require('@elliemae/ds-date-picker');
-var ChevronLeft = require('@elliemae/ds-icons/ChevronLeft');
 var dsClassnames = require('@elliemae/ds-classnames');
+var dsIcons = require('@elliemae/ds-icons');
+var DatePickerDay = require('../DatePickerDay/DatePickerDay.js');
+var DatePickerNavigation = require('../DatePickerNavigation/DatePickerNavigation.js');
+var DatePickerHeader = require('../DatePickerHeader/DatePickerHeader.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -16,7 +18,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
-var ChevronLeft__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeft);
 
 const _excluded = ["date", "displayFormatDay", "isDayHighlighted", "enableOutsideDays", "showHeader", "onChange"];
 const blockname = 'single-date';
@@ -50,7 +51,7 @@ const DatePickerSingleDate = _ref => {
     setTimeout(() => onChange(newDate), 500);
   };
 
-  return /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, showHeader && /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerHeader, {
+  return /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, showHeader && /*#__PURE__*/_jsx__default["default"](DatePickerHeader, {
     onInputChange: handleDateChange,
     selectedDate: selectedDate,
     updateKeyDate: updateKeyDate
@@ -65,15 +66,15 @@ const DatePickerSingleDate = _ref => {
       hideKeyboardShortcutsPanel: true,
       isDayHighlighted: isDayHighlighted,
       keepOpenOnDateSelect: true,
-      navNext: /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerNavigation, {
+      navNext: /*#__PURE__*/_jsx__default["default"](DatePickerNavigation, {
         className: classNameElement('navigation-next')
       }),
-      navPrev: /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerNavigation, {
+      navPrev: /*#__PURE__*/_jsx__default["default"](DatePickerNavigation, {
         className: classNameElement('navigation-prev'),
-        icon: ChevronLeft__default["default"]
+        icon: dsIcons.ChevronLeft
       }),
       onDateChange: handleDateChange,
-      renderDayContents: givenDate => /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerDay, {
+      renderDayContents: givenDate => /*#__PURE__*/_jsx__default["default"](DatePickerDay, {
         className: classNameElement('day-contents'),
         date: givenDate.format(displayFormatDay)
       })

package/cjs/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js

@@ -2,39 +2,41 @@
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
-var DSCheckbox = require('@elliemae/ds-form/Checkbox');
-var dsDatePicker = require('@elliemae/ds-date-picker');
+var dsForm = require('@elliemae/ds-form');
 var dsClassnames = require('@elliemae/ds-classnames');
+var DatePickerRangeHeader = require('../DatePickerRangeHeader/DatePickerRangeHeader.js');
+var DatePickerHeader = require('../DatePickerHeader/DatePickerHeader.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DSCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(DSCheckbox);
 
 const blockname = 'date-switcher';
 const Header = dsClassnames.aggregatedClasses('div')(blockname, 'header');
 
-const SingleRangeDateSwitcher = ({
-  onStartInputChange,
-  onEndInputChange,
-  onSingleInputChange,
-  onFocusChange,
-  selectedStartDate,
-  selectedEndDate,
-  selectedSingleDate,
-  isDateRange,
-  setIsDateRange,
-  handleDatesChange,
-  updateKeyDate,
-  focusedInput
-}) => {
-  const SingleDateInput = /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerHeader, {
+const SingleRangeDateSwitcher = _ref => {
+  let {
+    onStartInputChange,
+    onEndInputChange,
+    onSingleInputChange,
+    onFocusChange,
+    selectedStartDate,
+    selectedEndDate,
+    selectedSingleDate,
+    isDateRange,
+    setIsDateRange,
+    handleDatesChange,
+    updateKeyDate,
+    focusedInput
+  } = _ref;
+
+  const SingleDateInput = /*#__PURE__*/_jsx__default["default"](DatePickerHeader, {
     onInputChange: onSingleInputChange,
     selectedDate: selectedSingleDate,
     updateKeyDate: updateKeyDate
   });
 
-  const DateRangeInput = /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerRangeHeader, {
+  const DateRangeInput = /*#__PURE__*/_jsx__default["default"](DatePickerRangeHeader, {
     focusedInput: focusedInput,
     onFocusChange: onFocusChange,
     onEndInputChange: onEndInputChange,
@@ -46,7 +48,7 @@ const SingleRangeDateSwitcher = ({
 
   return /*#__PURE__*/_jsx__default["default"](Header, {
     "data-testid": "date-switch-header"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](DSCheckbox__default["default"], {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
     checked: isDateRange,
     className: "switch-header__checkbox",
     labelText: "Range",

package/cjs/defaultPhrases.js

@@ -30,33 +30,54 @@ const returnFocusToInput = 'Return to the date input field.';
 const keyboardForwardNavigationInstructions = 'Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';
 const keyboardBackwardNavigationInstructions = 'Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';
 
-const chooseAvailableStartDate = ({
-  date
-}) => "Choose ".concat(date, " as your check-in date. It\u2019s available.");
+const chooseAvailableStartDate = _ref => {
+  let {
+    date
+  } = _ref;
+  return "Choose ".concat(date, " as your check-in date. It\u2019s available.");
+};
 
-const chooseAvailableEndDate = ({
-  date
-}) => "Choose ".concat(date, " as your check-out date. It\u2019s available.");
+const chooseAvailableEndDate = _ref2 => {
+  let {
+    date
+  } = _ref2;
+  return "Choose ".concat(date, " as your check-out date. It\u2019s available.");
+};
 
-const chooseAvailableDate = ({
-  date
-}) => date;
+const chooseAvailableDate = _ref3 => {
+  let {
+    date
+  } = _ref3;
+  return date;
+};
 
-const dateIsUnavailable = ({
-  date
-}) => "Not available. ".concat(date);
+const dateIsUnavailable = _ref4 => {
+  let {
+    date
+  } = _ref4;
+  return "Not available. ".concat(date);
+};
 
-const dateIsSelected = ({
-  date
-}) => "Selected. ".concat(date);
+const dateIsSelected = _ref5 => {
+  let {
+    date
+  } = _ref5;
+  return "Selected. ".concat(date);
+};
 
-const dateIsSelectedAsStartDate = ({
-  date
-}) => "Selected as start date. ".concat(date);
+const dateIsSelectedAsStartDate = _ref6 => {
+  let {
+    date
+  } = _ref6;
+  return "Selected as start date. ".concat(date);
+};
 
-const dateIsSelectedAsEndDate = ({
-  date
-}) => "Selected as end date. ".concat(date);
+const dateIsSelectedAsEndDate = _ref7 => {
+  let {
+    date
+  } = _ref7;
+  return "Selected as end date. ".concat(date);
+};
 
 var defaultPhrases = {
   calendarLabel,

package/esm/DSDatePicker.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/web.dom-collections.iterator.js';
@@ -26,48 +31,49 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const DSDatePicker = ({
-  containerProps = {},
-  id = '',
-  appendToBody = true,
-  className = '',
-  date,
-  value,
-  placeholder = '',
-  disabled = false,
-  required = false,
-  readOnly = false,
-  hasError = false,
-  screenReaderInputMessage = 'Select date',
-  enableOutsideDays = true,
-  initialVisibleMonth = moment(),
-  firstDayOfWeek = 0,
-  keepOpenOnDateSelect = false,
-  hideKeyboardShortcutsPanel = true,
-  onChange = () => null,
-  onDateChange = undefined,
-  onPrevMonthClick = () => null,
-  onNextMonthClick = () => null,
-  onClose = () => null,
-  onFocus = () => null,
-  onBlur = () => null,
-  phrases = SingleDatePickerPhrases,
-  displayFormat = 'L',
-  displayFormatDay = 'D',
-  transitionDuration = 0,
-  verticalSpacing = 0,
-  isDayBlocked = () => false,
-  isOutsideRange = () => false,
-  isDayHighlighted = () => false,
-  numberOfMonths = 1,
-  openDirection = 'down',
-  tabIndex = '',
-  zIndex = 1,
-  pickerProps = {},
-  calendarProps = {},
-  autoClear = false,
-  focusCurrentDate = false
-}) => {
+const DSDatePicker = _ref => {
+  let {
+    containerProps = {},
+    id = '',
+    appendToBody = true,
+    className = '',
+    date,
+    value,
+    placeholder = '',
+    disabled = false,
+    required = false,
+    readOnly = false,
+    hasError = false,
+    screenReaderInputMessage = 'Select date',
+    enableOutsideDays = true,
+    initialVisibleMonth = moment(),
+    firstDayOfWeek = 0,
+    keepOpenOnDateSelect = false,
+    hideKeyboardShortcutsPanel = true,
+    onChange = () => null,
+    onDateChange = undefined,
+    onPrevMonthClick = () => null,
+    onNextMonthClick = () => null,
+    onClose = () => null,
+    onFocus = () => null,
+    onBlur = () => null,
+    phrases = SingleDatePickerPhrases,
+    displayFormat = 'L',
+    displayFormatDay = 'D',
+    transitionDuration = 0,
+    verticalSpacing = 0,
+    isDayBlocked = () => false,
+    isOutsideRange = () => false,
+    isDayHighlighted = () => false,
+    numberOfMonths = 1,
+    openDirection = 'down',
+    tabIndex = '',
+    zIndex = 1,
+    pickerProps = {},
+    calendarProps = {},
+    autoClear = false,
+    focusCurrentDate = false
+  } = _ref;
   const {
     cssClassName
   } = convertPropToCssClassName('datepicker', className, {
@@ -102,8 +108,8 @@ const DSDatePicker = ({
       onBlur: onBlur,
       onClose: onClose,
       onChange: onChange,
-      onDateChange: (...args) => {
-        if (onDateChange) onDateChange(...args);
+      onDateChange: function () {
+        if (onDateChange) onDateChange(...arguments);
       },
       onFocus: onFocus,
       onNextMonthClick: onNextMonthClick,

package/esm/components/DSDatePickerImpl.js

@@ -3,8 +3,7 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import React from 'react';
 import moment from 'moment';
-import DSInputGroup from '@elliemae/ds-basic/form/InputGroup';
-import { DSDateInputV2 } from '@elliemae/ds-basic/form/DateInputV2';
+import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
 import DSDatePickerController from './DatePickerController/DatePickerController.js';
 import DatePickerDropdown from './DatePickerDropdown.js';
 
@@ -123,9 +122,10 @@ class DSdatePickerImpl extends React.Component {
       onDateChange(momentValue);
     });
 
-    _defineProperty(this, "handleFocus", ({
-      focused
-    }) => {
+    _defineProperty(this, "handleFocus", _ref => {
+      let {
+        focused
+      } = _ref;
       this.setState({
         inputFocused: focused
       });
@@ -249,6 +249,8 @@ class DSdatePickerImpl extends React.Component {
   }
 
   render() {
+    var _this = this;
+
     const {
       inputFocused
     } = this.state;
@@ -303,10 +305,11 @@ class DSdatePickerImpl extends React.Component {
           keepOpenOnDateSelect: keepOpenOnDateSelect,
           numberOfMonths: numberOfMonths,
           onClickEscape: this.handleClickEscape,
-          onClose: (...args) => {
-            if (this.state.pickerRef.current) this.state.pickerRef.current.focus();
-            onClose(...args);
-            this.setState({
+          onClose: function () {
+            if (_this.state.pickerRef.current) _this.state.pickerRef.current.focus();
+            onClose(...arguments);
+
+            _this.setState({
               inputFocused: false
             });
           },

package/esm/components/DatePickerController/DatePickerController.js

@@ -1,6 +1,11 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import React from 'react';
 import { debounce } from 'lodash';
 import PropTypes from 'prop-types';
@@ -8,7 +13,7 @@ import moment from 'moment';
 import 'react-dates/initialize';
 import { DayPickerSingleDateController } from 'react-dates';
 import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-import ChevronLeft from '@elliemae/ds-icons/ChevronLeft';
+import { ChevronLeft } from '@elliemae/ds-icons';
 import { SingleDatePickerPhrases } from '../../defaultPhrases.js';
 import { renderMonthElement } from '../DatePickerRenderMonth/DatePickerRenderMonth.js';
 import Navigation from '../DatePickerNavigation/DatePickerNavigation.js';

package/esm/components/DatePickerDay/DatePickerDay.js

@@ -1,15 +1,18 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 
-const Day = ({
-  className = 'date-picker-content-day',
-  date = ''
-}) => /*#__PURE__*/_jsx("div", {
-  className: className,
-  "data-testid": "datepicker-day-".concat(date)
-}, void 0, /*#__PURE__*/_jsx("div", {
-  className: "".concat(className, "-half"),
-  "data-testid": "datepicker-day"
-}, void 0, date));
+const Day = _ref => {
+  let {
+    className = 'date-picker-content-day',
+    date = ''
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    "data-testid": "datepicker-day-".concat(date)
+  }, void 0, /*#__PURE__*/_jsx("div", {
+    className: "".concat(className, "-half"),
+    "data-testid": "datepicker-day"
+  }, void 0, date));
+};
 
 export { Day as default };

package/esm/components/DatePickerDropdown.js

@@ -1,8 +1,13 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-import DSPopper from '@elliemae/ds-basic/Popper';
+import DSPopper from '@elliemae/ds-popper';
 import { Picker } from './DatePickerPicker/DatePickerPicker.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -15,16 +20,17 @@ const {
 
 const noop = () => null;
 
-function DatePickerDropdown({
-  disabled = false,
-  readOnly,
-  onClick = noop,
-  isOpen,
-  menu,
-  zIndex = 1,
-  pickerProps,
-  pickerRef
-}) {
+function DatePickerDropdown(_ref) {
+  let {
+    disabled = false,
+    readOnly,
+    onClick = noop,
+    isOpen,
+    menu,
+    zIndex = 1,
+    pickerProps,
+    pickerRef
+  } = _ref;
   return /*#__PURE__*/_jsx(DSPopper, {
     contentComponent: menu,
     isOpen: isOpen,

package/esm/components/DatePickerHeader/DatePickerHeader.js

@@ -2,8 +2,7 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect } from 'react';
 import moment from 'moment';
-import DSDateInput from '@elliemae/ds-basic/form/DateInputV2';
-import DSInputGroup from '@elliemae/ds-basic/form/InputGroup';
+import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 
 const DATE_FORMAT = 'MMDDYYYY';
@@ -12,11 +11,12 @@ const Header = aggregatedClasses('div')(blockname);
 
 const isFn = variable => typeof variable === 'function';
 
-const DatePickerHeader = ({
-  onInputChange = () => null,
-  selectedDate,
-  updateKeyDate
-}) => {
+const DatePickerHeader = _ref => {
+  let {
+    onInputChange = () => null,
+    selectedDate,
+    updateKeyDate
+  } = _ref;
   const [value, setValue] = useState(isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format) ? selectedDate.format(DATE_FORMAT) : '');
   useEffect(() => {
     if (isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format)) {
@@ -36,7 +36,7 @@ const DatePickerHeader = ({
     }
   };
 
-  return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInput, {
+  return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSDateInputV2, {
     onChange: handleOnChange,
     onKeyDown: handleOnKeyDown,
     value: value,

package/esm/components/DatePickerNavigation/DatePickerNavigation.js

@@ -3,20 +3,23 @@ import 'react';
 import ChevronRight from '@elliemae/ds-icons/ChevronRight';
 import { DSIconColors, DSIconSizes } from '@elliemae/ds-basic/Icon';
 
-const Navigation = ({
-  className = 'date-picker-navigation',
-  icon: Icon = ChevronRight,
-  color = DSIconColors.NEUTRAL,
-  size = DSIconSizes.S,
-  innerRef
-}) => /*#__PURE__*/_jsx("div", {
-  tabIndex: 0,
-  "data-testid": "date-picker-nav"
-}, void 0, /*#__PURE__*/_jsx(Icon, {
-  className: className,
-  color: color,
-  innerRef: innerRef,
-  size: size
-}));
+const Navigation = _ref => {
+  let {
+    className = 'date-picker-navigation',
+    icon: Icon = ChevronRight,
+    color = DSIconColors.NEUTRAL,
+    size = DSIconSizes.S,
+    innerRef
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    tabIndex: 0,
+    "data-testid": "date-picker-nav"
+  }, void 0, /*#__PURE__*/_jsx(Icon, {
+    className: className,
+    color: color,
+    innerRef: innerRef,
+    size: size
+  }));
+};
 
 export { Navigation as default };

package/esm/components/DatePickerPicker/DatePickerPicker.js

@@ -4,7 +4,7 @@ import 'react';
 import PropTypes from 'prop-types';
 import { DSIconSizes, DSIconColors } from '@elliemae/ds-basic/Icon';
 import DatePicker from '@elliemae/ds-icons/DatePicker';
-import DSButton, { buttonTypes } from '@elliemae/ds-basic/Button';
+import DSButton, { buttonTypes } from '@elliemae/ds-button';
 import { iconSizes } from '@elliemae/ds-shared/prop-types';
 
 var _DatePicker;