orcs-design-system 3.2.4 → 3.2.6

package/es/components/DatePicker/DatePicker.stories.js

@@ -1,37 +1,30 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from "react";
 import DatePicker from ".";
 import Box from "../Box";
 import Spacer from "../Spacer";
 import "react-dates/lib/css/_datepicker.css";
 import "react-dates/initialize";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/DatePicker",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      bg: "greyLightest",
-      height: "400px",
-      p: "r"
-    }, storyFn());
-  }],
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    bg: "greyLightest",
+    height: "400px",
+    p: "r",
+    children: storyFn()
+  })],
   component: DatePicker
 };
-var SingleDate = function SingleDate() {
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    date = _useState2[0],
-    setDate = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    focused = _useState4[0],
-    setFocused = _useState4[1];
-  var onDateChange = function onDateChange(selectedDate) {
+const SingleDate = () => {
+  const [date, setDate] = useState(null);
+  const [focused, setFocused] = useState(false);
+  const onDateChange = selectedDate => {
     setDate(selectedDate);
   };
-  var onFocusChange = function onFocusChange(el) {
+  const onFocusChange = el => {
     setFocused(el.focused);
   };
-  return /*#__PURE__*/React.createElement(DatePicker, {
+  return /*#__PURE__*/_jsx(DatePicker, {
     single: true,
     date: date,
     placeholder: "Date",
@@ -42,54 +35,46 @@ var SingleDate = function SingleDate() {
     displayFormat: "DD/MM/YYYY"
   });
 };
-var InvalidRequiredDate = function InvalidRequiredDate() {
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    date = _useState6[0],
-    setDate = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    focused = _useState8[0],
-    setFocused = _useState8[1];
-  var onDateChange = function onDateChange(selectedDate) {
+const InvalidRequiredDate = () => {
+  const [date, setDate] = useState(null);
+  const [focused, setFocused] = useState(false);
+  const onDateChange = selectedDate => {
     setDate(selectedDate);
   };
-  var onFocusChange = function onFocusChange(el) {
+  const onFocusChange = el => {
     setFocused(el.focused);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DatePicker, {
-    id: "invalid date",
-    single: true,
-    label: "Project start date - date required",
-    required: true,
-    date: date,
-    invalid: true,
-    placeholder: "Date",
-    focused: focused,
-    onDateChange: onDateChange,
-    onFocusChange: onFocusChange,
-    numberOfMonths: 1,
-    displayFormat: "DD/MM/YYYY"
-  }));
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(DatePicker, {
+      id: "invalid date",
+      single: true,
+      label: "Project start date - date required",
+      required: true,
+      date: date,
+      invalid: true,
+      placeholder: "Date",
+      focused: focused,
+      onDateChange: onDateChange,
+      onFocusChange: onFocusChange,
+      numberOfMonths: 1,
+      displayFormat: "DD/MM/YYYY"
+    })
+  });
 };
-var DateRange = function DateRange() {
-  var _useState9 = useState({}),
-    _useState10 = _slicedToArray(_useState9, 2),
-    dates = _useState10[0],
-    setDates = _useState10[1];
-  var _useState11 = useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    focused = _useState12[0],
-    setFocused = _useState12[1];
-  var onDatesChange = function onDatesChange(_ref) {
-    var startDate = _ref.startDate,
-      endDate = _ref.endDate;
+const DateRange = () => {
+  const [dates, setDates] = useState({});
+  const [focused, setFocused] = useState(null);
+  const onDatesChange = _ref => {
+    let {
+      startDate,
+      endDate
+    } = _ref;
     setDates({
-      startDate: startDate,
-      endDate: endDate
+      startDate,
+      endDate
     });
   };
-  return /*#__PURE__*/React.createElement(DatePicker, {
+  return /*#__PURE__*/_jsx(DatePicker, {
     range: true,
     startDate: dates.startDate,
     endDate: dates.endDate,
@@ -99,73 +84,56 @@ var DateRange = function DateRange() {
     displayFormat: "DD/MM/YYYY"
   });
 };
-var ShowClearDates = function ShowClearDates() {
-  var _useState13 = useState(null),
-    _useState14 = _slicedToArray(_useState13, 2),
-    date = _useState14[0],
-    setDate = _useState14[1];
-  var _useState15 = useState({}),
-    _useState16 = _slicedToArray(_useState15, 2),
-    dates = _useState16[0],
-    setDates = _useState16[1];
-  var _useState17 = useState(null),
-    _useState18 = _slicedToArray(_useState17, 2),
-    focused1 = _useState18[0],
-    setFocused1 = _useState18[1];
-  var _useState19 = useState(null),
-    _useState20 = _slicedToArray(_useState19, 2),
-    focused2 = _useState20[0],
-    setFocused2 = _useState20[1];
-  var onDatesChange = function onDatesChange(_ref2) {
-    var startDate = _ref2.startDate,
-      endDate = _ref2.endDate;
+const ShowClearDates = () => {
+  const [date, setDate] = useState(null);
+  const [dates, setDates] = useState({});
+  const [focused1, setFocused1] = useState(null);
+  const [focused2, setFocused2] = useState(null);
+  const onDatesChange = _ref2 => {
+    let {
+      startDate,
+      endDate
+    } = _ref2;
     setDates({
-      startDate: startDate,
-      endDate: endDate
+      startDate,
+      endDate
     });
   };
-  var onDateChange = function onDateChange(selectedDate) {
+  const onDateChange = selectedDate => {
     setDate(selectedDate);
   };
-  var onFocusChange = function onFocusChange(el) {
+  const onFocusChange = el => {
     setFocused1(el.focused);
     setFocused2(el.focused);
   };
-  return /*#__PURE__*/React.createElement(Spacer, {
-    mb: "l"
-  }, /*#__PURE__*/React.createElement(DatePicker, {
-    single: true,
-    showClearDate: true,
-    date: date,
-    placeholder: "Date",
-    focused: focused1,
-    onDateChange: onDateChange,
-    onFocusChange: onFocusChange,
-    numberOfMonths: 1,
-    displayFormat: "DD/MM/YYYY"
-  }), /*#__PURE__*/React.createElement(DatePicker, {
-    range: true,
-    showClearDates: true,
-    startDate: dates.startDate,
-    endDate: dates.endDate,
-    onDatesChange: onDatesChange,
-    focusedInput: focused2,
-    onFocusChange: setFocused2,
-    displayFormat: "DD/MM/YYYY"
-  }));
-};
-export var singleDate = function singleDate() {
-  return /*#__PURE__*/React.createElement(SingleDate, null);
-};
-export var invalidRequiredDate = function invalidRequiredDate() {
-  return /*#__PURE__*/React.createElement(InvalidRequiredDate, null);
-};
-export var dateRange = function dateRange() {
-  return /*#__PURE__*/React.createElement(DateRange, null);
-};
-export var showClearDates = function showClearDates() {
-  return /*#__PURE__*/React.createElement(ShowClearDates, null);
+  return /*#__PURE__*/_jsxs(Spacer, {
+    mb: "l",
+    children: [/*#__PURE__*/_jsx(DatePicker, {
+      single: true,
+      showClearDate: true,
+      date: date,
+      placeholder: "Date",
+      focused: focused1,
+      onDateChange: onDateChange,
+      onFocusChange: onFocusChange,
+      numberOfMonths: 1,
+      displayFormat: "DD/MM/YYYY"
+    }), /*#__PURE__*/_jsx(DatePicker, {
+      range: true,
+      showClearDates: true,
+      startDate: dates.startDate,
+      endDate: dates.endDate,
+      onDatesChange: onDatesChange,
+      focusedInput: focused2,
+      onFocusChange: setFocused2,
+      displayFormat: "DD/MM/YYYY"
+    })]
+  });
 };
+export const singleDate = () => /*#__PURE__*/_jsx(SingleDate, {});
+export const invalidRequiredDate = () => /*#__PURE__*/_jsx(InvalidRequiredDate, {});
+export const dateRange = () => /*#__PURE__*/_jsx(DateRange, {});
+export const showClearDates = () => /*#__PURE__*/_jsx(ShowClearDates, {});
 singleDate.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/DatePicker/index.js

@@ -1,16 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-var _excluded = ["single", "range", "width", "height", "zIndex", "invalid", "required", "label", "id", "startDateId", "boldLabel"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from "react";
 import PropTypes from "prop-types";
 import momentPropTypes from "react-moment-proptypes";
@@ -24,7 +11,8 @@ import { themeGet } from "@styled-system/theme-get";
 import DateRangePickerShape from "react-dates/lib/shapes/DateRangePickerShape";
 import { DateRangePickerPhrases } from "react-dates/lib/defaultPhrases";
 import { START_DATE, END_DATE, HORIZONTAL_ORIENTATION, ANCHOR_LEFT, NAV_POSITION_TOP } from "react-dates/lib/constants";
-var defaultProps = {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const defaultProps = {
   autoFocus: false,
   autoFocusEndDate: false,
   initialStartDate: null,
@@ -62,197 +50,92 @@ var defaultProps = {
   navPosition: NAV_POSITION_TOP,
   navPrev: null,
   navNext: null,
-  onPrevMonthClick: function onPrevMonthClick() {},
-  onNextMonthClick: function onNextMonthClick() {},
-  onClose: function onClose() {},
+  onPrevMonthClick() {},
+  onNextMonthClick() {},
+  onClose() {},
   // day presentation and interaction related props
   renderCalendarDay: undefined,
   renderDayContents: null,
   minimumNights: 1,
   enableOutsideDays: false,
-  isDayBlocked: function isDayBlocked() {
-    return false;
-  },
-  isOutsideRange: function isOutsideRange() {
-    return false;
-  },
-  isDayHighlighted: function isDayHighlighted() {
-    return false;
-  },
+  isDayBlocked: () => false,
+  isOutsideRange: () => false,
+  isDayHighlighted: () => false,
   displayFormat: "DD/MM/YYYY",
   monthFormat: "MMMM YYYY",
   phrases: DateRangePickerPhrases,
-  stateDateWrapper: function stateDateWrapper(date) {
-    return date;
-  }
+  stateDateWrapper: date => date
 };
-var DatePickerLabel = styled.label.withConfig({
+const DatePickerLabel = styled.label.withConfig({
   displayName: "DatePicker__DatePickerLabel",
   componentId: "sc-15292wq-0"
-})(["display:block;margin-bottom:", ";font-size:", ";font-weight:", ";color:", ";"], themeGet("space.xs"), themeGet("fontSizes.1"), function (props) {
-  return props.boldLabel ? themeGet("fontWeights.2") : themeGet("fontWeights.1");
-}, function (props) {
-  return props.invalid ? themeGet("colors.dangerDark") : themeGet("colors.greyDarkest");
-});
-var DatePickerContainer = styled.div.withConfig({
+})(["display:block;margin-bottom:", ";font-size:", ";font-weight:", ";color:", ";"], themeGet("space.xs"), themeGet("fontSizes.1"), props => props.boldLabel ? themeGet("fontWeights.2") : themeGet("fontWeights.1"), props => props.invalid ? themeGet("colors.dangerDark") : themeGet("colors.greyDarkest"));
+const DatePickerContainer = styled.div.withConfig({
   displayName: "DatePicker__DatePickerContainer",
   componentId: "sc-15292wq-1"
-})([".SingleDatePickerInput,.DateRangePickerInput{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;border:0;border-radius:0;background:transparent;}.SingleDatePickerInput__withBorder,.DateRangePickerInput__withBorder{border:none;border-radius:0;}.DateInput{width:", ";background:none;position:relative;}.DateRangePickerInput_arrow_svg path{fill:", ";}.DateRangePickerInput_arrow{display:none;}.SingleDatePicker_picker,.DateRangePicker_picker{background:none;z-index:", ";}.DateInput_input{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:", ";font-weight:", ";z-index:1;transition:", ";background:", ";color:", ";height:", ";width:", ";padding:5px 12px 6px 12px;border-radius:", ";border:1px solid ", ";&:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", " ", ";border:1px solid ", ";}&::placeholder{color:", ";}}.DateInput_input[disabled]{background:", ";color:", ";}.DateInput_input__focused{outline:0;box-shadow:", " ", ";border:1px solid ", ";}.DateRangePickerInput .DateInput:first-child .DateInput_input{border-radius:", ";}.DateRangePickerInput .DateInput:last-child .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input__disabled{border-radius:", ";}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{padding-right:0;.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{display:none;}.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .SingleDatePickerInput_clearDate,.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .DateRangePickerInput_clearDates{display:flex;}}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{display:flex;align-items:center;.DateInput:first-child .DateInput_input:not([value=\"\"]){border-radius:", ";}}}.DateRangePickerInput__showClearDates{.DateInput:first-child .DateInput_input:not([value=\"\"]){border-radius:", ";}}}.DateRangePickerInput__showClearDates .DateInput:first-child:has(.DateInput_input:not([value=\"\"])) ~ .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput:first-child ~ .DateInput .DateInput_input:not([value=\"\"]){border-radius:0;}.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{background-color:", ";border-radius:", ";height:", ";display:flex;align-items:center;justify-content:center;margin:0;position:relative;top:auto;right:auto;transform:none;border:1px solid ", ";&:hover,&:focus{outline:0;border:1px solid ", ";svg path{fill:", ";}}.DayPickerKeyboardShortcuts_panel{color:", ";}.CalendarDay__default{transition:", ";}.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover{background:", ";border:1px solid ", ";}.DayPickerKeyboardShortcuts_show__bottomRight{border-radius:0 0 3px 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__topRight{border-radius:0 3px 0 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__bottomRight:before,.DayPickerKeyboardShortcuts_show__topRight:before{border-right:33px solid ", ";transition:", ";}.DayPickerKeyboardShortcuts_show__bottomRight:hover:before,.DayPickerKeyboardShortcuts_show__topRight:hover:before{border-right:33px solid ", ";}.CalendarDay__selected_span,.CalendarDay__hovered_span,.CalendarDay__hovered_span:active{background:", ";border:1px solid ", ";color:", ";}.CalendarDay__hovered_span:hover,.CalendarDay__default:hover{background:", ";border:1px double ", ";color:", ";}.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover{background:", ";border:1px solid ", ";}.DateInput_fang{margin-top:1px;z-index:", ";}"], function (props) {
-  return props.width ? props.width : "110px";
-}, function (props) {
-  return themeGet("colors.greyLight")(props);
-}, function (props) {
-  return props.zIndex ? props.zIndex : "1";
-}, function (props) {
-  return themeGet("fontSizes.2")(props);
-}, function (props) {
-  return themeGet("fontWeights.1")(props);
-}, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return themeGet("colors.white")(props);
-}, function (props) {
-  return themeGet("colors.greyDarkest")(props);
-}, function (props) {
-  return props.height ? props.height : "40px";
-}, function (props) {
-  return props.width ? props.width : "110px";
-}, function (props) {
-  return themeGet("radii.2")(props);
-}, function (props) {
-  return props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.black30")(props);
-}, function (props) {
-  return props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props);
-}, function (props) {
-  return themeGet("shadows.thinOutline")(props);
-}, function (props) {
-  return themeGet("colors.primary30")(props);
-}, function (props) {
-  return props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props);
-}, function (props) {
-  return themeGet("colors.grey")(props);
-}, function (props) {
-  return themeGet("colors.greyLightest")(props);
-}, function (props) {
-  return themeGet("colors.grey")(props);
-}, function (props) {
-  return themeGet("shadows.thinOutline")(props);
-}, function (props) {
-  return themeGet("colors.primary30")(props);
-}, function (props) {
-  return themeGet("colors.primary")(props);
-}, function (props) {
-  return "".concat(themeGet("radii.2")(props), " 0 0 ").concat(themeGet("radii.2")(props));
-}, function (props) {
-  return "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0");
-}, function (props) {
-  return "".concat(themeGet("radii.2")(props), " 0 0 ").concat(themeGet("radii.2")(props));
-}, function (props) {
-  return "".concat(themeGet("radii.2")(props), " 0 0 ").concat(themeGet("radii.2")(props));
-}, function (props) {
-  return themeGet("colors.greyLighter")(props);
-}, function (props) {
-  return "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0");
-}, function (props) {
-  return props.height ? props.height : "40px";
-}, function (props) {
-  return props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.black30")(props);
-}, function (props) {
-  return props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props);
-}, function (props) {
-  return props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props);
-}, function (props) {
-  return themeGet("colors.greyDarkest")(props);
-}, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return themeGet("colors.primary")(props);
-}, function (props) {
-  return themeGet("colors.primary")(props);
-}, function (props) {
-  return themeGet("colors.primary")(props);
-}, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return themeGet("colors.primaryDark")(props);
-}, function (props) {
-  return themeGet("colors.primaryLight")(props);
-}, function (props) {
-  return themeGet("colors.primaryLight")(props);
-}, function (props) {
-  return themeGet("colors.white")(props);
-}, function (props) {
-  return themeGet("colors.primary")(props);
-}, function (props) {
-  return themeGet("colors.primary")(props);
-}, function (props) {
-  return themeGet("colors.white")(props);
-}, function (props) {
-  return themeGet("colors.primaryDarker")(props);
-}, function (props) {
-  return themeGet("colors.primaryDarker")(props);
-}, function (props) {
-  return props.zIndex ? props.zIndex + 1 : "2";
-});
+})([".SingleDatePickerInput,.DateRangePickerInput{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;border:0;border-radius:0;background:transparent;}.SingleDatePickerInput__withBorder,.DateRangePickerInput__withBorder{border:none;border-radius:0;}.DateInput{width:", ";background:none;position:relative;}.DateRangePickerInput_arrow_svg path{fill:", ";}.DateRangePickerInput_arrow{display:none;}.SingleDatePicker_picker,.DateRangePicker_picker{background:none;z-index:", ";}.DateInput_input{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:", ";font-weight:", ";z-index:1;transition:", ";background:", ";color:", ";height:", ";width:", ";padding:5px 12px 6px 12px;border-radius:", ";border:1px solid ", ";&:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", " ", ";border:1px solid ", ";}&::placeholder{color:", ";}}.DateInput_input[disabled]{background:", ";color:", ";}.DateInput_input__focused{outline:0;box-shadow:", " ", ";border:1px solid ", ";}.DateRangePickerInput .DateInput:first-child .DateInput_input{border-radius:", ";}.DateRangePickerInput .DateInput:last-child .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input__disabled{border-radius:", ";}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{padding-right:0;.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{display:none;}.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .SingleDatePickerInput_clearDate,.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .DateRangePickerInput_clearDates{display:flex;}}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{display:flex;align-items:center;.DateInput:first-child .DateInput_input:not([value=\"\"]){border-radius:", ";}}}.DateRangePickerInput__showClearDates{.DateInput:first-child .DateInput_input:not([value=\"\"]){border-radius:", ";}}}.DateRangePickerInput__showClearDates .DateInput:first-child:has(.DateInput_input:not([value=\"\"])) ~ .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput:first-child ~ .DateInput .DateInput_input:not([value=\"\"]){border-radius:0;}.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{background-color:", ";border-radius:", ";height:", ";display:flex;align-items:center;justify-content:center;margin:0;position:relative;top:auto;right:auto;transform:none;border:1px solid ", ";&:hover,&:focus{outline:0;border:1px solid ", ";svg path{fill:", ";}}.DayPickerKeyboardShortcuts_panel{color:", ";}.CalendarDay__default{transition:", ";}.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover{background:", ";border:1px solid ", ";}.DayPickerKeyboardShortcuts_show__bottomRight{border-radius:0 0 3px 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__topRight{border-radius:0 3px 0 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__bottomRight:before,.DayPickerKeyboardShortcuts_show__topRight:before{border-right:33px solid ", ";transition:", ";}.DayPickerKeyboardShortcuts_show__bottomRight:hover:before,.DayPickerKeyboardShortcuts_show__topRight:hover:before{border-right:33px solid ", ";}.CalendarDay__selected_span,.CalendarDay__hovered_span,.CalendarDay__hovered_span:active{background:", ";border:1px solid ", ";color:", ";}.CalendarDay__hovered_span:hover,.CalendarDay__default:hover{background:", ";border:1px double ", ";color:", ";}.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover{background:", ";border:1px solid ", ";}.DateInput_fang{margin-top:1px;z-index:", ";}"], props => props.width ? props.width : "110px", props => themeGet("colors.greyLight")(props), props => props.zIndex ? props.zIndex : "1", props => themeGet("fontSizes.2")(props), props => themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.white")(props), props => themeGet("colors.greyDarkest")(props), props => props.height ? props.height : "40px", props => props.width ? props.width : "110px", props => themeGet("radii.2")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.black30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.grey")(props), props => themeGet("colors.greyLightest")(props), props => themeGet("colors.grey")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => themeGet("colors.primary")(props), props => "".concat(themeGet("radii.2")(props), " 0 0 ").concat(themeGet("radii.2")(props)), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => "".concat(themeGet("radii.2")(props), " 0 0 ").concat(themeGet("radii.2")(props)), props => "".concat(themeGet("radii.2")(props), " 0 0 ").concat(themeGet("radii.2")(props)), props => themeGet("colors.greyLighter")(props), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => props.height ? props.height : "40px", props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.black30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primaryDark")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primaryDarker")(props), props => themeGet("colors.primaryDarker")(props), props => props.zIndex ? props.zIndex + 1 : "2");
 
 /**
  *
  * Datepicker uses airbnb's react datepicker under the hood. This is just a wrapper to override styles, the only props you need to specify is either single or range. For all functionality and additional required props refer to documentation here: <https://github.com/airbnb/react-dates>
  */
-var DatePicker = /*#__PURE__*/function (_React$Component) {
-  _inherits(DatePicker, _React$Component);
-  var _super = _createSuper(DatePicker);
-  function DatePicker() {
-    _classCallCheck(this, DatePicker);
-    return _super.apply(this, arguments);
+
+class DatePicker extends React.Component {
+  render() {
+    const {
+      single,
+      range,
+      width,
+      height,
+      zIndex,
+      invalid,
+      required,
+      label,
+      id,
+      startDateId,
+      boldLabel,
+      ...pickerProps
+    } = this.props;
+    return /*#__PURE__*/_jsx(DatePickerContainer, {
+      width: width,
+      height: height,
+      invalid: invalid,
+      zIndex: zIndex,
+      required: required,
+      children: single ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [label && /*#__PURE__*/_jsxs(DatePickerLabel, {
+          htmlFor: id,
+          invalid: invalid,
+          boldLabel: boldLabel,
+          children: [label, required && /*#__PURE__*/_jsx(Small, {
+            color: "danger",
+            ml: "xs",
+            children: "*"
+          })]
+        }), /*#__PURE__*/_jsx(SingleDatePicker, {
+          id: id,
+          ...pickerProps
+        })]
+      }) : range ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [label && /*#__PURE__*/_jsxs(DatePickerLabel, {
+          htmlFor: startDateId,
+          invalid: invalid,
+          boldLabel: boldLabel,
+          children: [label, required && /*#__PURE__*/_jsx(Small, {
+            color: "danger",
+            ml: "xs",
+            children: "*"
+          })]
+        }), /*#__PURE__*/_jsx(DateRangePicker, {
+          id: id,
+          ...pickerProps
+        })]
+      }) : null
+    });
   }
-  _createClass(DatePicker, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        single = _this$props.single,
-        range = _this$props.range,
-        width = _this$props.width,
-        height = _this$props.height,
-        zIndex = _this$props.zIndex,
-        invalid = _this$props.invalid,
-        required = _this$props.required,
-        label = _this$props.label,
-        id = _this$props.id,
-        startDateId = _this$props.startDateId,
-        boldLabel = _this$props.boldLabel,
-        pickerProps = _objectWithoutProperties(_this$props, _excluded);
-      return /*#__PURE__*/React.createElement(DatePickerContainer, {
-        width: width,
-        height: height,
-        invalid: invalid,
-        zIndex: zIndex,
-        required: required
-      }, single ? /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(DatePickerLabel, {
-        htmlFor: id,
-        invalid: invalid,
-        boldLabel: boldLabel
-      }, label, required && /*#__PURE__*/React.createElement(Small, {
-        color: "danger",
-        ml: "xs"
-      }, "*")), /*#__PURE__*/React.createElement(SingleDatePicker, _extends({
-        id: id
-      }, pickerProps))) : range ? /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(DatePickerLabel, {
-        htmlFor: startDateId,
-        invalid: invalid,
-        boldLabel: boldLabel
-      }, label, required && /*#__PURE__*/React.createElement(Small, {
-        color: "danger",
-        ml: "xs"
-      }, "*")), /*#__PURE__*/React.createElement(DateRangePicker, _extends({
-        id: id
-      }, pickerProps))) : null);
-    }
-  }]);
-  return DatePicker;
-}(React.Component);
+}
 DatePicker.defaultProps = defaultProps;
-DatePicker.propTypes = _objectSpread({
+DatePicker.propTypes = {
   /** Specifies a single date picker */
   single: PropTypes.bool,
   /** Specifies a range date picker */
@@ -289,8 +172,9 @@ DatePicker.propTypes = _objectSpread({
   autoFocusEndDate: PropTypes.bool,
   stateDateWrapper: PropTypes.func,
   initialStartDate: momentPropTypes.momentObj,
-  initialEndDate: momentPropTypes.momentObj
-}, omit(DateRangePickerShape, ["startDate", "endDate", "onDatesChange", "focusedInput", "onFocusChange"]));
+  initialEndDate: momentPropTypes.momentObj,
+  ...omit(DateRangePickerShape, ["startDate", "endDate", "onDatesChange", "focusedInput", "onFocusChange"])
+};
 
 /**
  * Test description