@elliemae/ds-date-picker 2.0.0-next.7 → 2.0.0-rc.2

package/cjs/DSDatePicker.js

@@ -5,6 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 require('react');
 var reactDesc = require('react-desc');
 require('react-dates/initialize');
@@ -35,48 +40,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__default["default"](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__default["default"](),
-  firstDayOfWeek = 0,
-  keepOpenOnDateSelect = false,
-  hideKeyboardShortcutsPanel = true,
-  onChange = () => null,
-  onDateChange = undefined,
-  onPrevMonthClick = () => null,
-  onNextMonthClick = () => null,
-  onClose = () => null,
-  onFocus = () => null,
-  onBlur = () => null,
-  phrases = defaultPhrases.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__default["default"](),
+    firstDayOfWeek = 0,
+    keepOpenOnDateSelect = false,
+    hideKeyboardShortcutsPanel = true,
+    onChange = () => null,
+    onDateChange = undefined,
+    onPrevMonthClick = () => null,
+    onNextMonthClick = () => null,
+    onClose = () => null,
+    onFocus = () => null,
+    onBlur = () => null,
+    phrases = defaultPhrases.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
   } = dsClassnames.convertPropToCssClassName('datepicker', className, {
@@ -111,8 +117,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/cjs/components/DSDatePickerImpl.js

@@ -5,8 +5,7 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var moment = require('moment');
-var DSInputGroup = require('@elliemae/ds-basic/form/InputGroup');
-var DSDateInput = require('@elliemae/ds-basic/form/DateInputV2');
+var dsForm = require('@elliemae/ds-form');
 var DatePickerController = require('./DatePickerController/DatePickerController.js');
 var DatePickerDropdown = require('./DatePickerDropdown.js');
 
@@ -16,7 +15,6 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
-var DSInputGroup__default = /*#__PURE__*/_interopDefaultLegacy(DSInputGroup);
 
 const FORMAT = 'MMDDYYYY';
 class DSdatePickerImpl extends React__default["default"].Component {
@@ -133,9 +131,10 @@ class DSdatePickerImpl extends React__default["default"].Component {
       onDateChange(momentValue);
     });
 
-    _defineProperty__default["default"](this, "handleFocus", ({
-      focused
-    }) => {
+    _defineProperty__default["default"](this, "handleFocus", _ref => {
+      let {
+        focused
+      } = _ref;
       this.setState({
         inputFocused: focused
       });
@@ -259,6 +258,8 @@ class DSdatePickerImpl extends React__default["default"].Component {
   }
 
   render() {
+    var _this = this;
+
     const {
       inputFocused
     } = this.state;
@@ -289,7 +290,7 @@ class DSdatePickerImpl extends React__default["default"].Component {
     const safedate = this.getSafeValue();
     const safeInputValue = this.getSafeInputValue();
     const hasSelectedDate = !!safedate;
-    return /*#__PURE__*/_jsx__default["default"](DSInputGroup__default["default"], {
+    return /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {
       rightAddon: /*#__PURE__*/_jsx__default["default"](DatePickerDropdown, {
         pickerRef: this.state.pickerRef,
         disabled: disabled,
@@ -313,10 +314,11 @@ class DSdatePickerImpl extends React__default["default"].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
             });
           },
@@ -335,7 +337,7 @@ class DSdatePickerImpl extends React__default["default"].Component {
         zIndex: zIndex,
         pickerProps: pickerProps
       })
-    }, void 0, /*#__PURE__*/_jsx__default["default"](DSDateInput.DSDateInputV2, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSDateInputV2, {
       "data-testid": "datepicker-input",
       "aria-label": placeholder || 'Date Picker Input',
       disabled: disabled,

package/cjs/components/DatePickerController/DatePickerController.js

@@ -2,7 +2,12 @@
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var lodash = require('lodash');
 var PropTypes = require('prop-types');
@@ -10,7 +15,7 @@ var moment = require('moment');
 require('react-dates/initialize');
 var reactDates = require('react-dates');
 var dsClassnames = require('@elliemae/ds-classnames');
-var ChevronLeft = require('@elliemae/ds-icons/ChevronLeft');
+var dsIcons = require('@elliemae/ds-icons');
 var defaultPhrases = require('../../defaultPhrases.js');
 var DatePickerRenderMonth = require('../DatePickerRenderMonth/DatePickerRenderMonth.js');
 var DatePickerNavigation = require('../DatePickerNavigation/DatePickerNavigation.js');
@@ -24,7 +29,6 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
-var ChevronLeft__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeft);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -244,7 +248,7 @@ class DSDatePickerController extends React__default["default"].Component {
         }),
         navPrev: /*#__PURE__*/_jsx__default["default"](DatePickerNavigation, {
           className: classNameElement('navigation-prev'),
-          icon: ChevronLeft__default["default"],
+          icon: dsIcons.ChevronLeft,
           innerRef: firstFocusableItem
         }),
         renderMonthElement: DatePickerRenderMonth.renderMonthElement,

package/cjs/components/DatePickerDay/DatePickerDay.js

@@ -7,15 +7,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const Day = ({
-  className = 'date-picker-content-day',
-  date = ''
-}) => /*#__PURE__*/_jsx__default["default"]("div", {
-  className: className,
-  "data-testid": "datepicker-day-".concat(date)
-}, void 0, /*#__PURE__*/_jsx__default["default"]("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__default["default"]("div", {
+    className: className,
+    "data-testid": "datepicker-day-".concat(date)
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "".concat(className, "-half"),
+    "data-testid": "datepicker-day"
+  }, void 0, date));
+};
 
 module.exports = Day;

package/cjs/components/DatePickerDropdown.js

@@ -1,10 +1,15 @@
 'use strict';
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
 var dsClassnames = require('@elliemae/ds-classnames');
-var DSPopper = require('@elliemae/ds-basic/Popper');
+var DSPopper = require('@elliemae/ds-popper');
 var DatePickerPicker = require('./DatePickerPicker/DatePickerPicker.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -23,16 +28,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__default["default"](DSPopper__default["default"], {
     contentComponent: menu,
     isOpen: isOpen,

package/cjs/components/DatePickerHeader/DatePickerHeader.js

@@ -4,16 +4,13 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var moment = require('moment');
-var DSDateInput = require('@elliemae/ds-basic/form/DateInputV2');
-var DSInputGroup = require('@elliemae/ds-basic/form/InputGroup');
+var dsForm = require('@elliemae/ds-form');
 var dsClassnames = require('@elliemae/ds-classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
-var DSDateInput__default = /*#__PURE__*/_interopDefaultLegacy(DSDateInput);
-var DSInputGroup__default = /*#__PURE__*/_interopDefaultLegacy(DSInputGroup);
 
 const DATE_FORMAT = 'MMDDYYYY';
 const blockname = 'date-picker-header';
@@ -21,11 +18,12 @@ const Header = dsClassnames.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] = React.useState(isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format) ? selectedDate.format(DATE_FORMAT) : '');
   React.useEffect(() => {
     if (isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format)) {
@@ -45,7 +43,7 @@ const DatePickerHeader = ({
     }
   };
 
-  return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputGroup__default["default"], {}, void 0, /*#__PURE__*/_jsx__default["default"](DSDateInput__default["default"], {
+  return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSDateInputV2, {
     onChange: handleOnChange,
     onKeyDown: handleOnKeyDown,
     value: value,

package/cjs/components/DatePickerNavigation/DatePickerNavigation.js

@@ -10,20 +10,23 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var ChevronRight__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRight);
 
-const Navigation = ({
-  className = 'date-picker-navigation',
-  icon: Icon$1 = ChevronRight__default["default"],
-  color = Icon.DSIconColors.NEUTRAL,
-  size = Icon.DSIconSizes.S,
-  innerRef
-}) => /*#__PURE__*/_jsx__default["default"]("div", {
-  tabIndex: 0,
-  "data-testid": "date-picker-nav"
-}, void 0, /*#__PURE__*/_jsx__default["default"](Icon$1, {
-  className: className,
-  color: color,
-  innerRef: innerRef,
-  size: size
-}));
+const Navigation = _ref => {
+  let {
+    className = 'date-picker-navigation',
+    icon: Icon$1 = ChevronRight__default["default"],
+    color = Icon.DSIconColors.NEUTRAL,
+    size = Icon.DSIconSizes.S,
+    innerRef
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    tabIndex: 0,
+    "data-testid": "date-picker-nav"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Icon$1, {
+    className: className,
+    color: color,
+    innerRef: innerRef,
+    size: size
+  }));
+};
 
 module.exports = Navigation;

package/cjs/components/DatePickerPicker/DatePickerPicker.js

@@ -8,7 +8,7 @@ require('react');
 var PropTypes = require('prop-types');
 var Icon = require('@elliemae/ds-basic/Icon');
 var DatePicker = require('@elliemae/ds-icons/DatePicker');
-var DSButton = require('@elliemae/ds-basic/Button');
+var DSButton = require('@elliemae/ds-button');
 var propTypes = require('@elliemae/ds-shared/prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/components/DatePickerRange/DatePickerRange.js

@@ -3,12 +3,19 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.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 DatePickerRangeHeader = require('../DatePickerRangeHeader/DatePickerRangeHeader.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -16,7 +23,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
-var ChevronLeft__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeft);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -30,13 +36,14 @@ const {
 const START_DATE = 'startDate';
 const END_DATE = 'endDate';
 
-const DatePickerRangeDate = ({
-  dateStart,
-  dateEnd,
-  displayFormatDay = 'D',
-  showHeader = true,
-  otherProps
-}) => {
+const DatePickerRangeDate = _ref => {
+  let {
+    dateStart,
+    dateEnd,
+    displayFormatDay = 'D',
+    showHeader = true,
+    otherProps
+  } = _ref;
   const [selectedDateStart, setSelectedDateStart] = React.useState(dateStart);
   const [selectedDateEnd, setSelectedDateEnd] = React.useState(dateEnd);
   const [focusedInput, setFocusedInput] = React.useState(START_DATE);
@@ -46,10 +53,11 @@ const DatePickerRangeDate = ({
     setFocusedInput(focusedInput === START_DATE ? END_DATE : START_DATE);
   };
 
-  const handleDatesChange = ({
-    startDate,
-    endDate
-  }) => {
+  const handleDatesChange = _ref2 => {
+    let {
+      startDate,
+      endDate
+    } = _ref2;
     setSelectedDateStart(startDate);
     setSelectedDateEnd(endDate);
   };
@@ -76,7 +84,7 @@ const DatePickerRangeDate = ({
 
   const safeStartDate = getSafeDateStartValue();
   const safeEndDate = getSafeDateEndValue();
-  return /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, showHeader && /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerRangeHeader, {
+  return /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, showHeader && /*#__PURE__*/_jsx__default["default"](DatePickerRangeHeader, {
     onEndInputChange: handleEndInputChange,
     onStartInputChange: handleStartInputChange,
     selectedEndDate: safeEndDate,
@@ -90,16 +98,16 @@ const DatePickerRangeDate = ({
       focused: true,
       focusedInput: focusedInput,
       hideKeyboardShortcutsPanel: 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
       }),
       onDatesChange: handleDatesChange,
       onFocusChange: handleFocusChange,
-      renderDayContents: date => /*#__PURE__*/_jsx__default["default"](dsDatePicker.DatePickerDay, {
+      renderDayContents: date => /*#__PURE__*/_jsx__default["default"](DatePickerDay, {
         className: classNameElement('day-contents'),
         date: date.format(displayFormatDay)
       }),

package/cjs/components/DatePickerRangeHeader/DatePickerRangeHeader.js

@@ -4,16 +4,13 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var moment = require('moment');
-var DSDateInput = require('@elliemae/ds-basic/form/DateInputV2');
-var DSInputGroup = require('@elliemae/ds-basic/form/InputGroup');
+var dsForm = require('@elliemae/ds-form');
 var dsClassnames = require('@elliemae/ds-classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
-var DSDateInput__default = /*#__PURE__*/_interopDefaultLegacy(DSDateInput);
-var DSInputGroup__default = /*#__PURE__*/_interopDefaultLegacy(DSInputGroup);
 
 const blockname = 'date-range-picker';
 const DATE_FORMAT = 'MMDDYYYY'; // When year is greater than 999 it means the user finished writing
@@ -21,21 +18,25 @@ const DATE_FORMAT = 'MMDDYYYY'; // When year is greater than 999 it means the us
 // to be higher than 999
 
 const MAGIC_NUMBER = 999;
-const Header = dsClassnames.aggregatedClasses('div')(blockname, 'header', ({
-  invalidDate
-}) => ({
-  invalidDate
-}));
-
-const DatePickerRangeHeader = ({
-  onStartInputChange = () => null,
-  onEndInputChange = () => null,
-  onFocusChange = () => null,
-  selectedStartDate,
-  selectedEndDate,
-  handleDatesChange,
-  autoJumpOnEdit = true
-}) => {
+const Header = dsClassnames.aggregatedClasses('div')(blockname, 'header', _ref => {
+  let {
+    invalidDate
+  } = _ref;
+  return {
+    invalidDate
+  };
+});
+
+const DatePickerRangeHeader = _ref2 => {
+  let {
+    onStartInputChange = () => null,
+    onEndInputChange = () => null,
+    onFocusChange = () => null,
+    selectedStartDate,
+    selectedEndDate,
+    handleDatesChange,
+    autoJumpOnEdit = true
+  } = _ref2;
   const [startValue, setStartValue] = React.useState(selectedStartDate);
   const [endValue, setEndValue] = React.useState(selectedEndDate);
   const startInputRef = React.useRef();
@@ -119,7 +120,7 @@ const DatePickerRangeHeader = ({
     }
   };
 
-  return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputGroup__default["default"], {}, void 0, /*#__PURE__*/_jsx__default["default"](DSDateInput__default["default"], {
+  return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSDateInputV2, {
     containerProps: {
       'data-testid': 'start-date'
     },
@@ -128,7 +129,7 @@ const DatePickerRangeHeader = ({
     onFocus: () => handleOnFocus('startDate'),
     onKeyDown: handleOnKeyDownStart,
     value: startValue
-  }), /*#__PURE__*/_jsx__default["default"](DSDateInput__default["default"], {
+  }), /*#__PURE__*/_jsx__default["default"](dsForm.DSDateInputV2, {
     containerProps: {
       'data-testid': 'end-date'
     },