@dfds-ui/react-components 2.0.24-alpha.1a9a66ce → 2.0.24-alpha.773a7548

package/cjs/date-range-picker/DateRangePicker.js

@@ -0,0 +1,291 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactDates = require("react-dates");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _moment = _interopRequireDefault(require("moment"));
+var _react = _interopRequireWildcard(require("react"));
+require("react-dates/initialize");
+var _react2 = require("@emotion/react");
+var _icons = require("@dfds-ui/icons");
+var _useMedia2 = _interopRequireDefault(require("../common/use-media"));
+var _miniMoize = require("../common/miniMoize");
+var _DatePickerDefaultStyles = _interopRequireDefault(require("./DatePickerDefaultStyles"));
+var _DatePickerDfdsStyles = _interopRequireDefault(require("./DatePickerDfdsStyles"));
+var _LockBodyScroll = _interopRequireDefault(require("../common/LockBodyScroll"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /* eslint-disable deprecation/deprecation */ /* eslint-disable @typescript-eslint/restrict-plus-operands */ /* eslint-disable @typescript-eslint/no-non-null-assertion */ // eslint-disable-next-line import/no-extraneous-dependencies
+// Do a wrapper to support styled components: https://github.com/airbnb/react-dates/issues/1030#issuecomment-388227454
+const DateRangePicker = props => {
+  const _useState = (0, _react.useState)(toMoment(props.startDates.initial)),
+    _useState2 = _slicedToArray(_useState, 2),
+    startDate = _useState2[0],
+    setStartDate = _useState2[1];
+  const _useState3 = (0, _react.useState)(toMoment(props.endDates.initial)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    endDate = _useState4[0],
+    setEndDate = _useState4[1];
+  const _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showCalendar = _useState6[0],
+    setShowCalendar = _useState6[1];
+  const _useState7 = (0, _react.useState)('startDate'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    focusedInput = _useState8[0],
+    setFocusedInput = _useState8[1];
+  const _useMedia = (0, _useMedia2.default)(['(max-width: 64em)', '(min-width: 78.063em)'], [{
+      numberOfMonths: props.numberOfMobileMonths || 12,
+      mobileState: true,
+      size: 40
+    }, {
+      numberOfMonths: 2,
+      mobileState: false,
+      size: 48
+    }], {
+      numberOfMonths: 1,
+      mobileState: false,
+      size: 48
+    }),
+    numberOfMonths = _useMedia.numberOfMonths,
+    mobileState = _useMedia.mobileState,
+    size = _useMedia.size;
+  _moment.default.locale(props.locale);
+  (0, _moment.default)().weekday(0);
+  (0, _react.useEffect)(() => {
+    setStartDate(toMoment(props.startDates.initial));
+    setEndDate(toMoment(props.endDates.initial));
+  }, [props.startDates.initial, props.endDates.initial]);
+  const closeExceptionDivOut = (0, _react.useRef)(null);
+  const closeExceptionImgOut = (0, _react.useRef)(null);
+  const startCalendarClicked = () => {
+    setShowCalendar(prev => !prev);
+    setFocusedInput('startDate');
+  };
+  const endCalendarClicked = () => {
+    setShowCalendar(prev => !prev);
+    setFocusedInput('endDate');
+  };
+  const onOutsideClick = ({
+    target
+  }) => {
+    if (target === closeExceptionDivOut.current || target === closeExceptionImgOut.current) {
+      return;
+    }
+    setShowCalendar(false);
+    setFocusedInput('startDate');
+    props.onDateChange(getKeyStr(startDate), getKeyStr(endDate));
+  };
+  const renderCalendarInfo = () => props.infoLabel ? (0, _react2.jsx)("div", {
+    className: "dateRangePickerInfo"
+  }, (0, _react2.jsx)("span", {
+    className: "dateRangePickerInfo__legend"
+  }), (0, _react2.jsx)("p", {
+    className: "dateRangePickerInfo__info"
+  }, props.infoLabel)) : '';
+  const disabledDates = (0, _miniMoize.miniMoize)((focusedInput, start, startDisabledDates, endDisabledDates) => buildMap(focusedInput !== 'endDate' ? startDisabledDates : (startDisabledDates || []).filter(d => d < start).concat(endDisabledDates)));
+  const _isDayBlocked = date => {
+    const startDateStr = getKeyStr(startDate);
+    const disabled = disabledDates(focusedInput, startDateStr, props.startDates.disabledDates, props.endDates.disabledDates);
+    const dateN = getKeyStr(date);
+    if (!dateN) {
+      return false;
+    }
+    const d = focusedInput !== 'endDate' ? props.startDates : props.endDates;
+    const min = props.startDates.minDate;
+    if (disabled[dateN]) {
+      return true;
+    }
+    if (min && dateN && dateN < min) {
+      return true;
+    }
+    if (d.maxDate && dateN && dateN > d.maxDate) {
+      return true;
+    }
+    if (focusedInput === 'endDate' && startDateStr && startDateStr < dateN && dateN < props.endDates.minDate) {
+      return true;
+    }
+    return false;
+  };
+  const offerDates = (0, _miniMoize.miniMoize)((focusedInput, startOffers, endOffers) => buildMap(focusedInput !== 'endDate' ? startOffers : endOffers));
+  const isOfferValid = date => {
+    const map = offerDates(focusedInput, props.startDates.offerDates, props.endDates.offerDates);
+    return map[getKeyStr(date)];
+  };
+  const minimumNights = () => {
+    const start = toMoment(props.startDates.initial);
+    const end = toMoment(props.endDates.minDate);
+    return end && start ? end.diff(start, 'days') : 0;
+  };
+  const initialMonth = () => (mobileState ? toMoment(props.startDates.minDate) : startDate) || (0, _moment.default)();
+  const sharedCustomProps = {
+    hideKeyboardShortcutsPanel: true,
+    navPrev: (0, _react2.jsx)(_icons.LeftLink, {
+      "aria-label": "Previous Month"
+    }),
+    navNext: (0, _react2.jsx)(_icons.RightLink, {
+      "aria-label": "Next Month"
+    }),
+    weekDayFormat: 'ddd',
+    daySize: size,
+    monthFormat: 'MMMM YYYY',
+    dayAriaLabelFormat: 'YYYY-MM-DD',
+    transitionDuration: 100,
+    numberOfMonths,
+    onOutsideClick,
+    isDayBlocked: d => _isDayBlocked(d),
+    isDayHighlighted: d => isOfferValid(d),
+    initialVisibleMonth: initialMonth,
+    renderCalendarInfo
+  };
+  return (0, _react2.jsx)(_LockBodyScroll.default, {
+    enabled: mobileState && showCalendar
+  }, (0, _react2.jsx)("div", {
+    className: 'outer ' + props.className,
+    css: /*#__PURE__*/(0, _react2.css)(_DatePickerDefaultStyles.default, ";", _DatePickerDfdsStyles.default, ";position:relative;" + (process.env.NODE_ENV === "production" ? "" : ";label:DateRangePicker;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9kYXRlLXJhbmdlLXBpY2tlci9EYXRlUmFuZ2VQaWNrZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1LZ0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2RhdGUtcmFuZ2UtcGlja2VyL0RhdGVSYW5nZVBpY2tlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSBkZXByZWNhdGlvbi9kZXByZWNhdGlvbiAqL1xuLyogZXNsaW50LWRpc2FibGUgQHR5cGVzY3JpcHQtZXNsaW50L3Jlc3RyaWN0LXBsdXMtb3BlcmFuZHMgKi9cbi8qIGVzbGludC1kaXNhYmxlIEB0eXBlc2NyaXB0LWVzbGludC9uby1ub24tbnVsbC1hc3NlcnRpb24gKi9cbmltcG9ydCB7IERheVBpY2tlclJhbmdlQ29udHJvbGxlciwgRm9jdXNlZElucHV0U2hhcGUsIERheVBpY2tlclNpbmdsZURhdGVDb250cm9sbGVyIH0gZnJvbSAncmVhY3QtZGF0ZXMnXG5pbXBvcnQgY2xhc3NOYW1lcyBmcm9tICdjbGFzc25hbWVzJ1xuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGltcG9ydC9uby1leHRyYW5lb3VzLWRlcGVuZGVuY2llc1xuaW1wb3J0IG1vbWVudCwgeyBNb21lbnQgfSBmcm9tICdtb21lbnQnXG5pbXBvcnQgUmVhY3QsIHsgdXNlU3RhdGUsIHVzZVJlZiwgdXNlRWZmZWN0IH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgJ3JlYWN0LWRhdGVzL2luaXRpYWxpemUnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IENsb3NlLCBSaWdodExpbmssIExlZnRMaW5rLCBDYWxlbmRhck91dGJvdW5kLCBDYWxlbmRhclJldHVybiB9IGZyb20gJ0BkZmRzLXVpL2ljb25zJ1xuaW1wb3J0IHVzZU1lZGlhIGZyb20gJy4uL2NvbW1vbi91c2UtbWVkaWEnXG5pbXBvcnQgeyBtaW5pTW9pemUgfSBmcm9tICcuLi9jb21tb24vbWluaU1vaXplJ1xuaW1wb3J0IERhdGVQaWNrZXJEZWZhdWx0U3R5bGVzIGZyb20gJy4vRGF0ZVBpY2tlckRlZmF1bHRTdHlsZXMnXG5pbXBvcnQgRGF0ZVBpY2tlckRmZHNTdHlsZXMgZnJvbSAnLi9EYXRlUGlja2VyRGZkc1N0eWxlcydcbmltcG9ydCBMb2NrQm9keVNjcm9sbCBmcm9tICcuLi9jb21tb24vTG9ja0JvZHlTY3JvbGwnXG5pbnRlcmZhY2UgSURhdGVSYW5nZVBpY2tlclByb3BzIHtcbiAgZW5kRGF0ZURpc2FibGVkPzogYm9vbGVhblxuICB2YWxpZDogYm9vbGVhblxuICBvbkRhdGVDaGFuZ2U6IChkOiBzdHJpbmcgfCBudWxsLCByOiBzdHJpbmcgfCBudWxsKSA9PiB2b2lkXG4gIGZvcm1hdD86IHN0cmluZ1xuICBpbmZvTGFiZWw/OiBzdHJpbmdcbiAgc3RhcnREYXRlczogSURhdGVMZWdcbiAgZW5kRGF0ZXM6IElEYXRlTGVnXG4gIGxhYmVsczogSURhdGVSYW5nZVBpY2tlckxhYmVsc1xuICBvbk5leHRNb250aENsaWNrPzogKCkgPT4gdm9pZFxuICBvblByZXZNb250aENsaWNrPzogKCkgPT4gdm9pZFxuICBudW1iZXJPZk1vYmlsZU1vbnRocz86IG51bWJlclxuICBoaWRlSWNvbj86IGJvb2xlYW5cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIGxvY2FsZT86IHN0cmluZ1xufVxuaW50ZXJmYWNlIElEYXRlTGVnIHtcbiAgaW5pdGlhbDogc3RyaW5nIHwgbnVsbFxuICBtYXhEYXRlOiBzdHJpbmdcbiAgbWluRGF0ZTogc3RyaW5nXG4gIGRpc2FibGVkRGF0ZXM/OiBzdHJpbmdbXVxuICBvZmZlckRhdGVzPzogc3RyaW5nW11cbn1cbmludGVyZmFjZSBJRGF0ZVJhbmdlUGlja2VyTGFiZWxzIHtcbiAgc3RhcnQ6IHN0cmluZ1xuICBlbmQ6IHN0cmluZ1xuICBoZWFkZXI6IHN0cmluZ1xuICBpbmZvPzogc3RyaW5nXG59XG4vLyBEbyBhIHdyYXBwZXIgdG8gc3VwcG9ydCBzdHlsZWQgY29tcG9uZW50czogaHR0cHM6Ly9naXRodWIuY29tL2FpcmJuYi9yZWFjdC1kYXRlcy9pc3N1ZXMvMTAzMCNpc3N1ZWNvbW1lbnQtMzg4MjI3NDU0XG5jb25zdCBEYXRlUmFuZ2VQaWNrZXI6IFJlYWN0LkZDPElEYXRlUmFuZ2VQaWNrZXJQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgW3N0YXJ0RGF0ZSwgc2V0U3RhcnREYXRlXSA9IHVzZVN0YXRlKHRvTW9tZW50KHByb3BzLnN0YXJ0RGF0ZXMuaW5pdGlhbCkpXG4gIGNvbnN0IFtlbmREYXRlLCBzZXRFbmREYXRlXSA9IHVzZVN0YXRlKHRvTW9tZW50KHByb3BzLmVuZERhdGVzLmluaXRpYWwpKVxuICBjb25zdCBbc2hvd0NhbGVuZGFyLCBzZXRTaG93Q2FsZW5kYXJdID0gdXNlU3RhdGUoZmFsc2UpXG4gIGNvbnN0IFtmb2N1c2VkSW5wdXQsIHNldEZvY3VzZWRJbnB1dF0gPSB1c2VTdGF0ZSgnc3RhcnREYXRlJyBhcyBGb2N1c2VkSW5wdXRTaGFwZSlcbiAgY29uc3QgeyBudW1iZXJPZk1vbnRocywgbW9iaWxlU3RhdGUsIHNpemUgfSA9IHVzZU1lZGlhKFxuICAgIFsnKG1heC13aWR0aDogNjRlbSknLCAnKG1pbi13aWR0aDogNzguMDYzZW0pJ10sXG4gICAgW1xuICAgICAgeyBudW1iZXJPZk1vbnRoczogcHJvcHMubnVtYmVyT2ZNb2JpbGVNb250aHMgfHwgMTIsIG1vYmlsZVN0YXRlOiB0cnVlLCBzaXplOiA0MCB9LFxuICAgICAgeyBudW1iZXJPZk1vbnRoczogMiwgbW9iaWxlU3RhdGU6IGZhbHNlLCBzaXplOiA0OCB9LFxuICAgIF0sXG4gICAgeyBudW1iZXJPZk1vbnRoczogMSwgbW9iaWxlU3RhdGU6IGZhbHNlLCBzaXplOiA0OCB9XG4gIClcblxuICBtb21lbnQubG9jYWxlKHByb3BzLmxvY2FsZSlcbiAgbW9tZW50KCkud2Vla2RheSgwKVxuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgc2V0U3RhcnREYXRlKHRvTW9tZW50KHByb3BzLnN0YXJ0RGF0ZXMuaW5pdGlhbCkpXG4gICAgc2V0RW5kRGF0ZSh0b01vbWVudChwcm9wcy5lbmREYXRlcy5pbml0aWFsKSlcbiAgfSwgW3Byb3BzLnN0YXJ0RGF0ZXMuaW5pdGlhbCwgcHJvcHMuZW5kRGF0ZXMuaW5pdGlhbF0pXG4gIGNvbnN0IGNsb3NlRXhjZXB0aW9uRGl2T3V0ID0gdXNlUmVmKG51bGwpXG4gIGNvbnN0IGNsb3NlRXhjZXB0aW9uSW1nT3V0ID0gdXNlUmVmKG51bGwpXG4gIGNvbnN0IHN0YXJ0Q2FsZW5kYXJDbGlja2VkID0gKCkgPT4ge1xuICAgIHNldFNob3dDYWxlbmRhcigocHJldikgPT4gIXByZXYpXG4gICAgc2V0Rm9jdXNlZElucHV0KCdzdGFydERhdGUnKVxuICB9XG4gIGNvbnN0IGVuZENhbGVuZGFyQ2xpY2tlZCA9ICgpID0+IHtcbiAgICBzZXRTaG93Q2FsZW5kYXIoKHByZXYpID0+ICFwcmV2KVxuICAgIHNldEZvY3VzZWRJbnB1dCgnZW5kRGF0ZScpXG4gIH1cbiAgY29uc3Qgb25PdXRzaWRlQ2xpY2sgPSAoeyB0YXJnZXQgfTogYW55KSA9PiB7XG4gICAgaWYgKHRhcmdldCA9PT0gY2xvc2VFeGNlcHRpb25EaXZPdXQuY3VycmVudCB8fCB0YXJnZXQgPT09IGNsb3NlRXhjZXB0aW9uSW1nT3V0LmN1cnJlbnQpIHtcbiAgICAgIHJldHVyblxuICAgIH1cbiAgICBzZXRTaG93Q2FsZW5kYXIoZmFsc2UpXG4gICAgc2V0Rm9jdXNlZElucHV0KCdzdGFydERhdGUnKVxuICAgIHByb3BzLm9uRGF0ZUNoYW5nZShnZXRLZXlTdHIoc3RhcnREYXRlKSwgZ2V0S2V5U3RyKGVuZERhdGUpKVxuICB9XG4gIGNvbnN0IHJlbmRlckNhbGVuZGFySW5mbyA9ICgpID0+XG4gICAgcHJvcHMuaW5mb0xhYmVsID8gKFxuICAgICAgPGRpdiBjbGFzc05hbWU9XCJkYXRlUmFuZ2VQaWNrZXJJbmZvXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cImRhdGVSYW5nZVBpY2tlckluZm9fX2xlZ2VuZFwiIC8+XG4gICAgICAgIDxwIGNsYXNzTmFtZT1cImRhdGVSYW5nZVBpY2tlckluZm9fX2luZm9cIj57cHJvcHMuaW5mb0xhYmVsfTwvcD5cbiAgICAgIDwvZGl2PlxuICAgICkgOiAoXG4gICAgICAnJ1xuICAgIClcbiAgY29uc3QgZGlzYWJsZWREYXRlcyA9IG1pbmlNb2l6ZShcbiAgICAoZm9jdXNlZElucHV0OiBzdHJpbmcsIHN0YXJ0OiBzdHJpbmcsIHN0YXJ0RGlzYWJsZWREYXRlczogc3RyaW5nW10sIGVuZERpc2FibGVkRGF0ZXM6IHN0cmluZ1tdKSA9PlxuICAgICAgYnVpbGRNYXAoXG4gICAgICAgIGZvY3VzZWRJbnB1dCAhPT0gJ2VuZERhdGUnXG4gICAgICAgICAgPyBzdGFydERpc2FibGVkRGF0ZXNcbiAgICAgICAgICA6IChzdGFydERpc2FibGVkRGF0ZXMgfHwgW10pLmZpbHRlcigoZCkgPT4gZCA8IHN0YXJ0KS5jb25jYXQoZW5kRGlzYWJsZWREYXRlcylcbiAgICAgIClcbiAgKVxuICBjb25zdCBpc0RheUJsb2NrZWQgPSAoZGF0ZTogTW9tZW50KSA9PiB7XG4gICAgY29uc3Qgc3RhcnREYXRlU3RyID0gZ2V0S2V5U3RyKHN0YXJ0RGF0ZSlcbiAgICBjb25zdCBkaXNhYmxlZCA9IGRpc2FibGVkRGF0ZXMoXG4gICAgICBmb2N1c2VkSW5wdXQsXG4gICAgICBzdGFydERhdGVTdHIsXG4gICAgICBwcm9wcy5zdGFydERhdGVzLmRpc2FibGVkRGF0ZXMsXG4gICAgICBwcm9wcy5lbmREYXRlcy5kaXNhYmxlZERhdGVzXG4gICAgKVxuICAgIGNvbnN0IGRhdGVOID0gZ2V0S2V5U3RyKGRhdGUpXG4gICAgaWYgKCFkYXRlTikge1xuICAgICAgcmV0dXJuIGZhbHNlXG4gICAgfVxuICAgIGNvbnN0IGQgPSBmb2N1c2VkSW5wdXQgIT09ICdlbmREYXRlJyA/IHByb3BzLnN0YXJ0RGF0ZXMgOiBwcm9wcy5lbmREYXRlc1xuICAgIGNvbnN0IG1pbiA9IHByb3BzLnN0YXJ0RGF0ZXMubWluRGF0ZVxuICAgIGlmIChkaXNhYmxlZFtkYXRlTl0pIHtcbiAgICAgIHJldHVybiB0cnVlXG4gICAgfVxuICAgIGlmIChtaW4gJiYgZGF0ZU4gJiYgZGF0ZU4gPCBtaW4pIHtcbiAgICAgIHJldHVybiB0cnVlXG4gICAgfVxuICAgIGlmIChkLm1heERhdGUgJiYgZGF0ZU4gJiYgZGF0ZU4gPiBkLm1heERhdGUpIHtcbiAgICAgIHJldHVybiB0cnVlXG4gICAgfVxuICAgIGlmIChmb2N1c2VkSW5wdXQgPT09ICdlbmREYXRlJyAmJiBzdGFydERhdGVTdHIgJiYgc3RhcnREYXRlU3RyIDwgZGF0ZU4gJiYgZGF0ZU4gPCBwcm9wcy5lbmREYXRlcy5taW5EYXRlKSB7XG4gICAgICByZXR1cm4gdHJ1ZVxuICAgIH1cbiAgICByZXR1cm4gZmFsc2VcbiAgfVxuICBjb25zdCBvZmZlckRhdGVzID0gbWluaU1vaXplKChmb2N1c2VkSW5wdXQ6IHN0cmluZywgc3RhcnRPZmZlcnM6IHN0cmluZ1tdLCBlbmRPZmZlcnM6IHN0cmluZ1tdKSA9PlxuICAgIGJ1aWxkTWFwKGZvY3VzZWRJbnB1dCAhPT0gJ2VuZERhdGUnID8gc3RhcnRPZmZlcnMgOiBlbmRPZmZlcnMpXG4gIClcbiAgY29uc3QgaXNPZmZlclZhbGlkID0gKGRhdGU6IE1vbWVudCkgPT4ge1xuICAgIGNvbnN0IG1hcCA9IG9mZmVyRGF0ZXMoZm9jdXNlZElucHV0LCBwcm9wcy5zdGFydERhdGVzLm9mZmVyRGF0ZXMsIHByb3BzLmVuZERhdGVzLm9mZmVyRGF0ZXMpXG4gICAgcmV0dXJuIG1hcFtnZXRLZXlTdHIoZGF0ZSkhXVxuICB9XG4gIGNvbnN0IG1pbmltdW1OaWdodHMgPSAoKSA9PiB7XG4gICAgY29uc3Qgc3RhcnQgPSB0b01vbWVudChwcm9wcy5zdGFydERhdGVzLmluaXRpYWwpXG4gICAgY29uc3QgZW5kID0gdG9Nb21lbnQocHJvcHMuZW5kRGF0ZXMubWluRGF0ZSlcbiAgICByZXR1cm4gZW5kICYmIHN0YXJ0ID8gZW5kLmRpZmYoc3RhcnQsICdkYXlzJykgOiAwXG4gIH1cbiAgY29uc3QgaW5pdGlhbE1vbnRoID0gKCkgPT4gKG1vYmlsZVN0YXRlID8gdG9Nb21lbnQocHJvcHMuc3RhcnREYXRlcy5taW5EYXRlKSA6IHN0YXJ0RGF0ZSkgfHwgbW9tZW50KClcbiAgY29uc3Qgc2hhcmVkQ3VzdG9tUHJvcHMgPSB7XG4gICAgaGlkZUtleWJvYXJkU2hvcnRjdXRzUGFuZWw6IHRydWUsXG4gICAgbmF2UHJldjogPExlZnRMaW5rIGFyaWEtbGFiZWw9XCJQcmV2aW91cyBNb250aFwiIC8+LFxuICAgIG5hdk5leHQ6IDxSaWdodExpbmsgYXJpYS1sYWJlbD1cIk5leHQgTW9udGhcIiAvPixcbiAgICB3ZWVrRGF5Rm9ybWF0OiAnZGRkJyxcbiAgICBkYXlTaXplOiBzaXplLFxuICAgIG1vbnRoRm9ybWF0OiAnTU1NTSBZWVlZJyxcbiAgICBkYXlBcmlhTGFiZWxGb3JtYXQ6ICdZWVlZLU1NLUREJyxcbiAgICB0cmFuc2l0aW9uRHVyYXRpb246IDEwMCxcbiAgICBudW1iZXJPZk1vbnRocyxcbiAgICBvbk91dHNpZGVDbGljayxcbiAgICBpc0RheUJsb2NrZWQ6IChkOiBNb21lbnQpID0+IGlzRGF5QmxvY2tlZChkKSxcbiAgICBpc0RheUhpZ2hsaWdodGVkOiAoZDogTW9tZW50KSA9PiBpc09mZmVyVmFsaWQoZCksXG4gICAgaW5pdGlhbFZpc2libGVNb250aDogaW5pdGlhbE1vbnRoLFxuICAgIHJlbmRlckNhbGVuZGFySW5mbyxcbiAgfVxuICByZXR1cm4gKFxuICAgIDxMb2NrQm9keVNjcm9sbCBlbmFibGVkPXttb2JpbGVTdGF0ZSAmJiBzaG93Q2FsZW5kYXJ9PlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzc05hbWU9eydvdXRlciAnICsgcHJvcHMuY2xhc3NOYW1lfVxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAke0RhdGVQaWNrZXJEZWZhdWx0U3R5bGVzfTtcbiAgICAgICAgICAke0RhdGVQaWNrZXJEZmRzU3R5bGVzfTtcbiAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPXtjbGFzc05hbWVzKCdkYXRlUmFuZ2VQaWNrZXJXcmFwcGVyJywgeyAnZGF0ZVJhbmdlUGlja2VyV3JhcHBlci0tYWN0aXZlJzogc2hvd0NhbGVuZGFyIH0pfT5cbiAgICAgICAgICB7bW9iaWxlU3RhdGUgJiYgc2hvd0NhbGVuZGFyICYmIChcbiAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgIDxoMiBjbGFzc05hbWU9XCJkYXRlUmFuZ2VQaWNrZXJXcmFwcGVyX190aXRsZVwiPntwcm9wcy5sYWJlbHMuaGVhZGVyfTwvaDI+XG4gICAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cImRhdGVSYW5nZVBpY2tlcldyYXBwZXJfX2Nsb3NlXCIgb25DbGljaz17KCkgPT4gc2V0U2hvd0NhbGVuZGFyKGZhbHNlKX0+XG4gICAgICAgICAgICAgICAgPENsb3NlIC8+XG4gICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgIDwvPlxuICAgICAgICAgICl9XG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzKHtcbiAgICAgICAgICAgICAgZGF0ZXBpY2tlcl9jb250YWluZXI6IHRydWUsXG4gICAgICAgICAgICAgIGRhdGVwaWNrZXJfb3Blbjogc2hvd0NhbGVuZGFyLFxuICAgICAgICAgICAgfSl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXMoe1xuICAgICAgICAgICAgICAgIGRhdGVJbnB1dHM6IHRydWUsXG4gICAgICAgICAgICAgICAgZGF0ZUlucHV0c19fZXJyb3JCb3JkZXI6ICFwcm9wcy52YWxpZCAmJiAhc2hvd0NhbGVuZGFyLFxuICAgICAgICAgICAgICAgIGRhdGVJbnB1dHNfX2ZvY3VzX291dDogZm9jdXNlZElucHV0ID09PSAnc3RhcnREYXRlJyAmJiBzaG93Q2FsZW5kYXIsXG4gICAgICAgICAgICAgICAgZGF0ZUlucHV0c19fbm9uZm9jdXM6IGZvY3VzZWRJbnB1dCA9PT0gJ2VuZERhdGUnICYmIHNob3dDYWxlbmRhcixcbiAgICAgICAgICAgICAgICBmcm9tRGF0ZTogdHJ1ZSxcbiAgICAgICAgICAgICAgICBkYXRlSW5wdXRzX19oaWRlSWNvbjogcHJvcHMuaGlkZUljb24sXG4gICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICBvbkNsaWNrPXtzdGFydENhbGVuZGFyQ2xpY2tlZH1cbiAgICAgICAgICAgICAgcmVmPXtjbG9zZUV4Y2VwdGlvbkRpdk91dH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgPGxhYmVsIGNsYXNzTmFtZT1cImRhdGVJbnB1dHNfX2xhYmVsXCI+e3Byb3BzLmxhYmVscy5zdGFydH08L2xhYmVsPlxuICAgICAgICAgICAgICB7IXByb3BzLmhpZGVJY29uICYmIDxDYWxlbmRhck91dGJvdW5kIGNsYXNzTmFtZT1cImRhdGVJbnB1dHNfX2ljb25cIiByZWY9e2Nsb3NlRXhjZXB0aW9uSW1nT3V0fSAvPn1cbiAgICAgICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICAgICAgY2xhc3NOYW1lPVwiZGF0ZUlucHV0c19faW5wdXRcIlxuICAgICAgICAgICAgICAgIHR5cGU9XCJ0ZXh0XCJcbiAgICAgICAgICAgICAgICBuYW1lPVwiZnJvbURhdGVcIlxuICAgICAgICAgICAgICAgIHZhbHVlPXtzdGFydERhdGUgPyBzdGFydERhdGUuZm9ybWF0KCdkZGQgREQvTU0nKSA6ICcnfVxuICAgICAgICAgICAgICAgIHJlYWRPbmx5XG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXMoe1xuICAgICAgICAgICAgICBkYXRlcGlja2VyX2NvbnRhaW5lcjogdHJ1ZSxcbiAgICAgICAgICAgICAgZGF0ZXBpY2tlcl9vcGVuOiBzaG93Q2FsZW5kYXIsXG4gICAgICAgICAgICB9KX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lcyh7XG4gICAgICAgICAgICAgICAgZGF0ZUlucHV0czogdHJ1ZSxcbiAgICAgICAgICAgICAgICBkYXRlSW5wdXRzX19vbmVXYXk6IHRydWUsXG4gICAgICAgICAgICAgICAgZGF0ZUlucHV0c19fZGlzYWJsZWQ6IHByb3BzLmVuZERhdGVEaXNhYmxlZCxcbiAgICAgICAgICAgICAgICAnZGF0ZUlucHV0c19fZGlzYWJsZWQtLWFjdGl2ZSc6IHNob3dDYWxlbmRhciAmJiBwcm9wcy5lbmREYXRlRGlzYWJsZWQsXG4gICAgICAgICAgICAgICAgZGF0ZUlucHV0c19fZXJyb3JCb3JkZXI6ICFwcm9wcy52YWxpZCAmJiAhc2hvd0NhbGVuZGFyLFxuICAgICAgICAgICAgICAgIGRhdGVJbnB1dHNfX25vbmZvY3VzOiBmb2N1c2VkSW5wdXQgPT09ICdzdGFydERhdGUnICYmIHNob3dDYWxlbmRhciAmJiAhcHJvcHMuZW5kRGF0ZURpc2FibGVkLFxuICAgICAgICAgICAgICAgIGRhdGVJbnB1dHNfX2ZvY3VzX3JldDogZm9jdXNlZElucHV0ID09PSAnZW5kRGF0ZScgJiYgc2hvd0NhbGVuZGFyLFxuICAgICAgICAgICAgICAgIGVuZERhdGU6IHRydWUsXG4gICAgICAgICAgICAgICAgZGF0ZUlucHV0c19faGlkZUljb246IHByb3BzLmhpZGVJY29uLFxuICAgICAgICAgICAgICB9KX1cbiAgICAgICAgICAgICAgb25DbGljaz17ZW5kQ2FsZW5kYXJDbGlja2VkfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICA8bGFiZWwgY2xhc3NOYW1lPVwiZGF0ZUlucHV0c19fbGFiZWxcIj57cHJvcHMubGFiZWxzLmVuZH08L2xhYmVsPlxuICAgICAgICAgICAgICB7IXByb3BzLmhpZGVJY29uICYmIDxDYWxlbmRhclJldHVybiBjbGFzc05hbWU9XCJkYXRlSW5wdXRzX19pY29uXCIgLz59XG4gICAgICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZT1cImRhdGVJbnB1dHNfX2lucHV0XCJcbiAgICAgICAgICAgICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAgICAgICAgICAgbmFtZT1cInRvRGF0ZVwiXG4gICAgICAgICAgICAgICAgdmFsdWU9e2VuZERhdGUgPyBlbmREYXRlLmZvcm1hdCgnZGRkIEREL01NJykgOiAnJ31cbiAgICAgICAgICAgICAgICByZWFkT25seVxuICAgICAgICAgICAgICAgIGRpc2FibGVkPXtwcm9wcy5lbmREYXRlRGlzYWJsZWR9XG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICB7c2hvd0NhbGVuZGFyICYmICFwcm9wcy5lbmREYXRlRGlzYWJsZWQgJiYgKFxuICAgICAgICAgICAgPERheVBpY2tlclJhbmdlQ29udHJvbGxlclxuICAgICAgICAgICAgICBvbk5leHRNb250aENsaWNrPXtwcm9wcy5vbk5leHRNb250aENsaWNrfVxuICAgICAgICAgICAgICBvblByZXZNb250aENsaWNrPXtwcm9wcy5vblByZXZNb250aENsaWNrfVxuICAgICAgICAgICAgICAvLyBSZXF1aXJlZCBwcm9wc1xuICAgICAgICAgICAgICBvbkRhdGVzQ2hhbmdlPXsoeyBzdGFydERhdGUsIGVuZERhdGUgfSkgPT4ge1xuICAgICAgICAgICAgICAgIHNldFN0YXJ0RGF0ZShzdGFydERhdGUpXG4gICAgICAgICAgICAgICAgc2V0RW5kRGF0ZShlbmREYXRlKVxuICAgICAgICAgICAgICAgIHByb3BzLm9uRGF0ZUNoYW5nZShnZXRLZXlTdHIoc3RhcnREYXRlKSwgZ2V0S2V5U3RyKGVuZERhdGUpKVxuICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICBmb2N1c2VkSW5wdXQ9e2ZvY3VzZWRJbnB1dH1cbiAgICAgICAgICAgICAgc3RhcnREYXRlPXtzdGFydERhdGV9XG4gICAgICAgICAgICAgIGVuZERhdGU9e2VuZERhdGV9XG4gICAgICAgICAgICAgIG9uRm9jdXNDaGFuZ2U9eyhmb2N1c2VkSW5wdXQ6IEZvY3VzZWRJbnB1dFNoYXBlIHwgbnVsbCkgPT4ge1xuICAgICAgICAgICAgICAgIHNldEZvY3VzZWRJbnB1dChmb2N1c2VkSW5wdXQgfHwgJ3N0YXJ0RGF0ZScpXG4gICAgICAgICAgICAgICAgc2V0U2hvd0NhbGVuZGFyKCEhZm9jdXNlZElucHV0KVxuICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAvLyBXZSB1c2UgcGhyYXNlcyB0byBkaXNhYmxlIGV4dHJhIHN0dWZmIGZyb20gYXJpYS1sYWJlbFxuICAgICAgICAgICAgICBwaHJhc2VzPXtcbiAgICAgICAgICAgICAgICB7IGNob29zZUF2YWlsYWJsZVN0YXJ0RGF0ZTogKGE6IGFueSkgPT4gYS5kYXRlLCBjaG9vc2VBdmFpbGFibGVFbmREYXRlOiAoYTogYW55KSA9PiBhLmRhdGUgfSBhcyBhbnlcbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICBtaW5pbXVtTmlnaHRzPXttaW5pbXVtTmlnaHRzKCl9XG4gICAgICAgICAgICAgIG9yaWVudGF0aW9uPXttb2JpbGVTdGF0ZSA/ICd2ZXJ0aWNhbFNjcm9sbGFibGUnIDogJ2hvcml6b250YWwnfVxuICAgICAgICAgICAgICB7Li4uc2hhcmVkQ3VzdG9tUHJvcHN9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgICl9XG4gICAgICAgICAge3Nob3dDYWxlbmRhciAmJiBwcm9wcy5lbmREYXRlRGlzYWJsZWQgJiYgKFxuICAgICAgICAgICAgPERheVBpY2tlclNpbmdsZURhdGVDb250cm9sbGVyXG4gICAgICAgICAgICAgIC8vIFJlcXVpcmVkIHByb3BzXG4gICAgICAgICAgICAgIG9uRGF0ZUNoYW5nZT17KGRhdGUpID0+IHtcbiAgICAgICAgICAgICAgICBzZXRTdGFydERhdGUoZGF0ZSlcbiAgICAgICAgICAgICAgICBzZXRFbmREYXRlKGRhdGUpXG4gICAgICAgICAgICAgICAgcHJvcHMub25EYXRlQ2hhbmdlKGdldEtleVN0cihkYXRlKSwgbnVsbClcbiAgICAgICAgICAgICAgICBzZXRTaG93Q2FsZW5kYXIoZmFsc2UpXG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgIG9uRm9jdXNDaGFuZ2U9eygpID0+IHVuZGVmaW5lZH1cbiAgICAgICAgICAgICAgZm9jdXNlZFxuICAgICAgICAgICAgICBkYXRlPXtzdGFydERhdGV9XG4gICAgICAgICAgICAgIG9yaWVudGF0aW9uPXttb2JpbGVTdGF0ZSA/ICd2ZXJ0aWNhbFNjcm9sbGFibGUnIDogJ2hvcml6b250YWwnfVxuICAgICAgICAgICAgICB7Li4uc2hhcmVkQ3VzdG9tUHJvcHN9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgICl9XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9Mb2NrQm9keVNjcm9sbD5cbiAgKVxufVxuZnVuY3Rpb24gZ2V0S2V5U3RyKG06IE1vbWVudCB8IG51bGwpOiBzdHJpbmcgfCBudWxsIHtcbiAgcmV0dXJuIG0gJiYgbS5mb3JtYXQoJ1lZWVktTU0tREQnKVxufVxuZnVuY3Rpb24gdG9Nb21lbnQobjogc3RyaW5nIHwgbnVsbCk6IE1vbWVudCB8IG51bGwge1xuICByZXR1cm4gbiA/IG1vbWVudChuLCAnWVlZWS1NTS1ERCcpIDogbnVsbFxufVxuZnVuY3Rpb24gYnVpbGRNYXAoZGF0ZXM6IHN0cmluZ1tdKSB7XG4gIGNvbnN0IG1hcDogeyBba2V5OiBzdHJpbmddOiBudW1iZXIgfSA9IHt9XG4gIGlmICghZGF0ZXMpIHtcbiAgICByZXR1cm4gbWFwXG4gIH1cbiAgZm9yIChjb25zdCBkIG9mIGRhdGVzKSB7XG4gICAgbWFwW2RdID0gMVxuICB9XG4gIHJldHVybiBtYXBcbn1cbmV4cG9ydCBkZWZhdWx0IERhdGVSYW5nZVBpY2tlclxuIl19 */")
+  }, (0, _react2.jsx)("div", {
+    className: (0, _classnames.default)('dateRangePickerWrapper', {
+      'dateRangePickerWrapper--active': showCalendar
+    })
+  }, mobileState && showCalendar && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("h2", {
+    className: "dateRangePickerWrapper__title"
+  }, props.labels.header), (0, _react2.jsx)("span", {
+    className: "dateRangePickerWrapper__close",
+    onClick: () => setShowCalendar(false)
+  }, (0, _react2.jsx)(_icons.Close, null))), (0, _react2.jsx)("div", {
+    className: (0, _classnames.default)({
+      datepicker_container: true,
+      datepicker_open: showCalendar
+    })
+  }, (0, _react2.jsx)("div", {
+    className: (0, _classnames.default)({
+      dateInputs: true,
+      dateInputs__errorBorder: !props.valid && !showCalendar,
+      dateInputs__focus_out: focusedInput === 'startDate' && showCalendar,
+      dateInputs__nonfocus: focusedInput === 'endDate' && showCalendar,
+      fromDate: true,
+      dateInputs__hideIcon: props.hideIcon
+    }),
+    onClick: startCalendarClicked,
+    ref: closeExceptionDivOut
+  }, (0, _react2.jsx)("label", {
+    className: "dateInputs__label"
+  }, props.labels.start), !props.hideIcon && (0, _react2.jsx)(_icons.CalendarOutbound, {
+    className: "dateInputs__icon",
+    ref: closeExceptionImgOut
+  }), (0, _react2.jsx)("input", {
+    className: "dateInputs__input",
+    type: "text",
+    name: "fromDate",
+    value: startDate ? startDate.format('ddd DD/MM') : '',
+    readOnly: true
+  }))), (0, _react2.jsx)("div", {
+    className: (0, _classnames.default)({
+      datepicker_container: true,
+      datepicker_open: showCalendar
+    })
+  }, (0, _react2.jsx)("div", {
+    className: (0, _classnames.default)({
+      dateInputs: true,
+      dateInputs__oneWay: true,
+      dateInputs__disabled: props.endDateDisabled,
+      'dateInputs__disabled--active': showCalendar && props.endDateDisabled,
+      dateInputs__errorBorder: !props.valid && !showCalendar,
+      dateInputs__nonfocus: focusedInput === 'startDate' && showCalendar && !props.endDateDisabled,
+      dateInputs__focus_ret: focusedInput === 'endDate' && showCalendar,
+      endDate: true,
+      dateInputs__hideIcon: props.hideIcon
+    }),
+    onClick: endCalendarClicked
+  }, (0, _react2.jsx)("label", {
+    className: "dateInputs__label"
+  }, props.labels.end), !props.hideIcon && (0, _react2.jsx)(_icons.CalendarReturn, {
+    className: "dateInputs__icon"
+  }), (0, _react2.jsx)("input", {
+    className: "dateInputs__input",
+    type: "text",
+    name: "toDate",
+    value: endDate ? endDate.format('ddd DD/MM') : '',
+    readOnly: true,
+    disabled: props.endDateDisabled
+  }))), showCalendar && !props.endDateDisabled && (0, _react2.jsx)(_reactDates.DayPickerRangeController, _extends({
+    onNextMonthClick: props.onNextMonthClick,
+    onPrevMonthClick: props.onPrevMonthClick
+    // Required props
+    ,
+    onDatesChange: ({
+      startDate,
+      endDate
+    }) => {
+      setStartDate(startDate);
+      setEndDate(endDate);
+      props.onDateChange(getKeyStr(startDate), getKeyStr(endDate));
+    },
+    focusedInput: focusedInput,
+    startDate: startDate,
+    endDate: endDate,
+    onFocusChange: focusedInput => {
+      setFocusedInput(focusedInput || 'startDate');
+      setShowCalendar(!!focusedInput);
+    }
+    // We use phrases to disable extra stuff from aria-label
+    ,
+    phrases: {
+      chooseAvailableStartDate: a => a.date,
+      chooseAvailableEndDate: a => a.date
+    },
+    minimumNights: minimumNights(),
+    orientation: mobileState ? 'verticalScrollable' : 'horizontal'
+  }, sharedCustomProps)), showCalendar && props.endDateDisabled && (0, _react2.jsx)(_reactDates.DayPickerSingleDateController
+  // Required props
+  , _extends({
+    onDateChange: date => {
+      setStartDate(date);
+      setEndDate(date);
+      props.onDateChange(getKeyStr(date), null);
+      setShowCalendar(false);
+    },
+    onFocusChange: () => undefined,
+    focused: true,
+    date: startDate,
+    orientation: mobileState ? 'verticalScrollable' : 'horizontal'
+  }, sharedCustomProps)))));
+};
+function getKeyStr(m) {
+  return m && m.format('YYYY-MM-DD');
+}
+function toMoment(n) {
+  return n ? (0, _moment.default)(n, 'YYYY-MM-DD') : null;
+}
+function buildMap(dates) {
+  const map = {};
+  if (!dates) {
+    return map;
+  }
+  var _iterator = _createForOfIteratorHelper(dates),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      const d = _step.value;
+      map[d] = 1;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return map;
+}
+var _default = DateRangePicker;
+exports.default = _default;

package/cjs/date-range-picker/index.d.ts

@@ -0,0 +1 @@
+export { default as DateRangePicker } from './DateRangePicker';

package/cjs/date-range-picker/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DateRangePicker", {
+  enumerable: true,
+  get: function get() {
+    return _DateRangePicker.default;
+  }
+});
+var _DateRangePicker = _interopRequireDefault(require("./DateRangePicker"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/cjs/divider/Divider.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare type DividerProps = {
+    /**
+     * Display the Divider in "light" mode.
+     */
+    light?: boolean;
+    /**
+     * Display the Divider in "indent" style
+     */
+    indent?: boolean;
+    /**
+     *  Display the Divider in "margin" style
+     */
+    margins?: boolean;
+    /**
+     * HTML tag or custom component being rendered
+     */
+    as?: React.ElementType;
+    /**
+     * Class name to be assigned to the component
+     */
+    className?: string;
+};
+export declare const dividerBorder: (light?: boolean, placement?: 'top' | 'bottom') => import("@emotion/utils").SerializedStyles;
+export declare const Divider: ({ light, indent, margins, ...rest }: DividerProps) => JSX.Element;
+export default Divider;

package/cjs/divider/Divider.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dividerBorder = exports.default = exports.Divider = void 0;
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _theme = require("@dfds-ui/theme");
+const _excluded = ["light", "indent", "margins"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const colors = _theme.theme.colors;
+
+// Can be used to create a simple divider with a css border and still adhere to the colors defined for dividers.
+const dividerBorder = (light, placement) => {
+  const border = `1px solid ${light ? colors.divider.light : colors.divider.dark}`;
+  return /*#__PURE__*/(0, _react2.css)("border-top:", placement === 'top' && border, ";border-bottom:", placement === 'bottom' && border, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:dividerBorder;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9kaXZpZGVyL0RpdmlkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDWSIsImZpbGUiOiIuLi8uLi8uLi9zcmMvZGl2aWRlci9EaXZpZGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuXG5leHBvcnQgdHlwZSBEaXZpZGVyUHJvcHMgPSB7XG4gIC8vdG9kbzogY29udmVydCB0byBzdXJmYWNlIGNvbmNlcHQgYW5kIHJlbW92ZSBsaWdodFxuICAvKipcbiAgICogRGlzcGxheSB0aGUgRGl2aWRlciBpbiBcImxpZ2h0XCIgbW9kZS5cbiAgICovXG4gIGxpZ2h0PzogYm9vbGVhblxuICAvKipcbiAgICogRGlzcGxheSB0aGUgRGl2aWRlciBpbiBcImluZGVudFwiIHN0eWxlXG4gICAqL1xuICBpbmRlbnQ/OiBib29sZWFuXG4gIC8qKlxuICAgKiAgRGlzcGxheSB0aGUgRGl2aWRlciBpbiBcIm1hcmdpblwiIHN0eWxlXG4gICAqL1xuICBtYXJnaW5zPzogYm9vbGVhblxuICAvKipcbiAgICogSFRNTCB0YWcgb3IgY3VzdG9tIGNvbXBvbmVudCBiZWluZyByZW5kZXJlZFxuICAgKi9cbiAgYXM/OiBSZWFjdC5FbGVtZW50VHlwZVxuICAvKipcbiAgICogQ2xhc3MgbmFtZSB0byBiZSBhc3NpZ25lZCB0byB0aGUgY29tcG9uZW50XG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbn1cblxuY29uc3QgeyBjb2xvcnMgfSA9IHRoZW1lXG5cbi8vIENhbiBiZSB1c2VkIHRvIGNyZWF0ZSBhIHNpbXBsZSBkaXZpZGVyIHdpdGggYSBjc3MgYm9yZGVyIGFuZCBzdGlsbCBhZGhlcmUgdG8gdGhlIGNvbG9ycyBkZWZpbmVkIGZvciBkaXZpZGVycy5cbmV4cG9ydCBjb25zdCBkaXZpZGVyQm9yZGVyID0gKGxpZ2h0PzogYm9vbGVhbiwgcGxhY2VtZW50PzogJ3RvcCcgfCAnYm90dG9tJykgPT4ge1xuICBjb25zdCBib3JkZXIgPSBgMXB4IHNvbGlkICR7bGlnaHQgPyBjb2xvcnMuZGl2aWRlci5saWdodCA6IGNvbG9ycy5kaXZpZGVyLmRhcmt9YFxuICByZXR1cm4gY3NzYFxuICAgIGJvcmRlci10b3A6ICR7cGxhY2VtZW50ID09PSAndG9wJyAmJiBib3JkZXJ9O1xuICAgIGJvcmRlci1ib3R0b206ICR7cGxhY2VtZW50ID09PSAnYm90dG9tJyAmJiBib3JkZXJ9O1xuICBgXG59XG5cbmNvbnN0IFN0eWxlZERpdmlkZXIgPSBzdHlsZWQuaHI8eyBsaWdodD86IGJvb2xlYW47IGluZGVudD86IGJvb2xlYW47IG1hcmdpbnM/OiBib29sZWFuIH0+YFxuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHApID0+IChwLmxpZ2h0ID8gY29sb3JzLmRpdmlkZXIubGlnaHQgOiBjb2xvcnMuZGl2aWRlci5kYXJrKX07XG4gIG1heC13aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxcHg7XG4gIG1hcmdpbjogMCAkeyhwKSA9PiAocC5tYXJnaW5zID8gdGhlbWUuc3BhY2luZy5tIDogMCl9IDAgJHsocCkgPT4gKHAubWFyZ2lucyB8fCBwLmluZGVudCA/IHRoZW1lLnNwYWNpbmcubSA6IDApfTtcbmBcblxuZXhwb3J0IGNvbnN0IERpdmlkZXIgPSAoeyBsaWdodCwgaW5kZW50LCBtYXJnaW5zLCAuLi5yZXN0IH06IERpdmlkZXJQcm9wcykgPT4ge1xuICByZXR1cm4gPFN0eWxlZERpdmlkZXIgbGlnaHQ9e2xpZ2h0fSBpbmRlbnQ9e2luZGVudH0gbWFyZ2lucz17bWFyZ2luc30gcm9sZT1cInNlcGFyYXRvclwiIHsuLi5yZXN0fSAvPlxufVxuXG5leHBvcnQgZGVmYXVsdCBEaXZpZGVyXG4iXX0= */");
+};
+exports.dividerBorder = dividerBorder;
+const StyledDivider = /*#__PURE__*/(0, _base.default)("hr", process.env.NODE_ENV === "production" ? {
+  target: "e1rrvlkn0"
+} : {
+  target: "e1rrvlkn0",
+  label: "StyledDivider"
+})("border:none;background-color:", p => p.light ? colors.divider.light : colors.divider.dark, ";max-width:100%;height:1px;margin:0 ", p => p.margins ? _theme.theme.spacing.m : 0, " 0 ", p => p.margins || p.indent ? _theme.theme.spacing.m : 0, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9kaXZpZGVyL0RpdmlkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdDeUYiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2RpdmlkZXIvRGl2aWRlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcblxuZXhwb3J0IHR5cGUgRGl2aWRlclByb3BzID0ge1xuICAvL3RvZG86IGNvbnZlcnQgdG8gc3VyZmFjZSBjb25jZXB0IGFuZCByZW1vdmUgbGlnaHRcbiAgLyoqXG4gICAqIERpc3BsYXkgdGhlIERpdmlkZXIgaW4gXCJsaWdodFwiIG1vZGUuXG4gICAqL1xuICBsaWdodD86IGJvb2xlYW5cbiAgLyoqXG4gICAqIERpc3BsYXkgdGhlIERpdmlkZXIgaW4gXCJpbmRlbnRcIiBzdHlsZVxuICAgKi9cbiAgaW5kZW50PzogYm9vbGVhblxuICAvKipcbiAgICogIERpc3BsYXkgdGhlIERpdmlkZXIgaW4gXCJtYXJnaW5cIiBzdHlsZVxuICAgKi9cbiAgbWFyZ2lucz86IGJvb2xlYW5cbiAgLyoqXG4gICAqIEhUTUwgdGFnIG9yIGN1c3RvbSBjb21wb25lbnQgYmVpbmcgcmVuZGVyZWRcbiAgICovXG4gIGFzPzogUmVhY3QuRWxlbWVudFR5cGVcbiAgLyoqXG4gICAqIENsYXNzIG5hbWUgdG8gYmUgYXNzaWduZWQgdG8gdGhlIGNvbXBvbmVudFxuICAgKi9cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG59XG5cbmNvbnN0IHsgY29sb3JzIH0gPSB0aGVtZVxuXG4vLyBDYW4gYmUgdXNlZCB0byBjcmVhdGUgYSBzaW1wbGUgZGl2aWRlciB3aXRoIGEgY3NzIGJvcmRlciBhbmQgc3RpbGwgYWRoZXJlIHRvIHRoZSBjb2xvcnMgZGVmaW5lZCBmb3IgZGl2aWRlcnMuXG5leHBvcnQgY29uc3QgZGl2aWRlckJvcmRlciA9IChsaWdodD86IGJvb2xlYW4sIHBsYWNlbWVudD86ICd0b3AnIHwgJ2JvdHRvbScpID0+IHtcbiAgY29uc3QgYm9yZGVyID0gYDFweCBzb2xpZCAke2xpZ2h0ID8gY29sb3JzLmRpdmlkZXIubGlnaHQgOiBjb2xvcnMuZGl2aWRlci5kYXJrfWBcbiAgcmV0dXJuIGNzc2BcbiAgICBib3JkZXItdG9wOiAke3BsYWNlbWVudCA9PT0gJ3RvcCcgJiYgYm9yZGVyfTtcbiAgICBib3JkZXItYm90dG9tOiAke3BsYWNlbWVudCA9PT0gJ2JvdHRvbScgJiYgYm9yZGVyfTtcbiAgYFxufVxuXG5jb25zdCBTdHlsZWREaXZpZGVyID0gc3R5bGVkLmhyPHsgbGlnaHQ/OiBib29sZWFuOyBpbmRlbnQ/OiBib29sZWFuOyBtYXJnaW5zPzogYm9vbGVhbiB9PmBcbiAgYm9yZGVyOiBub25lO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyhwKSA9PiAocC5saWdodCA/IGNvbG9ycy5kaXZpZGVyLmxpZ2h0IDogY29sb3JzLmRpdmlkZXIuZGFyayl9O1xuICBtYXgtd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMXB4O1xuICBtYXJnaW46IDAgJHsocCkgPT4gKHAubWFyZ2lucyA/IHRoZW1lLnNwYWNpbmcubSA6IDApfSAwICR7KHApID0+IChwLm1hcmdpbnMgfHwgcC5pbmRlbnQgPyB0aGVtZS5zcGFjaW5nLm0gOiAwKX07XG5gXG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyID0gKHsgbGlnaHQsIGluZGVudCwgbWFyZ2lucywgLi4ucmVzdCB9OiBEaXZpZGVyUHJvcHMpID0+IHtcbiAgcmV0dXJuIDxTdHlsZWREaXZpZGVyIGxpZ2h0PXtsaWdodH0gaW5kZW50PXtpbmRlbnR9IG1hcmdpbnM9e21hcmdpbnN9IHJvbGU9XCJzZXBhcmF0b3JcIiB7Li4ucmVzdH0gLz5cbn1cblxuZXhwb3J0IGRlZmF1bHQgRGl2aWRlclxuIl19 */"));
+const Divider = _ref => {
+  let light = _ref.light,
+    indent = _ref.indent,
+    margins = _ref.margins,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return (0, _react2.jsx)(StyledDivider, _extends({
+    light: light,
+    indent: indent,
+    margins: margins,
+    role: "separator"
+  }, rest));
+};
+exports.Divider = Divider;
+var _default = Divider;
+exports.default = _default;

package/cjs/divider/index.d.ts

@@ -0,0 +1 @@
+export * from './Divider';

package/cjs/divider/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Divider = require("./Divider");
+Object.keys(_Divider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Divider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Divider[key];
+    }
+  });
+});

package/cjs/drawer/Drawer.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { theme } from '@dfds-ui/theme';
+declare type HorizontalPosition = 'left' | 'right';
+declare type VerticalPosition = 'top' | 'bottom';
+declare type Elevation = keyof typeof theme.elevation;
+export declare type DrawerProps = {
+    /**
+     * Horizontal position of the drawer
+     */
+    position?: HorizontalPosition;
+    /**
+     * Show arrow to visually indicate the relation to a connected component
+     */
+    showArrow?: boolean;
+    /**
+     *  Set the `elevation` for the Drawer.
+     */
+    elevation?: Elevation;
+    /**
+     * Vertical position of the drawer in relation to a connected component.
+     * Will only be used for placing the arrow on either the `top` or `bottom`
+     */
+    verticalPosition?: VerticalPosition;
+    /**
+     * Class name to be assigned to the component
+     */
+    className?: string;
+    children?: React.ReactNode;
+};
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+export default Drawer;

package/cjs/drawer/Drawer.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Drawer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _theme = require("@dfds-ui/theme");
+var _arrow = _interopRequireDefault(require("../common/arrow"));
+const _excluded = ["className", "children", "position", "verticalPosition", "showArrow", "elevation"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const getArrowPlacement = (vertical, horizontal) => {
+  return `${vertical ? vertical : 'top'}-${horizontal ? horizontal : 'left'}`;
+};
+const drawerStyles = ({
+  position,
+  verticalPosition,
+  showArrow,
+  elevation
+}) => /*#__PURE__*/(0, _react2.css)("z-index:1;position:absolute;height:auto;min-height:50px;left:", position === 'left' && 0, ";right:", position === 'right' && 0, ";min-width:112px;border-radius:2px;box-shadow:", _theme.theme.elevation[elevation], ";background-color:", _theme.theme.colors.surface.primary, ";display:grid;cursor:default;", !showArrow ? '' : (0, _arrow.default)(10, _theme.theme.colors.surface.primary, 20, getArrowPlacement(verticalPosition, position)), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:drawerStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9kcmF3ZXIvRHJhd2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtRFMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2RyYXdlci9EcmF3ZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IGFycm93LCB7IEFycm93UG9zaXRpb24gfSBmcm9tICcuLi9jb21tb24vYXJyb3cnXG5cbnR5cGUgSG9yaXpvbnRhbFBvc2l0aW9uID0gJ2xlZnQnIHwgJ3JpZ2h0J1xudHlwZSBWZXJ0aWNhbFBvc2l0aW9uID0gJ3RvcCcgfCAnYm90dG9tJ1xudHlwZSBFbGV2YXRpb24gPSBrZXlvZiB0eXBlb2YgdGhlbWUuZWxldmF0aW9uXG5cbmV4cG9ydCB0eXBlIERyYXdlclByb3BzID0ge1xuICAvKipcbiAgICogSG9yaXpvbnRhbCBwb3NpdGlvbiBvZiB0aGUgZHJhd2VyXG4gICAqL1xuICBwb3NpdGlvbj86IEhvcml6b250YWxQb3NpdGlvblxuXG4gIC8qKlxuICAgKiBTaG93IGFycm93IHRvIHZpc3VhbGx5IGluZGljYXRlIHRoZSByZWxhdGlvbiB0byBhIGNvbm5lY3RlZCBjb21wb25lbnRcbiAgICovXG4gIHNob3dBcnJvdz86IGJvb2xlYW5cbiAgLyoqXG4gICAqICBTZXQgdGhlIGBlbGV2YXRpb25gIGZvciB0aGUgRHJhd2VyLlxuICAgKi9cbiAgZWxldmF0aW9uPzogRWxldmF0aW9uXG5cbiAgLyoqXG4gICAqIFZlcnRpY2FsIHBvc2l0aW9uIG9mIHRoZSBkcmF3ZXIgaW4gcmVsYXRpb24gdG8gYSBjb25uZWN0ZWQgY29tcG9uZW50LlxuICAgKiBXaWxsIG9ubHkgYmUgdXNlZCBmb3IgcGxhY2luZyB0aGUgYXJyb3cgb24gZWl0aGVyIHRoZSBgdG9wYCBvciBgYm90dG9tYFxuICAgKi9cbiAgdmVydGljYWxQb3NpdGlvbj86IFZlcnRpY2FsUG9zaXRpb25cblxuICAvKipcbiAgICogQ2xhc3MgbmFtZSB0byBiZSBhc3NpZ25lZCB0byB0aGUgY29tcG9uZW50XG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgY2hpbGRyZW4/OiBSZWFjdC5SZWFjdE5vZGVcbn1cblxuY29uc3QgZ2V0QXJyb3dQbGFjZW1lbnQgPSAodmVydGljYWw6IFZlcnRpY2FsUG9zaXRpb24sIGhvcml6b250YWw6IEhvcml6b250YWxQb3NpdGlvbik6IEFycm93UG9zaXRpb24gPT4ge1xuICByZXR1cm4gYCR7dmVydGljYWwgPyB2ZXJ0aWNhbCA6ICd0b3AnfS0ke2hvcml6b250YWwgPyBob3Jpem9udGFsIDogJ2xlZnQnfWAgYXMgQXJyb3dQb3NpdGlvblxufVxuXG5jb25zdCBkcmF3ZXJTdHlsZXMgPSAoe1xuICBwb3NpdGlvbixcbiAgdmVydGljYWxQb3NpdGlvbixcbiAgc2hvd0Fycm93LFxuICBlbGV2YXRpb24sXG59OiB7XG4gIHBvc2l0aW9uOiBIb3Jpem9udGFsUG9zaXRpb25cbiAgdmVydGljYWxQb3NpdGlvbjogVmVydGljYWxQb3NpdGlvblxuICBzaG93QXJyb3c6IGJvb2xlYW5cbiAgZWxldmF0aW9uOiBFbGV2YXRpb25cbn0pID0+IGNzc2BcbiAgei1pbmRleDogMTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBoZWlnaHQ6IGF1dG87XG4gIG1pbi1oZWlnaHQ6IDUwcHg7XG4gIGxlZnQ6ICR7cG9zaXRpb24gPT09ICdsZWZ0JyAmJiAwfTtcbiAgcmlnaHQ6ICR7cG9zaXRpb24gPT09ICdyaWdodCcgJiYgMH07XG4gIG1pbi13aWR0aDogMTEycHg7XG4gIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgYm94LXNoYWRvdzogJHt0aGVtZS5lbGV2YXRpb25bZWxldmF0aW9uXX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLnN1cmZhY2UucHJpbWFyeX07XG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGN1cnNvcjogZGVmYXVsdDtcbiAgJHshc2hvd0Fycm93ID8gJycgOiBhcnJvdygxMCwgdGhlbWUuY29sb3JzLnN1cmZhY2UucHJpbWFyeSwgMjAsIGdldEFycm93UGxhY2VtZW50KHZlcnRpY2FsUG9zaXRpb24sIHBvc2l0aW9uKSl9XG5gXG5cbmV4cG9ydCBjb25zdCBEcmF3ZXIgPSBSZWFjdC5mb3J3YXJkUmVmPEhUTUxEaXZFbGVtZW50LCBEcmF3ZXJQcm9wcz4oXG4gIChcbiAgICB7IGNsYXNzTmFtZSwgY2hpbGRyZW4sIHBvc2l0aW9uID0gJ2xlZnQnLCB2ZXJ0aWNhbFBvc2l0aW9uID0gJ2JvdHRvbScsIHNob3dBcnJvdyA9IHRydWUsIGVsZXZhdGlvbiA9ICc0JywgLi4ucmVzdCB9LFxuICAgIHJlZlxuICApID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgY3NzPXtkcmF3ZXJTdHlsZXMoeyBwb3NpdGlvbiwgdmVydGljYWxQb3NpdGlvbiwgc2hvd0Fycm93LCBlbGV2YXRpb24gfSl9XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgICB7Li4ucmVzdH1cbiAgICAgID5cbiAgICAgICAgPGRpdj57Y2hpbGRyZW59PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICApXG4gIH1cbilcblxuZXhwb3J0IGRlZmF1bHQgRHJhd2VyXG4iXX0= */");
+const Drawer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let className = _ref.className,
+    children = _ref.children,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'left' : _ref$position,
+    _ref$verticalPosition = _ref.verticalPosition,
+    verticalPosition = _ref$verticalPosition === void 0 ? 'bottom' : _ref$verticalPosition,
+    _ref$showArrow = _ref.showArrow,
+    showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
+    _ref$elevation = _ref.elevation,
+    elevation = _ref$elevation === void 0 ? '4' : _ref$elevation,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return (0, _react2.jsx)("div", _extends({
+    className: className,
+    css: drawerStyles({
+      position,
+      verticalPosition,
+      showArrow,
+      elevation
+    }),
+    ref: ref
+  }, rest), (0, _react2.jsx)("div", null, children));
+});
+exports.Drawer = Drawer;
+var _default = Drawer;
+exports.default = _default;

package/cjs/drawer/index.d.ts

@@ -0,0 +1 @@
+export * from './Drawer';

package/cjs/drawer/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Drawer = require("./Drawer");
+Object.keys(_Drawer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Drawer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Drawer[key];
+    }
+  });
+});

package/cjs/dropdown-menu/Dropdown.d.ts

@@ -0,0 +1,46 @@
+import React, { ReactElement } from 'react';
+import { PopperProps, PopperPlacementType } from '@mui/material';
+export declare type DropdownSize = 'medium' | 'small';
+export declare type DropdownProps = {
+    /**
+     * Placement for the `Dropdown`.
+     */
+    placement?: PopperPlacementType;
+    /**
+     * HTML element that the `Dropdown` will be anchor to.
+     */
+    anchorEl?: PopperProps['anchorEl'];
+    /**
+     * If set to `true`, the `Dropdown` is shown.
+     */
+    isOpen: boolean;
+    /**
+     * Set the state of the `Dropdown`.
+     */
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * Specify the size of the `Dropdown`.
+     */
+    size?: DropdownSize;
+    /**
+     * Close the `Dropdown` on `esc` key.
+     */
+    shouldCloseOnEsc?: boolean;
+    /**
+     * className to be assigned to component.
+     */
+    className?: string;
+    /**
+     * Select multiple children from the `Dropdown`.
+     */
+    multiselect?: boolean;
+    /**
+     * Add an `id` to the `Dropdown`.
+     */
+    id?: string;
+    onClickAway?: () => void;
+    children: ReactElement[];
+    filter?: boolean;
+};
+declare const DropdownMenu: ({ isOpen, multiselect, children, anchorEl, onClickAway, size, id, className, placement, setIsOpen, shouldCloseOnEsc, filter, ...rest }: DropdownProps) => JSX.Element;
+export default DropdownMenu;