@blateral/b.kit 2.3.0 → 2.3.2-beta.1.0

package/esm/FileUpload-851d473a.js

@@ -0,0 +1,4790 @@
+import { a as __makeTemplateObject, L as LocationPin, T as ToggleOn, w as ToggleOff, x as LocationSearch, y as CalendarToday, D as DateRange, f as __awaiter, g as __generator, z as AngleUp, F as AngleDown, e as __spreadArray, G as DeleteForever, U as UploadFile } from './ClockFilled-6bae80dc.js';
+import * as React from 'react';
+import React__default, { useState, useRef, useCallback, useEffect, forwardRef, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { C as Copy, c as copyStyle } from './Copy-bca0854c.js';
+import { s as spacings, a as getFonts, g as getColors, c as getGlobals, w as withRange, e as getSVGDataImg, m as mq } from './styles-c387bdc6.js';
+import { u as useLeafletMap } from './useLeafletMap-6dea7a8e.js';
+import { u as useLibTheme } from './LibThemeProvider-acf2e2bb.js';
+import { b as useLazyInput } from './useLazyInput-e66fc5be.js';
+import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
+import { u as useGeolocation } from './useGeolocation-f9f073cc.js';
+import { B as ButtonGhost } from './ButtonGhost-6876b67f.js';
+import { B as Button } from './Button-71376927.js';
+import ReactDatePicker from 'react-datepicker';
+import { h as hexToRgba } from './hexRgbConverter-edb91624.js';
+import { u as useMounted } from './useMounted-1e4cc87b.js';
+import { i as isValidArray } from './arrays-65b644ef.js';
+import { c as clampValue } from './clamp-12d37b65.js';
+
+var View$1 = styled.label.withConfig({
+  displayName: "FormField__View",
+  componentId: "sc-1rjz0eq-0"
+})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n    display: block;\n    text-align: left;\n\n    pointer-events: ", ";\n    user-select: ", ";\n    opacity: ", ";\n"], ["\n    display: block;\n    text-align: left;\n\n    pointer-events: ", ";\n    user-select: ", ";\n    opacity: ", ";\n"])), function (_a) {
+  var isDisabled = _a.isDisabled;
+  return isDisabled && 'none';
+}, function (_a) {
+  var isDisabled = _a.isDisabled;
+  return isDisabled && 'none';
+}, function (_a) {
+  var isDisabled = _a.isDisabled;
+  return isDisabled ? 0.3 : 1;
+});
+var FieldHead = styled(Copy).withConfig({
+  displayName: "FormField__FieldHead",
+  componentId: "sc-1rjz0eq-1"
+})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    justify-content: space-between;\n    padding-bottom: ", "px;\n"], ["\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    justify-content: space-between;\n    padding-bottom: ", "px;\n"])), spacings.nudge);
+var FieldMessage = styled(Copy).withConfig({
+  displayName: "FormField__FieldMessage",
+  componentId: "sc-1rjz0eq-2"
+})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n    margin-top: ", "px;\n"], ["\n    margin-top: ", "px;\n"])), spacings.nudge);
+
+var FieldWrapper = function (_a) {
+  var isDisabled = _a.isDisabled,
+      onClick = _a.onClick,
+      className = _a.className,
+      children = _a.children;
+  return React__default.createElement(View$1, {
+    onClick: onClick,
+    isDisabled: isDisabled,
+    className: className
+  }, children);
+};
+
+var Head = function (_a) {
+  var label = _a.label,
+      isRequired = _a.isRequired,
+      isInverted = _a.isInverted,
+      className = _a.className;
+  if (!label) return null;
+  return React__default.createElement(FieldHead, {
+    renderAs: "span",
+    isInverted: isInverted,
+    size: "small",
+    type: "copy-b",
+    className: className
+  }, "".concat(label).concat(isRequired ? ' *' : ''));
+};
+
+var Messages = function (_a) {
+  var errorMessage = _a.errorMessage,
+      infoMessage = _a.infoMessage,
+      isInverted = _a.isInverted;
+  var colors = useLibTheme().colors;
+  return React__default.createElement(React__default.Fragment, null, infoMessage && React__default.createElement(FieldMessage, {
+    size: "small",
+    type: "copy",
+    isInverted: isInverted
+  }, infoMessage), errorMessage && React__default.createElement(FieldMessage, {
+    size: "small",
+    type: "copy",
+    textColor: isInverted ? colors.text.errorInverted : colors.text.error
+  }, errorMessage ? errorMessage : 'Bitte geben Sie einen gültigen Text ein'));
+};
+
+var Content = function (_a) {
+  var children = _a.children;
+  var addWrapper = typeof children === 'string' || children instanceof String;
+  if (addWrapper) return React__default.createElement("span", null, children);
+  return React__default.createElement(React__default.Fragment, null, children);
+};
+
+var FieldWrapper$1 = {
+  View: FieldWrapper,
+  Head: Head,
+  Messages: Messages,
+  Content: Content
+};
+var templateObject_1$7, templateObject_2$5, templateObject_3$5;
+
+var getFormFieldTextSize = function (theme) {
+  var min = clampValue(getFonts(theme).copy.small.size[0], 16);
+  var max = getFonts(theme).copy.small.size[1];
+  return [min, max];
+};
+
+var MapWrapper = styled.div.withConfig({
+  displayName: "LocationField__MapWrapper",
+  componentId: "sc-ipn926-0"
+})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n    display: ", ";\n    position: relative;\n"], ["\n    display: ", ";\n    position: relative;\n"])), function (_a) {
+  var isVisible = _a.isVisible;
+  return isVisible ? 'block' : 'none';
+});
+var MapContainer = styled.div.withConfig({
+  displayName: "LocationField__MapContainer",
+  componentId: "sc-ipn926-1"
+})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    height: 290px;\n    z-index: 0;\n    outline: none;\n"], ["\n    position: relative;\n    width: 100%;\n    height: 290px;\n    z-index: 0;\n    outline: none;\n"])));
+var ViewToggle = styled.button.withConfig({
+  displayName: "LocationField__ViewToggle",
+  componentId: "sc-ipn926-2"
+})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    background: none;\n    border: none;\n    padding: ", "px 0;\n    padding-bottom: ", "px;\n\n    cursor: pointer;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    background: none;\n    border: none;\n    padding: ", "px 0;\n    padding-bottom: ", "px;\n\n    cursor: pointer;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge, spacings.nudge * 2, spacings.nudge * 2);
+var ToggleText = styled(Copy).withConfig({
+  displayName: "LocationField__ToggleText",
+  componentId: "sc-ipn926-3"
+})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n    line-height: 1;\n"], ["\n    line-height: 1;\n"])));
+var ResetMap = styled.div.withConfig({
+  displayName: "LocationField__ResetMap",
+  componentId: "sc-ipn926-4"
+})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n    position: absolute;\n    top: ", "px;\n    right: ", "px;\n"], ["\n    position: absolute;\n    top: ", "px;\n    right: ", "px;\n"])), spacings.nudge, spacings.nudge);
+var ResetMapControl = styled.button.withConfig({
+  displayName: "LocationField__ResetMapControl",
+  componentId: "sc-ipn926-5"
+})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: 0;\n    padding: ", "px;\n    margin-top: -", "px;\n    margin-right: -", "px;\n\n    cursor: pointer;\n    transition: color 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n\n    &:focus {\n        outline: 1px solid ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: 0;\n    padding: ", "px;\n    margin-top: -", "px;\n    margin-right: -", "px;\n\n    cursor: pointer;\n    transition: color 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n\n    &:focus {\n        outline: 1px solid ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), spacings.nudge, spacings.nudge, spacings.nudge, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+});
+var TrackLocation = styled.div.withConfig({
+  displayName: "LocationField__TrackLocation",
+  componentId: "sc-ipn926-6"
+})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n    position: absolute;\n    bottom: ", "px;\n    right: ", "px;\n"], ["\n    position: absolute;\n    bottom: ", "px;\n    right: ", "px;\n"])), spacings.nudge * 2, spacings.nudge);
+var TrackLocationControl = styled.button.withConfig({
+  displayName: "LocationField__TrackLocationControl",
+  componentId: "sc-ipn926-7"
+})(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: ", ";\n    border: none;\n    padding: 0.7em;\n    min-height: 40px;\n\n    ", "\n    color: ", ";\n    cursor: pointer;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);\n        }\n    }\n\n    &:focus {\n        text-decoration: underline;\n        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n        outline: none;\n        box-shadow: none;\n    }\n\n    &:active {\n        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: ", ";\n    border: none;\n    padding: 0.7em;\n    min-height: 40px;\n\n    ", "\n    color: ", ";\n    cursor: pointer;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);\n        }\n    }\n\n    &:focus {\n        text-decoration: underline;\n        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n        outline: none;\n        box-shadow: none;\n    }\n\n    &:active {\n        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);\n    }\n"])), function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.dark;
+}, copyStyle('copy', 'small'), function (_a) {
+  var theme = _a.theme;
+  return getFonts(theme).copy.small.colorInverted;
+});
+var FieldView$1 = styled.div.withConfig({
+  displayName: "LocationField__FieldView",
+  componentId: "sc-ipn926-8"
+})(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    & > * + * {\n        margin-left: 16px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    & > * + * {\n        margin-left: 16px;\n    }\n"])));
+var Area$1 = styled.textarea.withConfig({
+  displayName: "LocationField__Area",
+  componentId: "sc-ipn926-9"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: block;\n    outline: none;\n    width: 100%;\n    min-height: 100px;\n    box-shadow: none;\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    resize: none;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n"], ["\n    display: block;\n    outline: none;\n    width: 100%;\n    min-height: 100px;\n    box-shadow: none;\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    resize: none;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n"])), spacings.nudge, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      hasError = _a.hasError;
+
+  if (isInverted) {
+    return hasError ? getColors(theme).errorInverted : getColors(theme).elementBg.light;
+  }
+
+  return hasError ? getColors(theme).error : getColors(theme).elementBg.dark;
+}, function (_a) {
+  var theme = _a.theme;
+  return getGlobals(theme).sections.edgeRadius;
+}, copyStyle('copy', 'small'), function (_a) {
+  var theme = _a.theme;
+  return withRange(getFormFieldTextSize(theme), 'font-size');
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      hasError = _a.hasError;
+
+  if (isInverted) {
+    return hasError ? getColors(theme).text.errorInverted : getFonts(theme).copy.small.colorInverted;
+  }
+
+  return hasError ? getColors(theme).text.error : getFonts(theme).copy.small.color;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return "1px solid ".concat(isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return "1px solid ".concat(isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).text.subtileInverted : getColors(theme).text.subtile;
+});
+
+var LocationField = function (_a) {
+  var _b, _c;
+
+  var label = _a.label,
+      errorMessage = _a.errorMessage,
+      infoMessage = _a.infoMessage,
+      isRequired = _a.isRequired,
+      isDisabled = _a.isDisabled,
+      isInverted = _a.isInverted,
+      placeholder = _a.placeholder,
+      value = _a.value,
+      name = _a.name,
+      marker = _a.marker,
+      initialMapCenter = _a.initialMapCenter,
+      _d = _a.zoom,
+      zoom = _d === void 0 ? 10 : _d,
+      onChange = _a.onChange,
+      onBlur = _a.onBlur,
+      customToggle = _a.customToggle,
+      customLocationControl = _a.customLocationControl,
+      customResetControl = _a.customResetControl,
+      _e = _a.toggleLabel,
+      toggleLabel = _e === void 0 ? 'Select location on map' : _e,
+      _f = _a.trackLocationLabel,
+      trackLocationLabel = _f === void 0 ? 'My location' : _f;
+
+  if (isDisabled) {
+    errorMessage = '';
+  }
+
+  var _g = useLibTheme(),
+      colors = _g.colors,
+      fonts = _g.fonts;
+
+  var _h = useState(false),
+      useMapView = _h[0],
+      setUseMapView = _h[1];
+
+  var _j = useState(value || {
+    description: ''
+  }),
+      getValue = _j[0],
+      setValue = _j[1];
+
+  var prevValue = useRef(null);
+
+  var _k = useState([]),
+      markers = _k[0],
+      setMarkers = _k[1];
+
+  var _l = useLazyInput(function (value) {
+    setValue({
+      description: value,
+      position: undefined
+    });
+  }, (value === null || value === void 0 ? void 0 : value.description) || ''),
+      descValue = _l.value,
+      setDescValue = _l.update,
+      forceUpdate = _l.forceUpdate;
+
+  var getMarkersFromPositions = useCallback(function (positions) {
+    /** Markers */
+    var defaultMarker = {
+      size: [28, 28],
+      anchor: [14, 28],
+      sizeActive: [70, 70],
+      anchorActive: [35, 70],
+      url: getSVGDataImg(React__default.createElement(LocationPin, null))
+    };
+    var markerList = [];
+
+    for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
+      var position = positions_1[_i];
+      markerList.push({
+        id: 'location',
+        position: position,
+        icon: marker || defaultMarker
+      });
+    }
+
+    return markerList;
+  }, [marker]);
+
+  var _m = useLeafletMap({
+    activeMarkerId: 'location',
+    markers: markers,
+    center: initialMapCenter,
+    zoom: zoom,
+    onClick: function (ev) {
+      mapClickHandler(ev);
+    }
+  }),
+      setMapContainer = _m.setContainer,
+      flyToPosition = _m.flyToPosition,
+      recalculateMapSize = _m.recalculateMapSize; // double click fix
+
+
+  var doubleClickTimerRef = useRef(null);
+
+  var _o = useGeolocation(true, false),
+      isGeolocationSupported = _o.isSupported,
+      isEnabled = _o.isEnabled,
+      location = _o.location,
+      error = _o.error,
+      resetLocationTracking = _o.reset,
+      cancelGeolocation = _o.cancel;
+
+  var setMapToInitial = useCallback(function () {
+    flyToPosition(initialMapCenter, zoom);
+    cancelGeolocation();
+  }, [cancelGeolocation, flyToPosition, initialMapCenter, zoom]);
+
+  var handleMapClick = function (newPos) {
+    cancelGeolocation(); // set marker
+
+    var markers = getMarkersFromPositions([newPos]);
+    setMarkers(markers);
+    setValue({
+      description: '',
+      position: newPos
+    });
+  };
+
+  var handleTrackClick = function () {
+    // if we have old location set marker, map and value
+    setToCurrentLocation();
+    resetLocationTracking();
+  };
+
+  var mapClickHandler = function (ev) {
+    var newPos = [ev.latlng.lat, ev.latlng.lng];
+
+    if (doubleClickTimerRef.current === null) {
+      doubleClickTimerRef.current = window.setTimeout(function () {
+        handleMapClick(newPos);
+        doubleClickTimerRef.current = null;
+      }, 300);
+    } else {
+      window.clearTimeout(doubleClickTimerRef.current);
+      doubleClickTimerRef.current = null;
+    }
+  };
+
+  var setToCurrentLocation = useCallback(function () {
+    if (!location) return;
+    var newPos = [location.coords.latitude, location.coords.longitude];
+    var marker = getMarkersFromPositions([newPos]);
+    setMarkers(marker);
+    flyToPosition(newPos, 14);
+    setValue({
+      description: '',
+      position: newPos
+    });
+  }, [flyToPosition, getMarkersFromPositions, location]);
+
+  var toggleViewState = function () {
+    setUseMapView(function (prev) {
+      return !prev;
+    });
+  };
+
+  useEffect(function () {
+    if (isEnabled && location && !error) {
+      setToCurrentLocation();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [error, location, isEnabled]);
+  useEffect(function () {
+    setValue({
+      description: '',
+      position: undefined
+    }); // recalculate map on view change
+
+    if (useMapView) {
+      recalculateMapSize();
+      setDescValue('');
+    } else {
+      setMarkers([]);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [useMapView, recalculateMapSize, descValue]);
+  useUpdateEffect(function () {
+    var _a, _b, _c, _d;
+
+    var prev = prevValue.current;
+
+    if (!prev || prev.description !== getValue.description || ((_a = prev.position) === null || _a === void 0 ? void 0 : _a[0]) !== ((_b = getValue.position) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = prev.position) === null || _c === void 0 ? void 0 : _c[1]) !== ((_d = getValue.position) === null || _d === void 0 ? void 0 : _d[1])) {
+      prevValue.current = getValue;
+      onChange === null || onChange === void 0 ? void 0 : onChange(getValue);
+    }
+  }, [getValue]);
+  return React__default.createElement(React__default.Fragment, null, name && React__default.createElement("input", {
+    type: "hidden",
+    name: "".concat(name, "[\"location\"]"),
+    value: "".concat((_b = getValue === null || getValue === void 0 ? void 0 : getValue.position) === null || _b === void 0 ? void 0 : _b[0], ",").concat((_c = getValue === null || getValue === void 0 ? void 0 : getValue.position) === null || _c === void 0 ? void 0 : _c[1])
+  }), React__default.createElement(FieldWrapper$1.View, {
+    isDisabled: isDisabled,
+    onClick: function (ev) {
+      return ev.preventDefault();
+    }
+  }, React__default.createElement(FieldWrapper$1.Head, {
+    label: label,
+    isRequired: isRequired,
+    isInverted: isInverted
+  }), customToggle ? customToggle({
+    isInverted: isInverted,
+    viewState: useMapView ? 'map' : 'desc',
+    handleClick: toggleViewState
+  }) : React__default.createElement(ViewToggle, {
+    type: "button",
+    onClick: toggleViewState
+  }, useMapView ? React__default.createElement(ToggleOn, {
+    iconColor: isInverted ? colors.primary.inverted : colors.primary.default
+  }) : React__default.createElement(ToggleOff, {
+    iconColor: isInverted ? fonts.copy.small.colorInverted : fonts.copy.small.color
+  }), React__default.createElement(ToggleText, {
+    size: "small",
+    renderAs: "span",
+    isInverted: isInverted
+  }, toggleLabel)), React__default.createElement(MapWrapper, {
+    isVisible: useMapView
+  }, React__default.createElement(MapContainer, {
+    ref: setMapContainer,
+    tabIndex: 0,
+    onClick: function () {
+      forceUpdate();
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(getValue);
+    }
+  }), React__default.createElement(ResetMap, null, customResetControl ? customResetControl({
+    isInverted: isInverted,
+    handleClick: setMapToInitial
+  }) : React__default.createElement(ResetMapControl, {
+    onClick: setMapToInitial
+  }, React__default.createElement(LocationSearch, null))), isGeolocationSupported && React__default.createElement(TrackLocation, null, customLocationControl ? customLocationControl({
+    isInverted: isInverted,
+    handleClick: handleTrackClick
+  }) : React__default.createElement(TrackLocationControl, {
+    onClick: handleTrackClick
+  }, trackLocationLabel))), !useMapView && React__default.createElement(React__default.Fragment, null, React__default.createElement(FieldView$1, null, React__default.createElement(FieldWrapper$1.Content, null, React__default.createElement(Area$1, {
+    placeholder: placeholder,
+    hasError: !!errorMessage,
+    isInverted: isInverted,
+    name: "".concat(name, "[\"description\"]"),
+    value: descValue,
+    required: isRequired,
+    onChange: function (ev) {
+      var value = ev.currentTarget.value;
+      setDescValue(value);
+    },
+    onBlur: function () {
+      forceUpdate();
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(getValue);
+    }
+  })))), React__default.createElement(FieldWrapper$1.Messages, {
+    infoMessage: infoMessage,
+    errorMessage: errorMessage,
+    isInverted: isInverted
+  })));
+};
+/**
+ * Function to compare both field prop states
+ * @param prev Previous props
+ * @param next Next props
+ * @returns
+ */
+
+
+var areEqual$6 = function (prev, next) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k; // only apply logic if memo functionality is enabled
+
+
+  if (!prev.enableMemo) return false;
+  if (prev.errorMessage !== next.errorMessage) return false;
+  if (prev.infoMessage !== next.infoMessage) return false;
+  if (prev.label !== next.label) return false;
+  if (prev.toggleLabel !== next.toggleLabel) return false;
+  if (prev.placeholder !== next.placeholder) return false;
+  if (((_a = prev.value) === null || _a === void 0 ? void 0 : _a.description) !== ((_b = next.value) === null || _b === void 0 ? void 0 : _b.description)) return false;
+
+  if (((_d = (_c = prev.value) === null || _c === void 0 ? void 0 : _c.position) === null || _d === void 0 ? void 0 : _d[0]) !== ((_f = (_e = next.value) === null || _e === void 0 ? void 0 : _e.position) === null || _f === void 0 ? void 0 : _f[0]) || ((_h = (_g = prev.value) === null || _g === void 0 ? void 0 : _g.position) === null || _h === void 0 ? void 0 : _h[1]) !== ((_k = (_j = next.value) === null || _j === void 0 ? void 0 : _j.position) === null || _k === void 0 ? void 0 : _k[1])) {
+    return false;
+  }
+
+  return true;
+};
+
+var LocationField$1 = React__default.memo(LocationField, areEqual$6);
+var templateObject_1$6, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$3, templateObject_8$2, templateObject_9$2, templateObject_10;
+
+function toInteger(dirtyNumber) {
+  if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
+    return NaN;
+  }
+
+  var number = Number(dirtyNumber);
+
+  if (isNaN(number)) {
+    return number;
+  }
+
+  return number < 0 ? Math.ceil(number) : Math.floor(number);
+}
+
+function requiredArgs(required, args) {
+  if (args.length < required) {
+    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
+  }
+}
+
+/**
+ * @name toDate
+ * @category Common Helpers
+ * @summary Convert the given argument to an instance of Date.
+ *
+ * @description
+ * Convert the given argument to an instance of Date.
+ *
+ * If the argument is an instance of Date, the function returns its clone.
+ *
+ * If the argument is a number, it is treated as a timestamp.
+ *
+ * If the argument is none of the above, the function returns Invalid Date.
+ *
+ * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
+ *
+ * @param {Date|Number} argument - the value to convert
+ * @returns {Date} the parsed date in the local time zone
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // Clone the date:
+ * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
+ * //=> Tue Feb 11 2014 11:30:30
+ *
+ * @example
+ * // Convert the timestamp to date:
+ * const result = toDate(1392098430000)
+ * //=> Tue Feb 11 2014 11:30:30
+ */
+
+function toDate(argument) {
+  requiredArgs(1, arguments);
+  var argStr = Object.prototype.toString.call(argument); // Clone the date
+
+  if (argument instanceof Date || typeof argument === 'object' && argStr === '[object Date]') {
+    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
+    return new Date(argument.getTime());
+  } else if (typeof argument === 'number' || argStr === '[object Number]') {
+    return new Date(argument);
+  } else {
+    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
+      // eslint-disable-next-line no-console
+      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://git.io/fjule"); // eslint-disable-next-line no-console
+
+      console.warn(new Error().stack);
+    }
+
+    return new Date(NaN);
+  }
+}
+
+/**
+ * @name addMilliseconds
+ * @category Millisecond Helpers
+ * @summary Add the specified number of milliseconds to the given date.
+ *
+ * @description
+ * Add the specified number of milliseconds to the given date.
+ *
+ * ### v2.0.0 breaking changes:
+ *
+ * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of milliseconds to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} the new date with the milliseconds added
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Add 750 milliseconds to 10 July 2014 12:45:30.000:
+ * const result = addMilliseconds(new Date(2014, 6, 10, 12, 45, 30, 0), 750)
+ * //=> Thu Jul 10 2014 12:45:30.750
+ */
+
+function addMilliseconds(dirtyDate, dirtyAmount) {
+  requiredArgs(2, arguments);
+  var timestamp = toDate(dirtyDate).getTime();
+  var amount = toInteger(dirtyAmount);
+  return new Date(timestamp + amount);
+}
+
+/**
+ * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds.
+ * They usually appear for dates that denote time before the timezones were introduced
+ * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891
+ * and GMT+01:00:00 after that date)
+ *
+ * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above,
+ * which would lead to incorrect calculations.
+ *
+ * This function returns the timezone offset in milliseconds that takes seconds in account.
+ */
+function getTimezoneOffsetInMilliseconds(date) {
+  var utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
+  utcDate.setUTCFullYear(date.getFullYear());
+  return date.getTime() - utcDate.getTime();
+}
+
+/**
+ * @name isDate
+ * @category Common Helpers
+ * @summary Is the given value a date?
+ *
+ * @description
+ * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
+ *
+ * ### v2.0.0 breaking changes:
+ *
+ * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
+ *
+ * @param {*} value - the value to check
+ * @returns {boolean} true if the given value is a date
+ * @throws {TypeError} 1 arguments required
+ *
+ * @example
+ * // For a valid date:
+ * const result = isDate(new Date())
+ * //=> true
+ *
+ * @example
+ * // For an invalid date:
+ * const result = isDate(new Date(NaN))
+ * //=> true
+ *
+ * @example
+ * // For some value:
+ * const result = isDate('2014-02-31')
+ * //=> false
+ *
+ * @example
+ * // For an object:
+ * const result = isDate({})
+ * //=> false
+ */
+
+function isDate(value) {
+  requiredArgs(1, arguments);
+  return value instanceof Date || typeof value === 'object' && Object.prototype.toString.call(value) === '[object Date]';
+}
+
+/**
+ * @name isValid
+ * @category Common Helpers
+ * @summary Is the given date valid?
+ *
+ * @description
+ * Returns false if argument is Invalid Date and true otherwise.
+ * Argument is converted to Date using `toDate`. See [toDate]{@link https://date-fns.org/docs/toDate}
+ * Invalid Date is a Date, whose time value is NaN.
+ *
+ * Time value of Date: http://es5.github.io/#x15.9.1.1
+ *
+ * ### v2.0.0 breaking changes:
+ *
+ * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
+ *
+ * - Now `isValid` doesn't throw an exception
+ *   if the first argument is not an instance of Date.
+ *   Instead, argument is converted beforehand using `toDate`.
+ *
+ *   Examples:
+ *
+ *   | `isValid` argument        | Before v2.0.0 | v2.0.0 onward |
+ *   |---------------------------|---------------|---------------|
+ *   | `new Date()`              | `true`        | `true`        |
+ *   | `new Date('2016-01-01')`  | `true`        | `true`        |
+ *   | `new Date('')`            | `false`       | `false`       |
+ *   | `new Date(1488370835081)` | `true`        | `true`        |
+ *   | `new Date(NaN)`           | `false`       | `false`       |
+ *   | `'2016-01-01'`            | `TypeError`   | `false`       |
+ *   | `''`                      | `TypeError`   | `false`       |
+ *   | `1488370835081`           | `TypeError`   | `true`        |
+ *   | `NaN`                     | `TypeError`   | `false`       |
+ *
+ *   We introduce this change to make *date-fns* consistent with ECMAScript behavior
+ *   that try to coerce arguments to the expected type
+ *   (which is also the case with other *date-fns* functions).
+ *
+ * @param {*} date - the date to check
+ * @returns {Boolean} the date is valid
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // For the valid date:
+ * const result = isValid(new Date(2014, 1, 31))
+ * //=> true
+ *
+ * @example
+ * // For the value, convertable into a date:
+ * const result = isValid(1393804800000)
+ * //=> true
+ *
+ * @example
+ * // For the invalid date:
+ * const result = isValid(new Date(''))
+ * //=> false
+ */
+
+function isValid(dirtyDate) {
+  requiredArgs(1, arguments);
+
+  if (!isDate(dirtyDate) && typeof dirtyDate !== 'number') {
+    return false;
+  }
+
+  var date = toDate(dirtyDate);
+  return !isNaN(Number(date));
+}
+
+var formatDistanceLocale$1 = {
+  lessThanXSeconds: {
+    one: 'less than a second',
+    other: 'less than {{count}} seconds'
+  },
+  xSeconds: {
+    one: '1 second',
+    other: '{{count}} seconds'
+  },
+  halfAMinute: 'half a minute',
+  lessThanXMinutes: {
+    one: 'less than a minute',
+    other: 'less than {{count}} minutes'
+  },
+  xMinutes: {
+    one: '1 minute',
+    other: '{{count}} minutes'
+  },
+  aboutXHours: {
+    one: 'about 1 hour',
+    other: 'about {{count}} hours'
+  },
+  xHours: {
+    one: '1 hour',
+    other: '{{count}} hours'
+  },
+  xDays: {
+    one: '1 day',
+    other: '{{count}} days'
+  },
+  aboutXWeeks: {
+    one: 'about 1 week',
+    other: 'about {{count}} weeks'
+  },
+  xWeeks: {
+    one: '1 week',
+    other: '{{count}} weeks'
+  },
+  aboutXMonths: {
+    one: 'about 1 month',
+    other: 'about {{count}} months'
+  },
+  xMonths: {
+    one: '1 month',
+    other: '{{count}} months'
+  },
+  aboutXYears: {
+    one: 'about 1 year',
+    other: 'about {{count}} years'
+  },
+  xYears: {
+    one: '1 year',
+    other: '{{count}} years'
+  },
+  overXYears: {
+    one: 'over 1 year',
+    other: 'over {{count}} years'
+  },
+  almostXYears: {
+    one: 'almost 1 year',
+    other: 'almost {{count}} years'
+  }
+};
+
+var formatDistance$1 = function (token, count, options) {
+  var result;
+  var tokenValue = formatDistanceLocale$1[token];
+
+  if (typeof tokenValue === 'string') {
+    result = tokenValue;
+  } else if (count === 1) {
+    result = tokenValue.one;
+  } else {
+    result = tokenValue.other.replace('{{count}}', count.toString());
+  }
+
+  if (options !== null && options !== void 0 && options.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
+      return 'in ' + result;
+    } else {
+      return result + ' ago';
+    }
+  }
+
+  return result;
+};
+
+function buildFormatLongFn(args) {
+  return function () {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; // TODO: Remove String()
+
+    var width = options.width ? String(options.width) : args.defaultWidth;
+    var format = args.formats[width] || args.formats[args.defaultWidth];
+    return format;
+  };
+}
+
+var dateFormats$1 = {
+  full: 'EEEE, MMMM do, y',
+  long: 'MMMM do, y',
+  medium: 'MMM d, y',
+  short: 'MM/dd/yyyy'
+};
+var timeFormats$1 = {
+  full: 'h:mm:ss a zzzz',
+  long: 'h:mm:ss a z',
+  medium: 'h:mm:ss a',
+  short: 'h:mm a'
+};
+var dateTimeFormats$1 = {
+  full: "{{date}} 'at' {{time}}",
+  long: "{{date}} 'at' {{time}}",
+  medium: '{{date}}, {{time}}',
+  short: '{{date}}, {{time}}'
+};
+var formatLong$1 = {
+  date: buildFormatLongFn({
+    formats: dateFormats$1,
+    defaultWidth: 'full'
+  }),
+  time: buildFormatLongFn({
+    formats: timeFormats$1,
+    defaultWidth: 'full'
+  }),
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats$1,
+    defaultWidth: 'full'
+  })
+};
+
+var formatRelativeLocale$1 = {
+  lastWeek: "'last' eeee 'at' p",
+  yesterday: "'yesterday at' p",
+  today: "'today at' p",
+  tomorrow: "'tomorrow at' p",
+  nextWeek: "eeee 'at' p",
+  other: 'P'
+};
+
+var formatRelative$1 = function (token, _date, _baseDate, _options) {
+  return formatRelativeLocale$1[token];
+};
+
+function buildLocalizeFn(args) {
+  return function (dirtyIndex, dirtyOptions) {
+    var options = dirtyOptions || {};
+    var context = options.context ? String(options.context) : 'standalone';
+    var valuesArray;
+
+    if (context === 'formatting' && args.formattingValues) {
+      var defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
+      var width = options.width ? String(options.width) : defaultWidth;
+      valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
+    } else {
+      var _defaultWidth = args.defaultWidth;
+
+      var _width = options.width ? String(options.width) : args.defaultWidth;
+
+      valuesArray = args.values[_width] || args.values[_defaultWidth];
+    }
+
+    var index = args.argumentCallback ? args.argumentCallback(dirtyIndex) : dirtyIndex; // @ts-ignore: For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it!
+
+    return valuesArray[index];
+  };
+}
+
+var eraValues$1 = {
+  narrow: ['B', 'A'],
+  abbreviated: ['BC', 'AD'],
+  wide: ['Before Christ', 'Anno Domini']
+};
+var quarterValues$1 = {
+  narrow: ['1', '2', '3', '4'],
+  abbreviated: ['Q1', 'Q2', 'Q3', 'Q4'],
+  wide: ['1st quarter', '2nd quarter', '3rd quarter', '4th quarter']
+}; // Note: in English, the names of days of the week and months are capitalized.
+// If you are making a new locale based on this one, check if the same is true for the language you're working on.
+// Generally, formatted dates should look like they are in the middle of a sentence,
+// e.g. in Spanish language the weekdays and months should be in the lowercase.
+
+var monthValues$1 = {
+  narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+  abbreviated: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+  wide: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+};
+var dayValues$1 = {
+  narrow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+  short: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+  abbreviated: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+  wide: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+};
+var dayPeriodValues$1 = {
+  narrow: {
+    am: 'a',
+    pm: 'p',
+    midnight: 'mi',
+    noon: 'n',
+    morning: 'morning',
+    afternoon: 'afternoon',
+    evening: 'evening',
+    night: 'night'
+  },
+  abbreviated: {
+    am: 'AM',
+    pm: 'PM',
+    midnight: 'midnight',
+    noon: 'noon',
+    morning: 'morning',
+    afternoon: 'afternoon',
+    evening: 'evening',
+    night: 'night'
+  },
+  wide: {
+    am: 'a.m.',
+    pm: 'p.m.',
+    midnight: 'midnight',
+    noon: 'noon',
+    morning: 'morning',
+    afternoon: 'afternoon',
+    evening: 'evening',
+    night: 'night'
+  }
+};
+var formattingDayPeriodValues$1 = {
+  narrow: {
+    am: 'a',
+    pm: 'p',
+    midnight: 'mi',
+    noon: 'n',
+    morning: 'in the morning',
+    afternoon: 'in the afternoon',
+    evening: 'in the evening',
+    night: 'at night'
+  },
+  abbreviated: {
+    am: 'AM',
+    pm: 'PM',
+    midnight: 'midnight',
+    noon: 'noon',
+    morning: 'in the morning',
+    afternoon: 'in the afternoon',
+    evening: 'in the evening',
+    night: 'at night'
+  },
+  wide: {
+    am: 'a.m.',
+    pm: 'p.m.',
+    midnight: 'midnight',
+    noon: 'noon',
+    morning: 'in the morning',
+    afternoon: 'in the afternoon',
+    evening: 'in the evening',
+    night: 'at night'
+  }
+};
+
+var ordinalNumber$1 = function (dirtyNumber, _options) {
+  var number = Number(dirtyNumber); // If ordinal numbers depend on context, for example,
+  // if they are different for different grammatical genders,
+  // use `options.unit`.
+  //
+  // `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear',
+  // 'day', 'hour', 'minute', 'second'.
+
+  var rem100 = number % 100;
+
+  if (rem100 > 20 || rem100 < 10) {
+    switch (rem100 % 10) {
+      case 1:
+        return number + 'st';
+
+      case 2:
+        return number + 'nd';
+
+      case 3:
+        return number + 'rd';
+    }
+  }
+
+  return number + 'th';
+};
+
+var localize$1 = {
+  ordinalNumber: ordinalNumber$1,
+  era: buildLocalizeFn({
+    values: eraValues$1,
+    defaultWidth: 'wide'
+  }),
+  quarter: buildLocalizeFn({
+    values: quarterValues$1,
+    defaultWidth: 'wide',
+    argumentCallback: function (quarter) {
+      return quarter - 1;
+    }
+  }),
+  month: buildLocalizeFn({
+    values: monthValues$1,
+    defaultWidth: 'wide'
+  }),
+  day: buildLocalizeFn({
+    values: dayValues$1,
+    defaultWidth: 'wide'
+  }),
+  dayPeriod: buildLocalizeFn({
+    values: dayPeriodValues$1,
+    defaultWidth: 'wide',
+    formattingValues: formattingDayPeriodValues$1,
+    defaultFormattingWidth: 'wide'
+  })
+};
+
+function buildMatchFn(args) {
+  return function (string) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var width = options.width;
+    var matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
+    var matchResult = string.match(matchPattern);
+
+    if (!matchResult) {
+      return null;
+    }
+
+    var matchedString = matchResult[0];
+    var parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
+    var key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, function (pattern) {
+      return pattern.test(matchedString);
+    }) : findKey(parsePatterns, function (pattern) {
+      return pattern.test(matchedString);
+    });
+    var value;
+    value = args.valueCallback ? args.valueCallback(key) : key;
+    value = options.valueCallback ? options.valueCallback(value) : value;
+    var rest = string.slice(matchedString.length);
+    return {
+      value: value,
+      rest: rest
+    };
+  };
+}
+
+function findKey(object, predicate) {
+  for (var key in object) {
+    if (object.hasOwnProperty(key) && predicate(object[key])) {
+      return key;
+    }
+  }
+
+  return undefined;
+}
+
+function findIndex(array, predicate) {
+  for (var key = 0; key < array.length; key++) {
+    if (predicate(array[key])) {
+      return key;
+    }
+  }
+
+  return undefined;
+}
+
+function buildMatchPatternFn(args) {
+  return function (string) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var matchResult = string.match(args.matchPattern);
+    if (!matchResult) return null;
+    var matchedString = matchResult[0];
+    var parseResult = string.match(args.parsePattern);
+    if (!parseResult) return null;
+    var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
+    value = options.valueCallback ? options.valueCallback(value) : value;
+    var rest = string.slice(matchedString.length);
+    return {
+      value: value,
+      rest: rest
+    };
+  };
+}
+
+var matchOrdinalNumberPattern$1 = /^(\d+)(th|st|nd|rd)?/i;
+var parseOrdinalNumberPattern$1 = /\d+/i;
+var matchEraPatterns$1 = {
+  narrow: /^(b|a)/i,
+  abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
+  wide: /^(before christ|before common era|anno domini|common era)/i
+};
+var parseEraPatterns$1 = {
+  any: [/^b/i, /^(a|c)/i]
+};
+var matchQuarterPatterns$1 = {
+  narrow: /^[1234]/i,
+  abbreviated: /^q[1234]/i,
+  wide: /^[1234](th|st|nd|rd)? quarter/i
+};
+var parseQuarterPatterns$1 = {
+  any: [/1/i, /2/i, /3/i, /4/i]
+};
+var matchMonthPatterns$1 = {
+  narrow: /^[jfmasond]/i,
+  abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,
+  wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i
+};
+var parseMonthPatterns$1 = {
+  narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i],
+  any: [/^ja/i, /^f/i, /^mar/i, /^ap/i, /^may/i, /^jun/i, /^jul/i, /^au/i, /^s/i, /^o/i, /^n/i, /^d/i]
+};
+var matchDayPatterns$1 = {
+  narrow: /^[smtwf]/i,
+  short: /^(su|mo|tu|we|th|fr|sa)/i,
+  abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,
+  wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i
+};
+var parseDayPatterns$1 = {
+  narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i],
+  any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i]
+};
+var matchDayPeriodPatterns$1 = {
+  narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,
+  any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i
+};
+var parseDayPeriodPatterns$1 = {
+  any: {
+    am: /^a/i,
+    pm: /^p/i,
+    midnight: /^mi/i,
+    noon: /^no/i,
+    morning: /morning/i,
+    afternoon: /afternoon/i,
+    evening: /evening/i,
+    night: /night/i
+  }
+};
+var match$1 = {
+  ordinalNumber: buildMatchPatternFn({
+    matchPattern: matchOrdinalNumberPattern$1,
+    parsePattern: parseOrdinalNumberPattern$1,
+    valueCallback: function (value) {
+      return parseInt(value, 10);
+    }
+  }),
+  era: buildMatchFn({
+    matchPatterns: matchEraPatterns$1,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseEraPatterns$1,
+    defaultParseWidth: 'any'
+  }),
+  quarter: buildMatchFn({
+    matchPatterns: matchQuarterPatterns$1,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseQuarterPatterns$1,
+    defaultParseWidth: 'any',
+    valueCallback: function (index) {
+      return index + 1;
+    }
+  }),
+  month: buildMatchFn({
+    matchPatterns: matchMonthPatterns$1,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseMonthPatterns$1,
+    defaultParseWidth: 'any'
+  }),
+  day: buildMatchFn({
+    matchPatterns: matchDayPatterns$1,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseDayPatterns$1,
+    defaultParseWidth: 'any'
+  }),
+  dayPeriod: buildMatchFn({
+    matchPatterns: matchDayPeriodPatterns$1,
+    defaultMatchWidth: 'any',
+    parsePatterns: parseDayPeriodPatterns$1,
+    defaultParseWidth: 'any'
+  })
+};
+
+/**
+ * @type {Locale}
+ * @category Locales
+ * @summary English locale (United States).
+ * @language English
+ * @iso-639-2 eng
+ * @author Sasha Koss [@kossnocorp]{@link https://github.com/kossnocorp}
+ * @author Lesha Koss [@leshakoss]{@link https://github.com/leshakoss}
+ */
+
+var locale$1 = {
+  code: 'en-US',
+  formatDistance: formatDistance$1,
+  formatLong: formatLong$1,
+  formatRelative: formatRelative$1,
+  localize: localize$1,
+  match: match$1,
+  options: {
+    weekStartsOn: 0
+    /* Sunday */
+    ,
+    firstWeekContainsDate: 1
+  }
+};
+
+/**
+ * @name subMilliseconds
+ * @category Millisecond Helpers
+ * @summary Subtract the specified number of milliseconds from the given date.
+ *
+ * @description
+ * Subtract the specified number of milliseconds from the given date.
+ *
+ * ### v2.0.0 breaking changes:
+ *
+ * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of milliseconds to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} the new date with the milliseconds subtracted
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Subtract 750 milliseconds from 10 July 2014 12:45:30.000:
+ * const result = subMilliseconds(new Date(2014, 6, 10, 12, 45, 30, 0), 750)
+ * //=> Thu Jul 10 2014 12:45:29.250
+ */
+
+function subMilliseconds(dirtyDate, dirtyAmount) {
+  requiredArgs(2, arguments);
+  var amount = toInteger(dirtyAmount);
+  return addMilliseconds(dirtyDate, -amount);
+}
+
+var MILLISECONDS_IN_DAY = 86400000; // This function will be a part of public API when UTC function will be implemented.
+// See issue: https://github.com/date-fns/date-fns/issues/376
+
+function getUTCDayOfYear(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  var timestamp = date.getTime();
+  date.setUTCMonth(0, 1);
+  date.setUTCHours(0, 0, 0, 0);
+  var startOfYearTimestamp = date.getTime();
+  var difference = timestamp - startOfYearTimestamp;
+  return Math.floor(difference / MILLISECONDS_IN_DAY) + 1;
+}
+
+// See issue: https://github.com/date-fns/date-fns/issues/376
+
+function startOfUTCISOWeek(dirtyDate) {
+  requiredArgs(1, arguments);
+  var weekStartsOn = 1;
+  var date = toDate(dirtyDate);
+  var day = date.getUTCDay();
+  var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
+  date.setUTCDate(date.getUTCDate() - diff);
+  date.setUTCHours(0, 0, 0, 0);
+  return date;
+}
+
+// See issue: https://github.com/date-fns/date-fns/issues/376
+
+function getUTCISOWeekYear(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  var year = date.getUTCFullYear();
+  var fourthOfJanuaryOfNextYear = new Date(0);
+  fourthOfJanuaryOfNextYear.setUTCFullYear(year + 1, 0, 4);
+  fourthOfJanuaryOfNextYear.setUTCHours(0, 0, 0, 0);
+  var startOfNextYear = startOfUTCISOWeek(fourthOfJanuaryOfNextYear);
+  var fourthOfJanuaryOfThisYear = new Date(0);
+  fourthOfJanuaryOfThisYear.setUTCFullYear(year, 0, 4);
+  fourthOfJanuaryOfThisYear.setUTCHours(0, 0, 0, 0);
+  var startOfThisYear = startOfUTCISOWeek(fourthOfJanuaryOfThisYear);
+
+  if (date.getTime() >= startOfNextYear.getTime()) {
+    return year + 1;
+  } else if (date.getTime() >= startOfThisYear.getTime()) {
+    return year;
+  } else {
+    return year - 1;
+  }
+}
+
+// See issue: https://github.com/date-fns/date-fns/issues/376
+
+function startOfUTCISOWeekYear(dirtyDate) {
+  requiredArgs(1, arguments);
+  var year = getUTCISOWeekYear(dirtyDate);
+  var fourthOfJanuary = new Date(0);
+  fourthOfJanuary.setUTCFullYear(year, 0, 4);
+  fourthOfJanuary.setUTCHours(0, 0, 0, 0);
+  var date = startOfUTCISOWeek(fourthOfJanuary);
+  return date;
+}
+
+var MILLISECONDS_IN_WEEK$1 = 604800000; // This function will be a part of public API when UTC function will be implemented.
+// See issue: https://github.com/date-fns/date-fns/issues/376
+
+function getUTCISOWeek(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  var diff = startOfUTCISOWeek(date).getTime() - startOfUTCISOWeekYear(date).getTime(); // Round the number of days to the nearest integer
+  // because the number of milliseconds in a week is not constant
+  // (e.g. it's different in the week of the daylight saving time clock shift)
+
+  return Math.round(diff / MILLISECONDS_IN_WEEK$1) + 1;
+}
+
+// See issue: https://github.com/date-fns/date-fns/issues/376
+
+function startOfUTCWeek(dirtyDate, dirtyOptions) {
+  requiredArgs(1, arguments);
+  var options = dirtyOptions || {};
+  var locale = options.locale;
+  var localeWeekStartsOn = locale && locale.options && locale.options.weekStartsOn;
+  var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : toInteger(localeWeekStartsOn);
+  var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
+
+  if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
+    throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
+  }
+
+  var date = toDate(dirtyDate);
+  var day = date.getUTCDay();
+  var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
+  date.setUTCDate(date.getUTCDate() - diff);
+  date.setUTCHours(0, 0, 0, 0);
+  return date;
+}
+
+// See issue: https://github.com/date-fns/date-fns/issues/376
+
+function getUTCWeekYear(dirtyDate, dirtyOptions) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  var year = date.getUTCFullYear();
+  var options = dirtyOptions || {};
+  var locale = options.locale;
+  var localeFirstWeekContainsDate = locale && locale.options && locale.options.firstWeekContainsDate;
+  var defaultFirstWeekContainsDate = localeFirstWeekContainsDate == null ? 1 : toInteger(localeFirstWeekContainsDate);
+  var firstWeekContainsDate = options.firstWeekContainsDate == null ? defaultFirstWeekContainsDate : toInteger(options.firstWeekContainsDate); // Test if weekStartsOn is between 1 and 7 _and_ is not NaN
+
+  if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) {
+    throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively');
+  }
+
+  var firstWeekOfNextYear = new Date(0);
+  firstWeekOfNextYear.setUTCFullYear(year + 1, 0, firstWeekContainsDate);
+  firstWeekOfNextYear.setUTCHours(0, 0, 0, 0);
+  var startOfNextYear = startOfUTCWeek(firstWeekOfNextYear, dirtyOptions);
+  var firstWeekOfThisYear = new Date(0);
+  firstWeekOfThisYear.setUTCFullYear(year, 0, firstWeekContainsDate);
+  firstWeekOfThisYear.setUTCHours(0, 0, 0, 0);
+  var startOfThisYear = startOfUTCWeek(firstWeekOfThisYear, dirtyOptions);
+
+  if (date.getTime() >= startOfNextYear.getTime()) {
+    return year + 1;
+  } else if (date.getTime() >= startOfThisYear.getTime()) {
+    return year;
+  } else {
+    return year - 1;
+  }
+}
+
+// See issue: https://github.com/date-fns/date-fns/issues/376
+
+function startOfUTCWeekYear(dirtyDate, dirtyOptions) {
+  requiredArgs(1, arguments);
+  var options = dirtyOptions || {};
+  var locale = options.locale;
+  var localeFirstWeekContainsDate = locale && locale.options && locale.options.firstWeekContainsDate;
+  var defaultFirstWeekContainsDate = localeFirstWeekContainsDate == null ? 1 : toInteger(localeFirstWeekContainsDate);
+  var firstWeekContainsDate = options.firstWeekContainsDate == null ? defaultFirstWeekContainsDate : toInteger(options.firstWeekContainsDate);
+  var year = getUTCWeekYear(dirtyDate, dirtyOptions);
+  var firstWeek = new Date(0);
+  firstWeek.setUTCFullYear(year, 0, firstWeekContainsDate);
+  firstWeek.setUTCHours(0, 0, 0, 0);
+  var date = startOfUTCWeek(firstWeek, dirtyOptions);
+  return date;
+}
+
+var MILLISECONDS_IN_WEEK = 604800000; // This function will be a part of public API when UTC function will be implemented.
+// See issue: https://github.com/date-fns/date-fns/issues/376
+
+function getUTCWeek(dirtyDate, options) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  var diff = startOfUTCWeek(date, options).getTime() - startOfUTCWeekYear(date, options).getTime(); // Round the number of days to the nearest integer
+  // because the number of milliseconds in a week is not constant
+  // (e.g. it's different in the week of the daylight saving time clock shift)
+
+  return Math.round(diff / MILLISECONDS_IN_WEEK) + 1;
+}
+
+function addLeadingZeros(number, targetLength) {
+  var sign = number < 0 ? '-' : '';
+  var output = Math.abs(number).toString();
+
+  while (output.length < targetLength) {
+    output = '0' + output;
+  }
+
+  return sign + output;
+}
+
+/*
+ * |     | Unit                           |     | Unit                           |
+ * |-----|--------------------------------|-----|--------------------------------|
+ * |  a  | AM, PM                         |  A* |                                |
+ * |  d  | Day of month                   |  D  |                                |
+ * |  h  | Hour [1-12]                    |  H  | Hour [0-23]                    |
+ * |  m  | Minute                         |  M  | Month                          |
+ * |  s  | Second                         |  S  | Fraction of second             |
+ * |  y  | Year (abs)                     |  Y  |                                |
+ *
+ * Letters marked by * are not implemented but reserved by Unicode standard.
+ */
+
+var formatters$1 = {
+  // Year
+  y: function (date, token) {
+    // From http://www.unicode.org/reports/tr35/tr35-31/tr35-dates.html#Date_Format_tokens
+    // | Year     |     y | yy |   yyy |  yyyy | yyyyy |
+    // |----------|-------|----|-------|-------|-------|
+    // | AD 1     |     1 | 01 |   001 |  0001 | 00001 |
+    // | AD 12    |    12 | 12 |   012 |  0012 | 00012 |
+    // | AD 123   |   123 | 23 |   123 |  0123 | 00123 |
+    // | AD 1234  |  1234 | 34 |  1234 |  1234 | 01234 |
+    // | AD 12345 | 12345 | 45 | 12345 | 12345 | 12345 |
+    var signedYear = date.getUTCFullYear(); // Returns 1 for 1 BC (which is year 0 in JavaScript)
+
+    var year = signedYear > 0 ? signedYear : 1 - signedYear;
+    return addLeadingZeros(token === 'yy' ? year % 100 : year, token.length);
+  },
+  // Month
+  M: function (date, token) {
+    var month = date.getUTCMonth();
+    return token === 'M' ? String(month + 1) : addLeadingZeros(month + 1, 2);
+  },
+  // Day of the month
+  d: function (date, token) {
+    return addLeadingZeros(date.getUTCDate(), token.length);
+  },
+  // AM or PM
+  a: function (date, token) {
+    var dayPeriodEnumValue = date.getUTCHours() / 12 >= 1 ? 'pm' : 'am';
+
+    switch (token) {
+      case 'a':
+      case 'aa':
+        return dayPeriodEnumValue.toUpperCase();
+
+      case 'aaa':
+        return dayPeriodEnumValue;
+
+      case 'aaaaa':
+        return dayPeriodEnumValue[0];
+
+      case 'aaaa':
+      default:
+        return dayPeriodEnumValue === 'am' ? 'a.m.' : 'p.m.';
+    }
+  },
+  // Hour [1-12]
+  h: function (date, token) {
+    return addLeadingZeros(date.getUTCHours() % 12 || 12, token.length);
+  },
+  // Hour [0-23]
+  H: function (date, token) {
+    return addLeadingZeros(date.getUTCHours(), token.length);
+  },
+  // Minute
+  m: function (date, token) {
+    return addLeadingZeros(date.getUTCMinutes(), token.length);
+  },
+  // Second
+  s: function (date, token) {
+    return addLeadingZeros(date.getUTCSeconds(), token.length);
+  },
+  // Fraction of second
+  S: function (date, token) {
+    var numberOfDigits = token.length;
+    var milliseconds = date.getUTCMilliseconds();
+    var fractionalSeconds = Math.floor(milliseconds * Math.pow(10, numberOfDigits - 3));
+    return addLeadingZeros(fractionalSeconds, token.length);
+  }
+};
+
+var dayPeriodEnum = {
+  am: 'am',
+  pm: 'pm',
+  midnight: 'midnight',
+  noon: 'noon',
+  morning: 'morning',
+  afternoon: 'afternoon',
+  evening: 'evening',
+  night: 'night'
+};
+/*
+ * |     | Unit                           |     | Unit                           |
+ * |-----|--------------------------------|-----|--------------------------------|
+ * |  a  | AM, PM                         |  A* | Milliseconds in day            |
+ * |  b  | AM, PM, noon, midnight         |  B  | Flexible day period            |
+ * |  c  | Stand-alone local day of week  |  C* | Localized hour w/ day period   |
+ * |  d  | Day of month                   |  D  | Day of year                    |
+ * |  e  | Local day of week              |  E  | Day of week                    |
+ * |  f  |                                |  F* | Day of week in month           |
+ * |  g* | Modified Julian day            |  G  | Era                            |
+ * |  h  | Hour [1-12]                    |  H  | Hour [0-23]                    |
+ * |  i! | ISO day of week                |  I! | ISO week of year               |
+ * |  j* | Localized hour w/ day period   |  J* | Localized hour w/o day period  |
+ * |  k  | Hour [1-24]                    |  K  | Hour [0-11]                    |
+ * |  l* | (deprecated)                   |  L  | Stand-alone month              |
+ * |  m  | Minute                         |  M  | Month                          |
+ * |  n  |                                |  N  |                                |
+ * |  o! | Ordinal number modifier        |  O  | Timezone (GMT)                 |
+ * |  p! | Long localized time            |  P! | Long localized date            |
+ * |  q  | Stand-alone quarter            |  Q  | Quarter                        |
+ * |  r* | Related Gregorian year         |  R! | ISO week-numbering year        |
+ * |  s  | Second                         |  S  | Fraction of second             |
+ * |  t! | Seconds timestamp              |  T! | Milliseconds timestamp         |
+ * |  u  | Extended year                  |  U* | Cyclic year                    |
+ * |  v* | Timezone (generic non-locat.)  |  V* | Timezone (location)            |
+ * |  w  | Local week of year             |  W* | Week of month                  |
+ * |  x  | Timezone (ISO-8601 w/o Z)      |  X  | Timezone (ISO-8601)            |
+ * |  y  | Year (abs)                     |  Y  | Local week-numbering year      |
+ * |  z  | Timezone (specific non-locat.) |  Z* | Timezone (aliases)             |
+ *
+ * Letters marked by * are not implemented but reserved by Unicode standard.
+ *
+ * Letters marked by ! are non-standard, but implemented by date-fns:
+ * - `o` modifies the previous token to turn it into an ordinal (see `format` docs)
+ * - `i` is ISO day of week. For `i` and `ii` is returns numeric ISO week days,
+ *   i.e. 7 for Sunday, 1 for Monday, etc.
+ * - `I` is ISO week of year, as opposed to `w` which is local week of year.
+ * - `R` is ISO week-numbering year, as opposed to `Y` which is local week-numbering year.
+ *   `R` is supposed to be used in conjunction with `I` and `i`
+ *   for universal ISO week-numbering date, whereas
+ *   `Y` is supposed to be used in conjunction with `w` and `e`
+ *   for week-numbering date specific to the locale.
+ * - `P` is long localized date format
+ * - `p` is long localized time format
+ */
+
+var formatters = {
+  // Era
+  G: function (date, token, localize) {
+    var era = date.getUTCFullYear() > 0 ? 1 : 0;
+
+    switch (token) {
+      // AD, BC
+      case 'G':
+      case 'GG':
+      case 'GGG':
+        return localize.era(era, {
+          width: 'abbreviated'
+        });
+      // A, B
+
+      case 'GGGGG':
+        return localize.era(era, {
+          width: 'narrow'
+        });
+      // Anno Domini, Before Christ
+
+      case 'GGGG':
+      default:
+        return localize.era(era, {
+          width: 'wide'
+        });
+    }
+  },
+  // Year
+  y: function (date, token, localize) {
+    // Ordinal number
+    if (token === 'yo') {
+      var signedYear = date.getUTCFullYear(); // Returns 1 for 1 BC (which is year 0 in JavaScript)
+
+      var year = signedYear > 0 ? signedYear : 1 - signedYear;
+      return localize.ordinalNumber(year, {
+        unit: 'year'
+      });
+    }
+
+    return formatters$1.y(date, token);
+  },
+  // Local week-numbering year
+  Y: function (date, token, localize, options) {
+    var signedWeekYear = getUTCWeekYear(date, options); // Returns 1 for 1 BC (which is year 0 in JavaScript)
+
+    var weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear; // Two digit year
+
+    if (token === 'YY') {
+      var twoDigitYear = weekYear % 100;
+      return addLeadingZeros(twoDigitYear, 2);
+    } // Ordinal number
+
+
+    if (token === 'Yo') {
+      return localize.ordinalNumber(weekYear, {
+        unit: 'year'
+      });
+    } // Padding
+
+
+    return addLeadingZeros(weekYear, token.length);
+  },
+  // ISO week-numbering year
+  R: function (date, token) {
+    var isoWeekYear = getUTCISOWeekYear(date); // Padding
+
+    return addLeadingZeros(isoWeekYear, token.length);
+  },
+  // Extended year. This is a single number designating the year of this calendar system.
+  // The main difference between `y` and `u` localizers are B.C. years:
+  // | Year | `y` | `u` |
+  // |------|-----|-----|
+  // | AC 1 |   1 |   1 |
+  // | BC 1 |   1 |   0 |
+  // | BC 2 |   2 |  -1 |
+  // Also `yy` always returns the last two digits of a year,
+  // while `uu` pads single digit years to 2 characters and returns other years unchanged.
+  u: function (date, token) {
+    var year = date.getUTCFullYear();
+    return addLeadingZeros(year, token.length);
+  },
+  // Quarter
+  Q: function (date, token, localize) {
+    var quarter = Math.ceil((date.getUTCMonth() + 1) / 3);
+
+    switch (token) {
+      // 1, 2, 3, 4
+      case 'Q':
+        return String(quarter);
+      // 01, 02, 03, 04
+
+      case 'QQ':
+        return addLeadingZeros(quarter, 2);
+      // 1st, 2nd, 3rd, 4th
+
+      case 'Qo':
+        return localize.ordinalNumber(quarter, {
+          unit: 'quarter'
+        });
+      // Q1, Q2, Q3, Q4
+
+      case 'QQQ':
+        return localize.quarter(quarter, {
+          width: 'abbreviated',
+          context: 'formatting'
+        });
+      // 1, 2, 3, 4 (narrow quarter; could be not numerical)
+
+      case 'QQQQQ':
+        return localize.quarter(quarter, {
+          width: 'narrow',
+          context: 'formatting'
+        });
+      // 1st quarter, 2nd quarter, ...
+
+      case 'QQQQ':
+      default:
+        return localize.quarter(quarter, {
+          width: 'wide',
+          context: 'formatting'
+        });
+    }
+  },
+  // Stand-alone quarter
+  q: function (date, token, localize) {
+    var quarter = Math.ceil((date.getUTCMonth() + 1) / 3);
+
+    switch (token) {
+      // 1, 2, 3, 4
+      case 'q':
+        return String(quarter);
+      // 01, 02, 03, 04
+
+      case 'qq':
+        return addLeadingZeros(quarter, 2);
+      // 1st, 2nd, 3rd, 4th
+
+      case 'qo':
+        return localize.ordinalNumber(quarter, {
+          unit: 'quarter'
+        });
+      // Q1, Q2, Q3, Q4
+
+      case 'qqq':
+        return localize.quarter(quarter, {
+          width: 'abbreviated',
+          context: 'standalone'
+        });
+      // 1, 2, 3, 4 (narrow quarter; could be not numerical)
+
+      case 'qqqqq':
+        return localize.quarter(quarter, {
+          width: 'narrow',
+          context: 'standalone'
+        });
+      // 1st quarter, 2nd quarter, ...
+
+      case 'qqqq':
+      default:
+        return localize.quarter(quarter, {
+          width: 'wide',
+          context: 'standalone'
+        });
+    }
+  },
+  // Month
+  M: function (date, token, localize) {
+    var month = date.getUTCMonth();
+
+    switch (token) {
+      case 'M':
+      case 'MM':
+        return formatters$1.M(date, token);
+      // 1st, 2nd, ..., 12th
+
+      case 'Mo':
+        return localize.ordinalNumber(month + 1, {
+          unit: 'month'
+        });
+      // Jan, Feb, ..., Dec
+
+      case 'MMM':
+        return localize.month(month, {
+          width: 'abbreviated',
+          context: 'formatting'
+        });
+      // J, F, ..., D
+
+      case 'MMMMM':
+        return localize.month(month, {
+          width: 'narrow',
+          context: 'formatting'
+        });
+      // January, February, ..., December
+
+      case 'MMMM':
+      default:
+        return localize.month(month, {
+          width: 'wide',
+          context: 'formatting'
+        });
+    }
+  },
+  // Stand-alone month
+  L: function (date, token, localize) {
+    var month = date.getUTCMonth();
+
+    switch (token) {
+      // 1, 2, ..., 12
+      case 'L':
+        return String(month + 1);
+      // 01, 02, ..., 12
+
+      case 'LL':
+        return addLeadingZeros(month + 1, 2);
+      // 1st, 2nd, ..., 12th
+
+      case 'Lo':
+        return localize.ordinalNumber(month + 1, {
+          unit: 'month'
+        });
+      // Jan, Feb, ..., Dec
+
+      case 'LLL':
+        return localize.month(month, {
+          width: 'abbreviated',
+          context: 'standalone'
+        });
+      // J, F, ..., D
+
+      case 'LLLLL':
+        return localize.month(month, {
+          width: 'narrow',
+          context: 'standalone'
+        });
+      // January, February, ..., December
+
+      case 'LLLL':
+      default:
+        return localize.month(month, {
+          width: 'wide',
+          context: 'standalone'
+        });
+    }
+  },
+  // Local week of year
+  w: function (date, token, localize, options) {
+    var week = getUTCWeek(date, options);
+
+    if (token === 'wo') {
+      return localize.ordinalNumber(week, {
+        unit: 'week'
+      });
+    }
+
+    return addLeadingZeros(week, token.length);
+  },
+  // ISO week of year
+  I: function (date, token, localize) {
+    var isoWeek = getUTCISOWeek(date);
+
+    if (token === 'Io') {
+      return localize.ordinalNumber(isoWeek, {
+        unit: 'week'
+      });
+    }
+
+    return addLeadingZeros(isoWeek, token.length);
+  },
+  // Day of the month
+  d: function (date, token, localize) {
+    if (token === 'do') {
+      return localize.ordinalNumber(date.getUTCDate(), {
+        unit: 'date'
+      });
+    }
+
+    return formatters$1.d(date, token);
+  },
+  // Day of year
+  D: function (date, token, localize) {
+    var dayOfYear = getUTCDayOfYear(date);
+
+    if (token === 'Do') {
+      return localize.ordinalNumber(dayOfYear, {
+        unit: 'dayOfYear'
+      });
+    }
+
+    return addLeadingZeros(dayOfYear, token.length);
+  },
+  // Day of week
+  E: function (date, token, localize) {
+    var dayOfWeek = date.getUTCDay();
+
+    switch (token) {
+      // Tue
+      case 'E':
+      case 'EE':
+      case 'EEE':
+        return localize.day(dayOfWeek, {
+          width: 'abbreviated',
+          context: 'formatting'
+        });
+      // T
+
+      case 'EEEEE':
+        return localize.day(dayOfWeek, {
+          width: 'narrow',
+          context: 'formatting'
+        });
+      // Tu
+
+      case 'EEEEEE':
+        return localize.day(dayOfWeek, {
+          width: 'short',
+          context: 'formatting'
+        });
+      // Tuesday
+
+      case 'EEEE':
+      default:
+        return localize.day(dayOfWeek, {
+          width: 'wide',
+          context: 'formatting'
+        });
+    }
+  },
+  // Local day of week
+  e: function (date, token, localize, options) {
+    var dayOfWeek = date.getUTCDay();
+    var localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
+
+    switch (token) {
+      // Numerical value (Nth day of week with current locale or weekStartsOn)
+      case 'e':
+        return String(localDayOfWeek);
+      // Padded numerical value
+
+      case 'ee':
+        return addLeadingZeros(localDayOfWeek, 2);
+      // 1st, 2nd, ..., 7th
+
+      case 'eo':
+        return localize.ordinalNumber(localDayOfWeek, {
+          unit: 'day'
+        });
+
+      case 'eee':
+        return localize.day(dayOfWeek, {
+          width: 'abbreviated',
+          context: 'formatting'
+        });
+      // T
+
+      case 'eeeee':
+        return localize.day(dayOfWeek, {
+          width: 'narrow',
+          context: 'formatting'
+        });
+      // Tu
+
+      case 'eeeeee':
+        return localize.day(dayOfWeek, {
+          width: 'short',
+          context: 'formatting'
+        });
+      // Tuesday
+
+      case 'eeee':
+      default:
+        return localize.day(dayOfWeek, {
+          width: 'wide',
+          context: 'formatting'
+        });
+    }
+  },
+  // Stand-alone local day of week
+  c: function (date, token, localize, options) {
+    var dayOfWeek = date.getUTCDay();
+    var localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
+
+    switch (token) {
+      // Numerical value (same as in `e`)
+      case 'c':
+        return String(localDayOfWeek);
+      // Padded numerical value
+
+      case 'cc':
+        return addLeadingZeros(localDayOfWeek, token.length);
+      // 1st, 2nd, ..., 7th
+
+      case 'co':
+        return localize.ordinalNumber(localDayOfWeek, {
+          unit: 'day'
+        });
+
+      case 'ccc':
+        return localize.day(dayOfWeek, {
+          width: 'abbreviated',
+          context: 'standalone'
+        });
+      // T
+
+      case 'ccccc':
+        return localize.day(dayOfWeek, {
+          width: 'narrow',
+          context: 'standalone'
+        });
+      // Tu
+
+      case 'cccccc':
+        return localize.day(dayOfWeek, {
+          width: 'short',
+          context: 'standalone'
+        });
+      // Tuesday
+
+      case 'cccc':
+      default:
+        return localize.day(dayOfWeek, {
+          width: 'wide',
+          context: 'standalone'
+        });
+    }
+  },
+  // ISO day of week
+  i: function (date, token, localize) {
+    var dayOfWeek = date.getUTCDay();
+    var isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek;
+
+    switch (token) {
+      // 2
+      case 'i':
+        return String(isoDayOfWeek);
+      // 02
+
+      case 'ii':
+        return addLeadingZeros(isoDayOfWeek, token.length);
+      // 2nd
+
+      case 'io':
+        return localize.ordinalNumber(isoDayOfWeek, {
+          unit: 'day'
+        });
+      // Tue
+
+      case 'iii':
+        return localize.day(dayOfWeek, {
+          width: 'abbreviated',
+          context: 'formatting'
+        });
+      // T
+
+      case 'iiiii':
+        return localize.day(dayOfWeek, {
+          width: 'narrow',
+          context: 'formatting'
+        });
+      // Tu
+
+      case 'iiiiii':
+        return localize.day(dayOfWeek, {
+          width: 'short',
+          context: 'formatting'
+        });
+      // Tuesday
+
+      case 'iiii':
+      default:
+        return localize.day(dayOfWeek, {
+          width: 'wide',
+          context: 'formatting'
+        });
+    }
+  },
+  // AM or PM
+  a: function (date, token, localize) {
+    var hours = date.getUTCHours();
+    var dayPeriodEnumValue = hours / 12 >= 1 ? 'pm' : 'am';
+
+    switch (token) {
+      case 'a':
+      case 'aa':
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: 'abbreviated',
+          context: 'formatting'
+        });
+
+      case 'aaa':
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: 'abbreviated',
+          context: 'formatting'
+        }).toLowerCase();
+
+      case 'aaaaa':
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: 'narrow',
+          context: 'formatting'
+        });
+
+      case 'aaaa':
+      default:
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: 'wide',
+          context: 'formatting'
+        });
+    }
+  },
+  // AM, PM, midnight, noon
+  b: function (date, token, localize) {
+    var hours = date.getUTCHours();
+    var dayPeriodEnumValue;
+
+    if (hours === 12) {
+      dayPeriodEnumValue = dayPeriodEnum.noon;
+    } else if (hours === 0) {
+      dayPeriodEnumValue = dayPeriodEnum.midnight;
+    } else {
+      dayPeriodEnumValue = hours / 12 >= 1 ? 'pm' : 'am';
+    }
+
+    switch (token) {
+      case 'b':
+      case 'bb':
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: 'abbreviated',
+          context: 'formatting'
+        });
+
+      case 'bbb':
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: 'abbreviated',
+          context: 'formatting'
+        }).toLowerCase();
+
+      case 'bbbbb':
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: 'narrow',
+          context: 'formatting'
+        });
+
+      case 'bbbb':
+      default:
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: 'wide',
+          context: 'formatting'
+        });
+    }
+  },
+  // in the morning, in the afternoon, in the evening, at night
+  B: function (date, token, localize) {
+    var hours = date.getUTCHours();
+    var dayPeriodEnumValue;
+
+    if (hours >= 17) {
+      dayPeriodEnumValue = dayPeriodEnum.evening;
+    } else if (hours >= 12) {
+      dayPeriodEnumValue = dayPeriodEnum.afternoon;
+    } else if (hours >= 4) {
+      dayPeriodEnumValue = dayPeriodEnum.morning;
+    } else {
+      dayPeriodEnumValue = dayPeriodEnum.night;
+    }
+
+    switch (token) {
+      case 'B':
+      case 'BB':
+      case 'BBB':
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: 'abbreviated',
+          context: 'formatting'
+        });
+
+      case 'BBBBB':
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: 'narrow',
+          context: 'formatting'
+        });
+
+      case 'BBBB':
+      default:
+        return localize.dayPeriod(dayPeriodEnumValue, {
+          width: 'wide',
+          context: 'formatting'
+        });
+    }
+  },
+  // Hour [1-12]
+  h: function (date, token, localize) {
+    if (token === 'ho') {
+      var hours = date.getUTCHours() % 12;
+      if (hours === 0) hours = 12;
+      return localize.ordinalNumber(hours, {
+        unit: 'hour'
+      });
+    }
+
+    return formatters$1.h(date, token);
+  },
+  // Hour [0-23]
+  H: function (date, token, localize) {
+    if (token === 'Ho') {
+      return localize.ordinalNumber(date.getUTCHours(), {
+        unit: 'hour'
+      });
+    }
+
+    return formatters$1.H(date, token);
+  },
+  // Hour [0-11]
+  K: function (date, token, localize) {
+    var hours = date.getUTCHours() % 12;
+
+    if (token === 'Ko') {
+      return localize.ordinalNumber(hours, {
+        unit: 'hour'
+      });
+    }
+
+    return addLeadingZeros(hours, token.length);
+  },
+  // Hour [1-24]
+  k: function (date, token, localize) {
+    var hours = date.getUTCHours();
+    if (hours === 0) hours = 24;
+
+    if (token === 'ko') {
+      return localize.ordinalNumber(hours, {
+        unit: 'hour'
+      });
+    }
+
+    return addLeadingZeros(hours, token.length);
+  },
+  // Minute
+  m: function (date, token, localize) {
+    if (token === 'mo') {
+      return localize.ordinalNumber(date.getUTCMinutes(), {
+        unit: 'minute'
+      });
+    }
+
+    return formatters$1.m(date, token);
+  },
+  // Second
+  s: function (date, token, localize) {
+    if (token === 'so') {
+      return localize.ordinalNumber(date.getUTCSeconds(), {
+        unit: 'second'
+      });
+    }
+
+    return formatters$1.s(date, token);
+  },
+  // Fraction of second
+  S: function (date, token) {
+    return formatters$1.S(date, token);
+  },
+  // Timezone (ISO-8601. If offset is 0, output is always `'Z'`)
+  X: function (date, token, _localize, options) {
+    var originalDate = options._originalDate || date;
+    var timezoneOffset = originalDate.getTimezoneOffset();
+
+    if (timezoneOffset === 0) {
+      return 'Z';
+    }
+
+    switch (token) {
+      // Hours and optional minutes
+      case 'X':
+        return formatTimezoneWithOptionalMinutes(timezoneOffset);
+      // Hours, minutes and optional seconds without `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `XX`
+
+      case 'XXXX':
+      case 'XX':
+        // Hours and minutes without `:` delimiter
+        return formatTimezone(timezoneOffset);
+      // Hours, minutes and optional seconds with `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `XXX`
+
+      case 'XXXXX':
+      case 'XXX': // Hours and minutes with `:` delimiter
+
+      default:
+        return formatTimezone(timezoneOffset, ':');
+    }
+  },
+  // Timezone (ISO-8601. If offset is 0, output is `'+00:00'` or equivalent)
+  x: function (date, token, _localize, options) {
+    var originalDate = options._originalDate || date;
+    var timezoneOffset = originalDate.getTimezoneOffset();
+
+    switch (token) {
+      // Hours and optional minutes
+      case 'x':
+        return formatTimezoneWithOptionalMinutes(timezoneOffset);
+      // Hours, minutes and optional seconds without `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `xx`
+
+      case 'xxxx':
+      case 'xx':
+        // Hours and minutes without `:` delimiter
+        return formatTimezone(timezoneOffset);
+      // Hours, minutes and optional seconds with `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `xxx`
+
+      case 'xxxxx':
+      case 'xxx': // Hours and minutes with `:` delimiter
+
+      default:
+        return formatTimezone(timezoneOffset, ':');
+    }
+  },
+  // Timezone (GMT)
+  O: function (date, token, _localize, options) {
+    var originalDate = options._originalDate || date;
+    var timezoneOffset = originalDate.getTimezoneOffset();
+
+    switch (token) {
+      // Short
+      case 'O':
+      case 'OO':
+      case 'OOO':
+        return 'GMT' + formatTimezoneShort(timezoneOffset, ':');
+      // Long
+
+      case 'OOOO':
+      default:
+        return 'GMT' + formatTimezone(timezoneOffset, ':');
+    }
+  },
+  // Timezone (specific non-location)
+  z: function (date, token, _localize, options) {
+    var originalDate = options._originalDate || date;
+    var timezoneOffset = originalDate.getTimezoneOffset();
+
+    switch (token) {
+      // Short
+      case 'z':
+      case 'zz':
+      case 'zzz':
+        return 'GMT' + formatTimezoneShort(timezoneOffset, ':');
+      // Long
+
+      case 'zzzz':
+      default:
+        return 'GMT' + formatTimezone(timezoneOffset, ':');
+    }
+  },
+  // Seconds timestamp
+  t: function (date, token, _localize, options) {
+    var originalDate = options._originalDate || date;
+    var timestamp = Math.floor(originalDate.getTime() / 1000);
+    return addLeadingZeros(timestamp, token.length);
+  },
+  // Milliseconds timestamp
+  T: function (date, token, _localize, options) {
+    var originalDate = options._originalDate || date;
+    var timestamp = originalDate.getTime();
+    return addLeadingZeros(timestamp, token.length);
+  }
+};
+
+function formatTimezoneShort(offset, dirtyDelimiter) {
+  var sign = offset > 0 ? '-' : '+';
+  var absOffset = Math.abs(offset);
+  var hours = Math.floor(absOffset / 60);
+  var minutes = absOffset % 60;
+
+  if (minutes === 0) {
+    return sign + String(hours);
+  }
+
+  var delimiter = dirtyDelimiter || '';
+  return sign + String(hours) + delimiter + addLeadingZeros(minutes, 2);
+}
+
+function formatTimezoneWithOptionalMinutes(offset, dirtyDelimiter) {
+  if (offset % 60 === 0) {
+    var sign = offset > 0 ? '-' : '+';
+    return sign + addLeadingZeros(Math.abs(offset) / 60, 2);
+  }
+
+  return formatTimezone(offset, dirtyDelimiter);
+}
+
+function formatTimezone(offset, dirtyDelimiter) {
+  var delimiter = dirtyDelimiter || '';
+  var sign = offset > 0 ? '-' : '+';
+  var absOffset = Math.abs(offset);
+  var hours = addLeadingZeros(Math.floor(absOffset / 60), 2);
+  var minutes = addLeadingZeros(absOffset % 60, 2);
+  return sign + hours + delimiter + minutes;
+}
+
+function dateLongFormatter(pattern, formatLong) {
+  switch (pattern) {
+    case 'P':
+      return formatLong.date({
+        width: 'short'
+      });
+
+    case 'PP':
+      return formatLong.date({
+        width: 'medium'
+      });
+
+    case 'PPP':
+      return formatLong.date({
+        width: 'long'
+      });
+
+    case 'PPPP':
+    default:
+      return formatLong.date({
+        width: 'full'
+      });
+  }
+}
+
+function timeLongFormatter(pattern, formatLong) {
+  switch (pattern) {
+    case 'p':
+      return formatLong.time({
+        width: 'short'
+      });
+
+    case 'pp':
+      return formatLong.time({
+        width: 'medium'
+      });
+
+    case 'ppp':
+      return formatLong.time({
+        width: 'long'
+      });
+
+    case 'pppp':
+    default:
+      return formatLong.time({
+        width: 'full'
+      });
+  }
+}
+
+function dateTimeLongFormatter(pattern, formatLong) {
+  var matchResult = pattern.match(/(P+)(p+)?/) || [];
+  var datePattern = matchResult[1];
+  var timePattern = matchResult[2];
+
+  if (!timePattern) {
+    return dateLongFormatter(pattern, formatLong);
+  }
+
+  var dateTimeFormat;
+
+  switch (datePattern) {
+    case 'P':
+      dateTimeFormat = formatLong.dateTime({
+        width: 'short'
+      });
+      break;
+
+    case 'PP':
+      dateTimeFormat = formatLong.dateTime({
+        width: 'medium'
+      });
+      break;
+
+    case 'PPP':
+      dateTimeFormat = formatLong.dateTime({
+        width: 'long'
+      });
+      break;
+
+    case 'PPPP':
+    default:
+      dateTimeFormat = formatLong.dateTime({
+        width: 'full'
+      });
+      break;
+  }
+
+  return dateTimeFormat.replace('{{date}}', dateLongFormatter(datePattern, formatLong)).replace('{{time}}', timeLongFormatter(timePattern, formatLong));
+}
+
+var longFormatters = {
+  p: timeLongFormatter,
+  P: dateTimeLongFormatter
+};
+
+var protectedDayOfYearTokens = ['D', 'DD'];
+var protectedWeekYearTokens = ['YY', 'YYYY'];
+function isProtectedDayOfYearToken(token) {
+  return protectedDayOfYearTokens.indexOf(token) !== -1;
+}
+function isProtectedWeekYearToken(token) {
+  return protectedWeekYearTokens.indexOf(token) !== -1;
+}
+function throwProtectedError(token, format, input) {
+  if (token === 'YYYY') {
+    throw new RangeError("Use `yyyy` instead of `YYYY` (in `".concat(format, "`) for formatting years to the input `").concat(input, "`; see: https://git.io/fxCyr"));
+  } else if (token === 'YY') {
+    throw new RangeError("Use `yy` instead of `YY` (in `".concat(format, "`) for formatting years to the input `").concat(input, "`; see: https://git.io/fxCyr"));
+  } else if (token === 'D') {
+    throw new RangeError("Use `d` instead of `D` (in `".concat(format, "`) for formatting days of the month to the input `").concat(input, "`; see: https://git.io/fxCyr"));
+  } else if (token === 'DD') {
+    throw new RangeError("Use `dd` instead of `DD` (in `".concat(format, "`) for formatting days of the month to the input `").concat(input, "`; see: https://git.io/fxCyr"));
+  }
+}
+
+// - [yYQqMLwIdDecihHKkms]o matches any available ordinal number token
+//   (one of the certain letters followed by `o`)
+// - (\w)\1* matches any sequences of the same letter
+// - '' matches two quote characters in a row
+// - '(''|[^'])+('|$) matches anything surrounded by two quote characters ('),
+//   except a single quote symbol, which ends the sequence.
+//   Two quote characters do not end the sequence.
+//   If there is no matching single quote
+//   then the sequence will continue until the end of the string.
+// - . matches any single character unmatched by previous parts of the RegExps
+
+var formattingTokensRegExp = /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g; // This RegExp catches symbols escaped by quotes, and also
+// sequences of symbols P, p, and the combinations like `PPPPPPPppppp`
+
+var longFormattingTokensRegExp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
+var escapedStringRegExp = /^'([^]*?)'?$/;
+var doubleQuoteRegExp = /''/g;
+var unescapedLatinCharacterRegExp = /[a-zA-Z]/;
+/**
+ * @name format
+ * @category Common Helpers
+ * @summary Format the date.
+ *
+ * @description
+ * Return the formatted date string in the given format. The result may vary by locale.
+ *
+ * > ⚠️ Please note that the `format` tokens differ from Moment.js and other libraries.
+ * > See: https://git.io/fxCyr
+ *
+ * The characters wrapped between two single quotes characters (') are escaped.
+ * Two single quotes in a row, whether inside or outside a quoted sequence, represent a 'real' single quote.
+ * (see the last example)
+ *
+ * Format of the string is based on Unicode Technical Standard #35:
+ * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
+ * with a few additions (see note 7 below the table).
+ *
+ * Accepted patterns:
+ * | Unit                            | Pattern | Result examples                   | Notes |
+ * |---------------------------------|---------|-----------------------------------|-------|
+ * | Era                             | G..GGG  | AD, BC                            |       |
+ * |                                 | GGGG    | Anno Domini, Before Christ        | 2     |
+ * |                                 | GGGGG   | A, B                              |       |
+ * | Calendar year                   | y       | 44, 1, 1900, 2017                 | 5     |
+ * |                                 | yo      | 44th, 1st, 0th, 17th              | 5,7   |
+ * |                                 | yy      | 44, 01, 00, 17                    | 5     |
+ * |                                 | yyy     | 044, 001, 1900, 2017              | 5     |
+ * |                                 | yyyy    | 0044, 0001, 1900, 2017            | 5     |
+ * |                                 | yyyyy   | ...                               | 3,5   |
+ * | Local week-numbering year       | Y       | 44, 1, 1900, 2017                 | 5     |
+ * |                                 | Yo      | 44th, 1st, 1900th, 2017th         | 5,7   |
+ * |                                 | YY      | 44, 01, 00, 17                    | 5,8   |
+ * |                                 | YYY     | 044, 001, 1900, 2017              | 5     |
+ * |                                 | YYYY    | 0044, 0001, 1900, 2017            | 5,8   |
+ * |                                 | YYYYY   | ...                               | 3,5   |
+ * | ISO week-numbering year         | R       | -43, 0, 1, 1900, 2017             | 5,7   |
+ * |                                 | RR      | -43, 00, 01, 1900, 2017           | 5,7   |
+ * |                                 | RRR     | -043, 000, 001, 1900, 2017        | 5,7   |
+ * |                                 | RRRR    | -0043, 0000, 0001, 1900, 2017     | 5,7   |
+ * |                                 | RRRRR   | ...                               | 3,5,7 |
+ * | Extended year                   | u       | -43, 0, 1, 1900, 2017             | 5     |
+ * |                                 | uu      | -43, 01, 1900, 2017               | 5     |
+ * |                                 | uuu     | -043, 001, 1900, 2017             | 5     |
+ * |                                 | uuuu    | -0043, 0001, 1900, 2017           | 5     |
+ * |                                 | uuuuu   | ...                               | 3,5   |
+ * | Quarter (formatting)            | Q       | 1, 2, 3, 4                        |       |
+ * |                                 | Qo      | 1st, 2nd, 3rd, 4th                | 7     |
+ * |                                 | QQ      | 01, 02, 03, 04                    |       |
+ * |                                 | QQQ     | Q1, Q2, Q3, Q4                    |       |
+ * |                                 | QQQQ    | 1st quarter, 2nd quarter, ...     | 2     |
+ * |                                 | QQQQQ   | 1, 2, 3, 4                        | 4     |
+ * | Quarter (stand-alone)           | q       | 1, 2, 3, 4                        |       |
+ * |                                 | qo      | 1st, 2nd, 3rd, 4th                | 7     |
+ * |                                 | qq      | 01, 02, 03, 04                    |       |
+ * |                                 | qqq     | Q1, Q2, Q3, Q4                    |       |
+ * |                                 | qqqq    | 1st quarter, 2nd quarter, ...     | 2     |
+ * |                                 | qqqqq   | 1, 2, 3, 4                        | 4     |
+ * | Month (formatting)              | M       | 1, 2, ..., 12                     |       |
+ * |                                 | Mo      | 1st, 2nd, ..., 12th               | 7     |
+ * |                                 | MM      | 01, 02, ..., 12                   |       |
+ * |                                 | MMM     | Jan, Feb, ..., Dec                |       |
+ * |                                 | MMMM    | January, February, ..., December  | 2     |
+ * |                                 | MMMMM   | J, F, ..., D                      |       |
+ * | Month (stand-alone)             | L       | 1, 2, ..., 12                     |       |
+ * |                                 | Lo      | 1st, 2nd, ..., 12th               | 7     |
+ * |                                 | LL      | 01, 02, ..., 12                   |       |
+ * |                                 | LLL     | Jan, Feb, ..., Dec                |       |
+ * |                                 | LLLL    | January, February, ..., December  | 2     |
+ * |                                 | LLLLL   | J, F, ..., D                      |       |
+ * | Local week of year              | w       | 1, 2, ..., 53                     |       |
+ * |                                 | wo      | 1st, 2nd, ..., 53th               | 7     |
+ * |                                 | ww      | 01, 02, ..., 53                   |       |
+ * | ISO week of year                | I       | 1, 2, ..., 53                     | 7     |
+ * |                                 | Io      | 1st, 2nd, ..., 53th               | 7     |
+ * |                                 | II      | 01, 02, ..., 53                   | 7     |
+ * | Day of month                    | d       | 1, 2, ..., 31                     |       |
+ * |                                 | do      | 1st, 2nd, ..., 31st               | 7     |
+ * |                                 | dd      | 01, 02, ..., 31                   |       |
+ * | Day of year                     | D       | 1, 2, ..., 365, 366               | 9     |
+ * |                                 | Do      | 1st, 2nd, ..., 365th, 366th       | 7     |
+ * |                                 | DD      | 01, 02, ..., 365, 366             | 9     |
+ * |                                 | DDD     | 001, 002, ..., 365, 366           |       |
+ * |                                 | DDDD    | ...                               | 3     |
+ * | Day of week (formatting)        | E..EEE  | Mon, Tue, Wed, ..., Sun           |       |
+ * |                                 | EEEE    | Monday, Tuesday, ..., Sunday      | 2     |
+ * |                                 | EEEEE   | M, T, W, T, F, S, S               |       |
+ * |                                 | EEEEEE  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
+ * | ISO day of week (formatting)    | i       | 1, 2, 3, ..., 7                   | 7     |
+ * |                                 | io      | 1st, 2nd, ..., 7th                | 7     |
+ * |                                 | ii      | 01, 02, ..., 07                   | 7     |
+ * |                                 | iii     | Mon, Tue, Wed, ..., Sun           | 7     |
+ * |                                 | iiii    | Monday, Tuesday, ..., Sunday      | 2,7   |
+ * |                                 | iiiii   | M, T, W, T, F, S, S               | 7     |
+ * |                                 | iiiiii  | Mo, Tu, We, Th, Fr, Sa, Su        | 7     |
+ * | Local day of week (formatting)  | e       | 2, 3, 4, ..., 1                   |       |
+ * |                                 | eo      | 2nd, 3rd, ..., 1st                | 7     |
+ * |                                 | ee      | 02, 03, ..., 01                   |       |
+ * |                                 | eee     | Mon, Tue, Wed, ..., Sun           |       |
+ * |                                 | eeee    | Monday, Tuesday, ..., Sunday      | 2     |
+ * |                                 | eeeee   | M, T, W, T, F, S, S               |       |
+ * |                                 | eeeeee  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
+ * | Local day of week (stand-alone) | c       | 2, 3, 4, ..., 1                   |       |
+ * |                                 | co      | 2nd, 3rd, ..., 1st                | 7     |
+ * |                                 | cc      | 02, 03, ..., 01                   |       |
+ * |                                 | ccc     | Mon, Tue, Wed, ..., Sun           |       |
+ * |                                 | cccc    | Monday, Tuesday, ..., Sunday      | 2     |
+ * |                                 | ccccc   | M, T, W, T, F, S, S               |       |
+ * |                                 | cccccc  | Mo, Tu, We, Th, Fr, Sa, Su        |       |
+ * | AM, PM                          | a..aa   | AM, PM                            |       |
+ * |                                 | aaa     | am, pm                            |       |
+ * |                                 | aaaa    | a.m., p.m.                        | 2     |
+ * |                                 | aaaaa   | a, p                              |       |
+ * | AM, PM, noon, midnight          | b..bb   | AM, PM, noon, midnight            |       |
+ * |                                 | bbb     | am, pm, noon, midnight            |       |
+ * |                                 | bbbb    | a.m., p.m., noon, midnight        | 2     |
+ * |                                 | bbbbb   | a, p, n, mi                       |       |
+ * | Flexible day period             | B..BBB  | at night, in the morning, ...     |       |
+ * |                                 | BBBB    | at night, in the morning, ...     | 2     |
+ * |                                 | BBBBB   | at night, in the morning, ...     |       |
+ * | Hour [1-12]                     | h       | 1, 2, ..., 11, 12                 |       |
+ * |                                 | ho      | 1st, 2nd, ..., 11th, 12th         | 7     |
+ * |                                 | hh      | 01, 02, ..., 11, 12               |       |
+ * | Hour [0-23]                     | H       | 0, 1, 2, ..., 23                  |       |
+ * |                                 | Ho      | 0th, 1st, 2nd, ..., 23rd          | 7     |
+ * |                                 | HH      | 00, 01, 02, ..., 23               |       |
+ * | Hour [0-11]                     | K       | 1, 2, ..., 11, 0                  |       |
+ * |                                 | Ko      | 1st, 2nd, ..., 11th, 0th          | 7     |
+ * |                                 | KK      | 01, 02, ..., 11, 00               |       |
+ * | Hour [1-24]                     | k       | 24, 1, 2, ..., 23                 |       |
+ * |                                 | ko      | 24th, 1st, 2nd, ..., 23rd         | 7     |
+ * |                                 | kk      | 24, 01, 02, ..., 23               |       |
+ * | Minute                          | m       | 0, 1, ..., 59                     |       |
+ * |                                 | mo      | 0th, 1st, ..., 59th               | 7     |
+ * |                                 | mm      | 00, 01, ..., 59                   |       |
+ * | Second                          | s       | 0, 1, ..., 59                     |       |
+ * |                                 | so      | 0th, 1st, ..., 59th               | 7     |
+ * |                                 | ss      | 00, 01, ..., 59                   |       |
+ * | Fraction of second              | S       | 0, 1, ..., 9                      |       |
+ * |                                 | SS      | 00, 01, ..., 99                   |       |
+ * |                                 | SSS     | 000, 001, ..., 999                |       |
+ * |                                 | SSSS    | ...                               | 3     |
+ * | Timezone (ISO-8601 w/ Z)        | X       | -08, +0530, Z                     |       |
+ * |                                 | XX      | -0800, +0530, Z                   |       |
+ * |                                 | XXX     | -08:00, +05:30, Z                 |       |
+ * |                                 | XXXX    | -0800, +0530, Z, +123456          | 2     |
+ * |                                 | XXXXX   | -08:00, +05:30, Z, +12:34:56      |       |
+ * | Timezone (ISO-8601 w/o Z)       | x       | -08, +0530, +00                   |       |
+ * |                                 | xx      | -0800, +0530, +0000               |       |
+ * |                                 | xxx     | -08:00, +05:30, +00:00            | 2     |
+ * |                                 | xxxx    | -0800, +0530, +0000, +123456      |       |
+ * |                                 | xxxxx   | -08:00, +05:30, +00:00, +12:34:56 |       |
+ * | Timezone (GMT)                  | O...OOO | GMT-8, GMT+5:30, GMT+0            |       |
+ * |                                 | OOOO    | GMT-08:00, GMT+05:30, GMT+00:00   | 2     |
+ * | Timezone (specific non-locat.)  | z...zzz | GMT-8, GMT+5:30, GMT+0            | 6     |
+ * |                                 | zzzz    | GMT-08:00, GMT+05:30, GMT+00:00   | 2,6   |
+ * | Seconds timestamp               | t       | 512969520                         | 7     |
+ * |                                 | tt      | ...                               | 3,7   |
+ * | Milliseconds timestamp          | T       | 512969520900                      | 7     |
+ * |                                 | TT      | ...                               | 3,7   |
+ * | Long localized date             | P       | 04/29/1453                        | 7     |
+ * |                                 | PP      | Apr 29, 1453                      | 7     |
+ * |                                 | PPP     | April 29th, 1453                  | 7     |
+ * |                                 | PPPP    | Friday, April 29th, 1453          | 2,7   |
+ * | Long localized time             | p       | 12:00 AM                          | 7     |
+ * |                                 | pp      | 12:00:00 AM                       | 7     |
+ * |                                 | ppp     | 12:00:00 AM GMT+2                 | 7     |
+ * |                                 | pppp    | 12:00:00 AM GMT+02:00             | 2,7   |
+ * | Combination of date and time    | Pp      | 04/29/1453, 12:00 AM              | 7     |
+ * |                                 | PPpp    | Apr 29, 1453, 12:00:00 AM         | 7     |
+ * |                                 | PPPppp  | April 29th, 1453 at ...           | 7     |
+ * |                                 | PPPPpppp| Friday, April 29th, 1453 at ...   | 2,7   |
+ * Notes:
+ * 1. "Formatting" units (e.g. formatting quarter) in the default en-US locale
+ *    are the same as "stand-alone" units, but are different in some languages.
+ *    "Formatting" units are declined according to the rules of the language
+ *    in the context of a date. "Stand-alone" units are always nominative singular:
+ *
+ *    `format(new Date(2017, 10, 6), 'do LLLL', {locale: cs}) //=> '6. listopad'`
+ *
+ *    `format(new Date(2017, 10, 6), 'do MMMM', {locale: cs}) //=> '6. listopadu'`
+ *
+ * 2. Any sequence of the identical letters is a pattern, unless it is escaped by
+ *    the single quote characters (see below).
+ *    If the sequence is longer than listed in table (e.g. `EEEEEEEEEEE`)
+ *    the output will be the same as default pattern for this unit, usually
+ *    the longest one (in case of ISO weekdays, `EEEE`). Default patterns for units
+ *    are marked with "2" in the last column of the table.
+ *
+ *    `format(new Date(2017, 10, 6), 'MMM') //=> 'Nov'`
+ *
+ *    `format(new Date(2017, 10, 6), 'MMMM') //=> 'November'`
+ *
+ *    `format(new Date(2017, 10, 6), 'MMMMM') //=> 'N'`
+ *
+ *    `format(new Date(2017, 10, 6), 'MMMMMM') //=> 'November'`
+ *
+ *    `format(new Date(2017, 10, 6), 'MMMMMMM') //=> 'November'`
+ *
+ * 3. Some patterns could be unlimited length (such as `yyyyyyyy`).
+ *    The output will be padded with zeros to match the length of the pattern.
+ *
+ *    `format(new Date(2017, 10, 6), 'yyyyyyyy') //=> '00002017'`
+ *
+ * 4. `QQQQQ` and `qqqqq` could be not strictly numerical in some locales.
+ *    These tokens represent the shortest form of the quarter.
+ *
+ * 5. The main difference between `y` and `u` patterns are B.C. years:
+ *
+ *    | Year | `y` | `u` |
+ *    |------|-----|-----|
+ *    | AC 1 |   1 |   1 |
+ *    | BC 1 |   1 |   0 |
+ *    | BC 2 |   2 |  -1 |
+ *
+ *    Also `yy` always returns the last two digits of a year,
+ *    while `uu` pads single digit years to 2 characters and returns other years unchanged:
+ *
+ *    | Year | `yy` | `uu` |
+ *    |------|------|------|
+ *    | 1    |   01 |   01 |
+ *    | 14   |   14 |   14 |
+ *    | 376  |   76 |  376 |
+ *    | 1453 |   53 | 1453 |
+ *
+ *    The same difference is true for local and ISO week-numbering years (`Y` and `R`),
+ *    except local week-numbering years are dependent on `options.weekStartsOn`
+ *    and `options.firstWeekContainsDate` (compare [getISOWeekYear]{@link https://date-fns.org/docs/getISOWeekYear}
+ *    and [getWeekYear]{@link https://date-fns.org/docs/getWeekYear}).
+ *
+ * 6. Specific non-location timezones are currently unavailable in `date-fns`,
+ *    so right now these tokens fall back to GMT timezones.
+ *
+ * 7. These patterns are not in the Unicode Technical Standard #35:
+ *    - `i`: ISO day of week
+ *    - `I`: ISO week of year
+ *    - `R`: ISO week-numbering year
+ *    - `t`: seconds timestamp
+ *    - `T`: milliseconds timestamp
+ *    - `o`: ordinal number modifier
+ *    - `P`: long localized date
+ *    - `p`: long localized time
+ *
+ * 8. `YY` and `YYYY` tokens represent week-numbering years but they are often confused with years.
+ *    You should enable `options.useAdditionalWeekYearTokens` to use them. See: https://git.io/fxCyr
+ *
+ * 9. `D` and `DD` tokens represent days of the year but they are often confused with days of the month.
+ *    You should enable `options.useAdditionalDayOfYearTokens` to use them. See: https://git.io/fxCyr
+ *
+ * ### v2.0.0 breaking changes:
+ *
+ * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
+ *
+ * - The second argument is now required for the sake of explicitness.
+ *
+ *   ```javascript
+ *   // Before v2.0.0
+ *   format(new Date(2016, 0, 1))
+ *
+ *   // v2.0.0 onward
+ *   format(new Date(2016, 0, 1), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx")
+ *   ```
+ *
+ * - New format string API for `format` function
+ *   which is based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).
+ *   See [this post](https://blog.date-fns.org/post/unicode-tokens-in-date-fns-v2-sreatyki91jg) for more details.
+ *
+ * - Characters are now escaped using single quote symbols (`'`) instead of square brackets.
+ *
+ * @param {Date|Number} date - the original date
+ * @param {String} format - the string of tokens
+ * @param {Object} [options] - an object with options.
+ * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}
+ * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday)
+ * @param {Number} [options.firstWeekContainsDate=1] - the day of January, which is
+ * @param {Boolean} [options.useAdditionalWeekYearTokens=false] - if true, allows usage of the week-numbering year tokens `YY` and `YYYY`;
+ *   see: https://git.io/fxCyr
+ * @param {Boolean} [options.useAdditionalDayOfYearTokens=false] - if true, allows usage of the day of year tokens `D` and `DD`;
+ *   see: https://git.io/fxCyr
+ * @returns {String} the formatted date string
+ * @throws {TypeError} 2 arguments required
+ * @throws {RangeError} `date` must not be Invalid Date
+ * @throws {RangeError} `options.locale` must contain `localize` property
+ * @throws {RangeError} `options.locale` must contain `formatLong` property
+ * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6
+ * @throws {RangeError} `options.firstWeekContainsDate` must be between 1 and 7
+ * @throws {RangeError} use `yyyy` instead of `YYYY` for formatting years using [format provided] to the input [input provided]; see: https://git.io/fxCyr
+ * @throws {RangeError} use `yy` instead of `YY` for formatting years using [format provided] to the input [input provided]; see: https://git.io/fxCyr
+ * @throws {RangeError} use `d` instead of `D` for formatting days of the month using [format provided] to the input [input provided]; see: https://git.io/fxCyr
+ * @throws {RangeError} use `dd` instead of `DD` for formatting days of the month using [format provided] to the input [input provided]; see: https://git.io/fxCyr
+ * @throws {RangeError} format string contains an unescaped latin alphabet character
+ *
+ * @example
+ * // Represent 11 February 2014 in middle-endian format:
+ * var result = format(new Date(2014, 1, 11), 'MM/dd/yyyy')
+ * //=> '02/11/2014'
+ *
+ * @example
+ * // Represent 2 July 2014 in Esperanto:
+ * import { eoLocale } from 'date-fns/locale/eo'
+ * var result = format(new Date(2014, 6, 2), "do 'de' MMMM yyyy", {
+ *   locale: eoLocale
+ * })
+ * //=> '2-a de julio 2014'
+ *
+ * @example
+ * // Escape string by single quote characters:
+ * var result = format(new Date(2014, 6, 2, 15), "h 'o''clock'")
+ * //=> "3 o'clock"
+ */
+
+function format(dirtyDate, dirtyFormatStr, dirtyOptions) {
+  requiredArgs(2, arguments);
+  var formatStr = String(dirtyFormatStr);
+  var options = dirtyOptions || {};
+  var locale = options.locale || locale$1;
+  var localeFirstWeekContainsDate = locale.options && locale.options.firstWeekContainsDate;
+  var defaultFirstWeekContainsDate = localeFirstWeekContainsDate == null ? 1 : toInteger(localeFirstWeekContainsDate);
+  var firstWeekContainsDate = options.firstWeekContainsDate == null ? defaultFirstWeekContainsDate : toInteger(options.firstWeekContainsDate); // Test if weekStartsOn is between 1 and 7 _and_ is not NaN
+
+  if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) {
+    throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively');
+  }
+
+  var localeWeekStartsOn = locale.options && locale.options.weekStartsOn;
+  var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : toInteger(localeWeekStartsOn);
+  var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN
+
+  if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
+    throw new RangeError('weekStartsOn must be between 0 and 6 inclusively');
+  }
+
+  if (!locale.localize) {
+    throw new RangeError('locale must contain localize property');
+  }
+
+  if (!locale.formatLong) {
+    throw new RangeError('locale must contain formatLong property');
+  }
+
+  var originalDate = toDate(dirtyDate);
+
+  if (!isValid(originalDate)) {
+    throw new RangeError('Invalid time value');
+  } // Convert the date in system timezone to the same date in UTC+00:00 timezone.
+  // This ensures that when UTC functions will be implemented, locales will be compatible with them.
+  // See an issue about UTC functions: https://github.com/date-fns/date-fns/issues/376
+
+
+  var timezoneOffset = getTimezoneOffsetInMilliseconds(originalDate);
+  var utcDate = subMilliseconds(originalDate, timezoneOffset);
+  var formatterOptions = {
+    firstWeekContainsDate: firstWeekContainsDate,
+    weekStartsOn: weekStartsOn,
+    locale: locale,
+    _originalDate: originalDate
+  };
+  var result = formatStr.match(longFormattingTokensRegExp).map(function (substring) {
+    var firstCharacter = substring[0];
+
+    if (firstCharacter === 'p' || firstCharacter === 'P') {
+      var longFormatter = longFormatters[firstCharacter];
+      return longFormatter(substring, locale.formatLong, formatterOptions);
+    }
+
+    return substring;
+  }).join('').match(formattingTokensRegExp).map(function (substring) {
+    // Replace two single quote characters with one single quote character
+    if (substring === "''") {
+      return "'";
+    }
+
+    var firstCharacter = substring[0];
+
+    if (firstCharacter === "'") {
+      return cleanEscapedString(substring);
+    }
+
+    var formatter = formatters[firstCharacter];
+
+    if (formatter) {
+      if (!options.useAdditionalWeekYearTokens && isProtectedWeekYearToken(substring)) {
+        throwProtectedError(substring, dirtyFormatStr, dirtyDate);
+      }
+
+      if (!options.useAdditionalDayOfYearTokens && isProtectedDayOfYearToken(substring)) {
+        throwProtectedError(substring, dirtyFormatStr, dirtyDate);
+      }
+
+      return formatter(utcDate, substring, locale.localize, formatterOptions);
+    }
+
+    if (firstCharacter.match(unescapedLatinCharacterRegExp)) {
+      throw new RangeError('Format string contains an unescaped latin alphabet character `' + firstCharacter + '`');
+    }
+
+    return substring;
+  }).join('');
+  return result;
+}
+
+function cleanEscapedString(input) {
+  return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
+}
+
+/**
+ * @name isBefore
+ * @category Common Helpers
+ * @summary Is the first date before the second one?
+ *
+ * @description
+ * Is the first date before the second one?
+ *
+ * ### v2.0.0 breaking changes:
+ *
+ * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
+ *
+ * @param {Date|Number} date - the date that should be before the other one to return true
+ * @param {Date|Number} dateToCompare - the date to compare with
+ * @returns {Boolean} the first date is before the second date
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Is 10 July 1989 before 11 February 1987?
+ * var result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
+ * //=> false
+ */
+
+function isBefore(dirtyDate, dirtyDateToCompare) {
+  requiredArgs(2, arguments);
+  var date = toDate(dirtyDate);
+  var dateToCompare = toDate(dirtyDateToCompare);
+  return date.getTime() < dateToCompare.getTime();
+}
+
+/**
+ * @name isEqual
+ * @category Common Helpers
+ * @summary Are the given dates equal?
+ *
+ * @description
+ * Are the given dates equal?
+ *
+ * ### v2.0.0 breaking changes:
+ *
+ * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
+ *
+ * @param {Date|Number} dateLeft - the first date to compare
+ * @param {Date|Number} dateRight - the second date to compare
+ * @returns {Boolean} the dates are equal
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal?
+ * var result = isEqual(
+ *   new Date(2014, 6, 2, 6, 30, 45, 0),
+ *   new Date(2014, 6, 2, 6, 30, 45, 500)
+ * )
+ * //=> false
+ */
+
+function isEqual(dirtyLeftDate, dirtyRightDate) {
+  requiredArgs(2, arguments);
+  var dateLeft = toDate(dirtyLeftDate);
+  var dateRight = toDate(dirtyRightDate);
+  return dateLeft.getTime() === dateRight.getTime();
+}
+
+var formatDistanceLocale = {
+  lessThanXSeconds: {
+    standalone: {
+      one: 'weniger als 1 Sekunde',
+      other: 'weniger als {{count}} Sekunden'
+    },
+    withPreposition: {
+      one: 'weniger als 1 Sekunde',
+      other: 'weniger als {{count}} Sekunden'
+    }
+  },
+  xSeconds: {
+    standalone: {
+      one: '1 Sekunde',
+      other: '{{count}} Sekunden'
+    },
+    withPreposition: {
+      one: '1 Sekunde',
+      other: '{{count}} Sekunden'
+    }
+  },
+  halfAMinute: {
+    standalone: 'halbe Minute',
+    withPreposition: 'halben Minute'
+  },
+  lessThanXMinutes: {
+    standalone: {
+      one: 'weniger als 1 Minute',
+      other: 'weniger als {{count}} Minuten'
+    },
+    withPreposition: {
+      one: 'weniger als 1 Minute',
+      other: 'weniger als {{count}} Minuten'
+    }
+  },
+  xMinutes: {
+    standalone: {
+      one: '1 Minute',
+      other: '{{count}} Minuten'
+    },
+    withPreposition: {
+      one: '1 Minute',
+      other: '{{count}} Minuten'
+    }
+  },
+  aboutXHours: {
+    standalone: {
+      one: 'etwa 1 Stunde',
+      other: 'etwa {{count}} Stunden'
+    },
+    withPreposition: {
+      one: 'etwa 1 Stunde',
+      other: 'etwa {{count}} Stunden'
+    }
+  },
+  xHours: {
+    standalone: {
+      one: '1 Stunde',
+      other: '{{count}} Stunden'
+    },
+    withPreposition: {
+      one: '1 Stunde',
+      other: '{{count}} Stunden'
+    }
+  },
+  xDays: {
+    standalone: {
+      one: '1 Tag',
+      other: '{{count}} Tage'
+    },
+    withPreposition: {
+      one: '1 Tag',
+      other: '{{count}} Tagen'
+    }
+  },
+  aboutXWeeks: {
+    standalone: {
+      one: 'etwa 1 Woche',
+      other: 'etwa {{count}} Wochen'
+    },
+    withPreposition: {
+      one: 'etwa 1 Woche',
+      other: 'etwa {{count}} Wochen'
+    }
+  },
+  xWeeks: {
+    standalone: {
+      one: '1 Woche',
+      other: '{{count}} Wochen'
+    },
+    withPreposition: {
+      one: '1 Woche',
+      other: '{{count}} Wochen'
+    }
+  },
+  aboutXMonths: {
+    standalone: {
+      one: 'etwa 1 Monat',
+      other: 'etwa {{count}} Monate'
+    },
+    withPreposition: {
+      one: 'etwa 1 Monat',
+      other: 'etwa {{count}} Monaten'
+    }
+  },
+  xMonths: {
+    standalone: {
+      one: '1 Monat',
+      other: '{{count}} Monate'
+    },
+    withPreposition: {
+      one: '1 Monat',
+      other: '{{count}} Monaten'
+    }
+  },
+  aboutXYears: {
+    standalone: {
+      one: 'etwa 1 Jahr',
+      other: 'etwa {{count}} Jahre'
+    },
+    withPreposition: {
+      one: 'etwa 1 Jahr',
+      other: 'etwa {{count}} Jahren'
+    }
+  },
+  xYears: {
+    standalone: {
+      one: '1 Jahr',
+      other: '{{count}} Jahre'
+    },
+    withPreposition: {
+      one: '1 Jahr',
+      other: '{{count}} Jahren'
+    }
+  },
+  overXYears: {
+    standalone: {
+      one: 'mehr als 1 Jahr',
+      other: 'mehr als {{count}} Jahre'
+    },
+    withPreposition: {
+      one: 'mehr als 1 Jahr',
+      other: 'mehr als {{count}} Jahren'
+    }
+  },
+  almostXYears: {
+    standalone: {
+      one: 'fast 1 Jahr',
+      other: 'fast {{count}} Jahre'
+    },
+    withPreposition: {
+      one: 'fast 1 Jahr',
+      other: 'fast {{count}} Jahren'
+    }
+  }
+};
+
+var formatDistance = function (token, count, options) {
+  var result;
+  var tokenValue = options !== null && options !== void 0 && options.addSuffix ? formatDistanceLocale[token].withPreposition : formatDistanceLocale[token].standalone;
+
+  if (typeof tokenValue === 'string') {
+    result = tokenValue;
+  } else if (count === 1) {
+    result = tokenValue.one;
+  } else {
+    result = tokenValue.other.replace('{{count}}', String(count));
+  }
+
+  if (options !== null && options !== void 0 && options.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
+      return 'in ' + result;
+    } else {
+      return 'vor ' + result;
+    }
+  }
+
+  return result;
+};
+
+var dateFormats = {
+  full: 'EEEE, do MMMM y',
+  // Montag, 7. Januar 2018
+  long: 'do MMMM y',
+  // 7. Januar 2018
+  medium: 'do MMM y',
+  // 7. Jan. 2018
+  short: 'dd.MM.y' // 07.01.2018
+
+};
+var timeFormats = {
+  full: 'HH:mm:ss zzzz',
+  long: 'HH:mm:ss z',
+  medium: 'HH:mm:ss',
+  short: 'HH:mm'
+};
+var dateTimeFormats = {
+  full: "{{date}} 'um' {{time}}",
+  long: "{{date}} 'um' {{time}}",
+  medium: '{{date}} {{time}}',
+  short: '{{date}} {{time}}'
+};
+var formatLong = {
+  date: buildFormatLongFn({
+    formats: dateFormats,
+    defaultWidth: 'full'
+  }),
+  time: buildFormatLongFn({
+    formats: timeFormats,
+    defaultWidth: 'full'
+  }),
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats,
+    defaultWidth: 'full'
+  })
+};
+
+var formatRelativeLocale = {
+  lastWeek: "'letzten' eeee 'um' p",
+  yesterday: "'gestern um' p",
+  today: "'heute um' p",
+  tomorrow: "'morgen um' p",
+  nextWeek: "eeee 'um' p",
+  other: 'P'
+};
+
+var formatRelative = function (token, _date, _baseDate, _options) {
+  return formatRelativeLocale[token];
+};
+
+var eraValues = {
+  narrow: ['v.Chr.', 'n.Chr.'],
+  abbreviated: ['v.Chr.', 'n.Chr.'],
+  wide: ['vor Christus', 'nach Christus']
+};
+var quarterValues = {
+  narrow: ['1', '2', '3', '4'],
+  abbreviated: ['Q1', 'Q2', 'Q3', 'Q4'],
+  wide: ['1. Quartal', '2. Quartal', '3. Quartal', '4. Quartal']
+}; // Note: in German, the names of days of the week and months are capitalized.
+// If you are making a new locale based on this one, check if the same is true for the language you're working on.
+// Generally, formatted dates should look like they are in the middle of a sentence,
+// e.g. in Spanish language the weekdays and months should be in the lowercase.
+
+var monthValues = {
+  narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+  abbreviated: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+  wide: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
+}; // https://st.unicode.org/cldr-apps/v#/de/Gregorian/
+
+var formattingMonthValues = {
+  narrow: monthValues.narrow,
+  abbreviated: ['Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'],
+  wide: monthValues.wide
+};
+var dayValues = {
+  narrow: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
+  short: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+  abbreviated: ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+  wide: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
+}; // https://www.unicode.org/cldr/charts/32/summary/de.html#1881
+
+var dayPeriodValues = {
+  narrow: {
+    am: 'vm.',
+    pm: 'nm.',
+    midnight: 'Mitternacht',
+    noon: 'Mittag',
+    morning: 'Morgen',
+    afternoon: 'Nachm.',
+    evening: 'Abend',
+    night: 'Nacht'
+  },
+  abbreviated: {
+    am: 'vorm.',
+    pm: 'nachm.',
+    midnight: 'Mitternacht',
+    noon: 'Mittag',
+    morning: 'Morgen',
+    afternoon: 'Nachmittag',
+    evening: 'Abend',
+    night: 'Nacht'
+  },
+  wide: {
+    am: 'vormittags',
+    pm: 'nachmittags',
+    midnight: 'Mitternacht',
+    noon: 'Mittag',
+    morning: 'Morgen',
+    afternoon: 'Nachmittag',
+    evening: 'Abend',
+    night: 'Nacht'
+  }
+};
+var formattingDayPeriodValues = {
+  narrow: {
+    am: 'vm.',
+    pm: 'nm.',
+    midnight: 'Mitternacht',
+    noon: 'Mittag',
+    morning: 'morgens',
+    afternoon: 'nachm.',
+    evening: 'abends',
+    night: 'nachts'
+  },
+  abbreviated: {
+    am: 'vorm.',
+    pm: 'nachm.',
+    midnight: 'Mitternacht',
+    noon: 'Mittag',
+    morning: 'morgens',
+    afternoon: 'nachmittags',
+    evening: 'abends',
+    night: 'nachts'
+  },
+  wide: {
+    am: 'vormittags',
+    pm: 'nachmittags',
+    midnight: 'Mitternacht',
+    noon: 'Mittag',
+    morning: 'morgens',
+    afternoon: 'nachmittags',
+    evening: 'abends',
+    night: 'nachts'
+  }
+};
+
+var ordinalNumber = function (dirtyNumber) {
+  var number = Number(dirtyNumber);
+  return number + '.';
+};
+
+var localize = {
+  ordinalNumber: ordinalNumber,
+  era: buildLocalizeFn({
+    values: eraValues,
+    defaultWidth: 'wide'
+  }),
+  quarter: buildLocalizeFn({
+    values: quarterValues,
+    defaultWidth: 'wide',
+    argumentCallback: function (quarter) {
+      return quarter - 1;
+    }
+  }),
+  month: buildLocalizeFn({
+    values: monthValues,
+    formattingValues: formattingMonthValues,
+    defaultWidth: 'wide'
+  }),
+  day: buildLocalizeFn({
+    values: dayValues,
+    defaultWidth: 'wide'
+  }),
+  dayPeriod: buildLocalizeFn({
+    values: dayPeriodValues,
+    defaultWidth: 'wide',
+    formattingValues: formattingDayPeriodValues,
+    defaultFormattingWidth: 'wide'
+  })
+};
+
+var matchOrdinalNumberPattern = /^(\d+)(\.)?/i;
+var parseOrdinalNumberPattern = /\d+/i;
+var matchEraPatterns = {
+  narrow: /^(v\.? ?Chr\.?|n\.? ?Chr\.?)/i,
+  abbreviated: /^(v\.? ?Chr\.?|n\.? ?Chr\.?)/i,
+  wide: /^(vor Christus|vor unserer Zeitrechnung|nach Christus|unserer Zeitrechnung)/i
+};
+var parseEraPatterns = {
+  any: [/^v/i, /^n/i]
+};
+var matchQuarterPatterns = {
+  narrow: /^[1234]/i,
+  abbreviated: /^q[1234]/i,
+  wide: /^[1234](\.)? Quartal/i
+};
+var parseQuarterPatterns = {
+  any: [/1/i, /2/i, /3/i, /4/i]
+};
+var matchMonthPatterns = {
+  narrow: /^[jfmasond]/i,
+  abbreviated: /^(j[aä]n|feb|mär[z]?|apr|mai|jun[i]?|jul[i]?|aug|sep|okt|nov|dez)\.?/i,
+  wide: /^(januar|februar|märz|april|mai|juni|juli|august|september|oktober|november|dezember)/i
+};
+var parseMonthPatterns = {
+  narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i],
+  any: [/^j[aä]/i, /^f/i, /^mär/i, /^ap/i, /^mai/i, /^jun/i, /^jul/i, /^au/i, /^s/i, /^o/i, /^n/i, /^d/i]
+};
+var matchDayPatterns = {
+  narrow: /^[smdmf]/i,
+  short: /^(so|mo|di|mi|do|fr|sa)/i,
+  abbreviated: /^(son?|mon?|die?|mit?|don?|fre?|sam?)\.?/i,
+  wide: /^(sonntag|montag|dienstag|mittwoch|donnerstag|freitag|samstag)/i
+};
+var parseDayPatterns = {
+  any: [/^so/i, /^mo/i, /^di/i, /^mi/i, /^do/i, /^f/i, /^sa/i]
+};
+var matchDayPeriodPatterns = {
+  narrow: /^(vm\.?|nm\.?|Mitternacht|Mittag|morgens|nachm\.?|abends|nachts)/i,
+  abbreviated: /^(vorm\.?|nachm\.?|Mitternacht|Mittag|morgens|nachm\.?|abends|nachts)/i,
+  wide: /^(vormittags|nachmittags|Mitternacht|Mittag|morgens|nachmittags|abends|nachts)/i
+};
+var parseDayPeriodPatterns = {
+  any: {
+    am: /^v/i,
+    pm: /^n/i,
+    midnight: /^Mitte/i,
+    noon: /^Mitta/i,
+    morning: /morgens/i,
+    afternoon: /nachmittags/i,
+    // will never be matched. Afternoon is matched by `pm`
+    evening: /abends/i,
+    night: /nachts/i // will never be matched. Night is matched by `pm`
+
+  }
+};
+var match = {
+  ordinalNumber: buildMatchPatternFn({
+    matchPattern: matchOrdinalNumberPattern,
+    parsePattern: parseOrdinalNumberPattern,
+    valueCallback: function (value) {
+      return parseInt(value);
+    }
+  }),
+  era: buildMatchFn({
+    matchPatterns: matchEraPatterns,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseEraPatterns,
+    defaultParseWidth: 'any'
+  }),
+  quarter: buildMatchFn({
+    matchPatterns: matchQuarterPatterns,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseQuarterPatterns,
+    defaultParseWidth: 'any',
+    valueCallback: function (index) {
+      return index + 1;
+    }
+  }),
+  month: buildMatchFn({
+    matchPatterns: matchMonthPatterns,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseMonthPatterns,
+    defaultParseWidth: 'any'
+  }),
+  day: buildMatchFn({
+    matchPatterns: matchDayPatterns,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseDayPatterns,
+    defaultParseWidth: 'any'
+  }),
+  dayPeriod: buildMatchFn({
+    matchPatterns: matchDayPeriodPatterns,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseDayPeriodPatterns,
+    defaultParseWidth: 'any'
+  })
+};
+
+/**
+ * @type {Locale}
+ * @category Locales
+ * @summary German locale.
+ * @language German
+ * @iso-639-2 deu
+ * @author Thomas Eilmsteiner [@DeMuu]{@link https://github.com/DeMuu}
+ * @author Asia [@asia-t]{@link https://github.com/asia-t}
+ * @author Van Vuong Ngo [@vanvuongngo]{@link https://github.com/vanvuongngo}
+ * @author RomanErnst [@pex]{@link https://github.com/pex}
+ * @author Philipp Keck [@Philipp91]{@link https://github.com/Philipp91}
+ */
+
+var locale = {
+  code: 'de',
+  formatDistance: formatDistance,
+  formatLong: formatLong,
+  formatRelative: formatRelative,
+  localize: localize,
+  match: match,
+  options: {
+    weekStartsOn: 1
+    /* Monday */
+    ,
+    firstWeekContainsDate: 4
+  }
+};
+
+var PickerView = styled.div.withConfig({
+  displayName: "Datepicker__PickerView",
+  componentId: "sc-1h58zop-0"
+})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    text-align: left;\n\n    .react-datepicker-popper {\n        right: ", "px;\n        z-index: 9 !important;\n        width: 100%;\n    }\n\n    @media ", " {\n        .react-datepicker-popper {\n            right: auto;\n            width: auto;\n        }\n    }\n\n    .react-datepicker {\n        display: flex;\n        flex-wrap: wrap;\n        font-family: 'Roboto', sans-serif;\n        border: 1px solid\n            ", " !important;\n        border-radius: ", " !important;\n        padding: ", "px;\n        width: 100%;\n\n        box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.15);\n    }\n\n    .react-datepicker-wrapper {\n        width: 100% !important;\n    }\n\n    .react-datepicker__header {\n        border: none !important;\n        background-color: transparent !important;\n        margin: 0 ", "px;\n    }\n\n    /* Month */\n    .react-datepicker__month-container {\n        width: 100%;\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        .react-datepicker__month-container {\n            max-width: 50%;\n        }\n    }\n\n    .react-datepicker__month {\n        margin-left: ", "px;\n        margin-right: ", "px;\n    }\n\n    .react-datepicker__current-month {\n        font-family: 'Roboto', sans-serif;\n        font-weight: 600;\n        font-size: 17px;\n        line-height: 1.3;\n        text-transform: uppercase;\n        background-color: ", ";\n        padding: 10px 15px;\n        color: ", " !important;\n        width: max-content;\n        margin: 0 auto;\n    }\n\n    /* Day styles */\n\n    .react-datepicker__day-names {\n        display: flex;\n        font-size: 11px;\n        line-height: 1.25;\n        background: transparent;\n    }\n\n    @media ", " {\n        .react-datepicker__day-names {\n            display: block;\n        }\n    }\n\n    .react-datepicker__day-name {\n        flex: 1 0 auto;\n    }\n\n    .react-datepicker__week {\n        display: flex;\n        margin: -2px !important;\n    }\n\n    @media ", " {\n        .react-datepicker__week {\n            display: block;\n        }\n    }\n\n    .react-datepicker__day {\n        flex: 1 0 auto;\n        background-color: ", ";\n        border-radius: 0 !important;\n        font-weight: 600;\n\n        margin: 2px !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day:hover {\n            background-color: ", " !important;\n            border-radius: 0 !important;\n            color: ", ";\n        }\n    }\n\n    .react-datepicker__day--outside-month {\n        color: ", " !important;\n        cursor: default;\n    }\n\n    .react-datepicker__day--selected {\n        background-color: ", " !important;\n        border-radius: 0 !important;\n        color: ", ";\n    }\n\n    .react-datepicker__day--today {\n        border: 1px solid\n            ", " !important;\n        border-radius: 0 !important;\n    }\n\n    /* Triangle Styles */\n\n    .react-datepicker__triangle:before {\n        border-bottom-color: ", " !important;\n    }\n\n    .react-datepicker__triangle:after {\n        border-bottom-color: ", " !important;\n    }\n\n    /* Day Ranges */\n\n    .react-datepicker__day--in-range {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--in-range:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--range-start {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--range-start:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--range-end {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--range-end:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--in-selecting-range {\n        background-color: ", " !important;\n    }\n\n    /* Next-/Prev-Arrow */\n    .react-datepicker__close-icon {\n        display: none !important;\n    }\n\n    .react-datepicker__navigation {\n        top: ", "px !important;\n    }\n\n    .react-datepicker__navigation-icon--next::before {\n        left: 0 !important;\n    }\n\n    .react-datepicker__navigation-icon--previous::before {\n        left: 0 !important;\n    }\n\n    .react-datepicker__navigation:focus {\n        outline: 1px solid ", ";\n    }\n\n    /* Keyboard selection */\n    .react-datepicker__day--keyboard-selected {\n        outline: none;\n        background: ", ";\n    }\n"], ["\n    position: relative;\n    width: 100%;\n    text-align: left;\n\n    .react-datepicker-popper {\n        right: ", "px;\n        z-index: 9 !important;\n        width: 100%;\n    }\n\n    @media ", " {\n        .react-datepicker-popper {\n            right: auto;\n            width: auto;\n        }\n    }\n\n    .react-datepicker {\n        display: flex;\n        flex-wrap: wrap;\n        font-family: 'Roboto', sans-serif;\n        border: 1px solid\n            ", " !important;\n        border-radius: ", " !important;\n        padding: ", "px;\n        width: 100%;\n\n        box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.15);\n    }\n\n    .react-datepicker-wrapper {\n        width: 100% !important;\n    }\n\n    .react-datepicker__header {\n        border: none !important;\n        background-color: transparent !important;\n        margin: 0 ", "px;\n    }\n\n    /* Month */\n    .react-datepicker__month-container {\n        width: 100%;\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        .react-datepicker__month-container {\n            max-width: 50%;\n        }\n    }\n\n    .react-datepicker__month {\n        margin-left: ", "px;\n        margin-right: ", "px;\n    }\n\n    .react-datepicker__current-month {\n        font-family: 'Roboto', sans-serif;\n        font-weight: 600;\n        font-size: 17px;\n        line-height: 1.3;\n        text-transform: uppercase;\n        background-color: ", ";\n        padding: 10px 15px;\n        color: ", " !important;\n        width: max-content;\n        margin: 0 auto;\n    }\n\n    /* Day styles */\n\n    .react-datepicker__day-names {\n        display: flex;\n        font-size: 11px;\n        line-height: 1.25;\n        background: transparent;\n    }\n\n    @media ", " {\n        .react-datepicker__day-names {\n            display: block;\n        }\n    }\n\n    .react-datepicker__day-name {\n        flex: 1 0 auto;\n    }\n\n    .react-datepicker__week {\n        display: flex;\n        margin: -2px !important;\n    }\n\n    @media ", " {\n        .react-datepicker__week {\n            display: block;\n        }\n    }\n\n    .react-datepicker__day {\n        flex: 1 0 auto;\n        background-color: ", ";\n        border-radius: 0 !important;\n        font-weight: 600;\n\n        margin: 2px !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day:hover {\n            background-color: ", " !important;\n            border-radius: 0 !important;\n            color: ", ";\n        }\n    }\n\n    .react-datepicker__day--outside-month {\n        color: ", " !important;\n        cursor: default;\n    }\n\n    .react-datepicker__day--selected {\n        background-color: ", " !important;\n        border-radius: 0 !important;\n        color: ", ";\n    }\n\n    .react-datepicker__day--today {\n        border: 1px solid\n            ", " !important;\n        border-radius: 0 !important;\n    }\n\n    /* Triangle Styles */\n\n    .react-datepicker__triangle:before {\n        border-bottom-color: ", " !important;\n    }\n\n    .react-datepicker__triangle:after {\n        border-bottom-color: ", " !important;\n    }\n\n    /* Day Ranges */\n\n    .react-datepicker__day--in-range {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--in-range:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--range-start {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--range-start:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--range-end {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--range-end:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--in-selecting-range {\n        background-color: ", " !important;\n    }\n\n    /* Next-/Prev-Arrow */\n    .react-datepicker__close-icon {\n        display: none !important;\n    }\n\n    .react-datepicker__navigation {\n        top: ", "px !important;\n    }\n\n    .react-datepicker__navigation-icon--next::before {\n        left: 0 !important;\n    }\n\n    .react-datepicker__navigation-icon--previous::before {\n        left: 0 !important;\n    }\n\n    .react-datepicker__navigation:focus {\n        outline: 1px solid ", ";\n    }\n\n    /* Keyboard selection */\n    .react-datepicker__day--keyboard-selected {\n        outline: none;\n        background: ", ";\n    }\n"])), spacings.spacer * 2, mq.medium, function (_a) {
+  var theme = _a.theme;
+  return hexToRgba(getColors(theme).elementBg.dark, 0.2);
+}, function (_a) {
+  var theme = _a.theme;
+  return getGlobals(theme).sections.edgeRadius || '0px';
+}, spacings.nudge * 2, spacings.nudge * 3, spacings.nudge * 3, mq.medium, spacings.nudge * 2, spacings.nudge * 2, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).text.inverted;
+}, mq.medium, mq.medium, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.light;
+}, mq.medium, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.dark;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).text.inverted;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.medium;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).text.inverted;
+}, function (_a) {
+  var theme = _a.theme;
+  return hexToRgba(getColors(theme).elementBg.dark, 0.6);
+}, function (_a) {
+  var theme = _a.theme;
+  return hexToRgba(getColors(theme).elementBg.dark, 0.2);
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.light;
+}, function (_a) {
+  var theme = _a.theme;
+  return hexToRgba(getColors(theme).primary.default, 0.7);
+}, mq.medium, function (_a) {
+  var theme = _a.theme;
+  return hexToRgba(getColors(theme).primary.default, 0.25);
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+}, mq.medium, function (_a) {
+  var theme = _a.theme;
+  return hexToRgba(getColors(theme).primary.default, 0.25);
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+}, mq.medium, function (_a) {
+  var theme = _a.theme;
+  return hexToRgba(getColors(theme).primary.default, 0.25);
+}, function (_a) {
+  var theme = _a.theme;
+  return hexToRgba(getColors(theme).primary.default, 0.7);
+}, spacings.nudge, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.dark;
+});
+var Icon$1 = styled.div.withConfig({
+  displayName: "Datepicker__Icon",
+  componentId: "sc-1h58zop-1"
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n    height: 100%;\n    min-width: 24px;\n    color: ", ";\n\n    & > * {\n        height: 20px;\n    }\n"], ["\n    height: 100%;\n    min-width: 24px;\n    color: ", ";\n\n    & > * {\n        height: 20px;\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getFonts(theme).copy.small.colorInverted : getFonts(theme).copy.small.color;
+});
+var DatepickerButton = styled.button.withConfig({
+  displayName: "Datepicker__DatepickerButton",
+  componentId: "sc-1h58zop-2"
+})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 40px;\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: none;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    outline: none;\n    pointer-events: ", ";\n\n    position: relative;\n\n    border: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 40px;\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: none;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    outline: none;\n    pointer-events: ", ";\n\n    position: relative;\n\n    border: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), spacings.nudge, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      hasError = _a.hasError;
+
+  if (isInverted) {
+    return hasError ? getColors(theme).errorInverted : getColors(theme).elementBg.light;
+  }
+
+  return hasError ? getColors(theme).error : getColors(theme).elementBg.dark;
+}, function (_a) {
+  var theme = _a.theme;
+  return getGlobals(theme).sections.edgeRadius;
+}, copyStyle('copy', 'small'), function (_a) {
+  var theme = _a.theme;
+  return withRange(getFormFieldTextSize(theme), 'font-size');
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      hasError = _a.hasError,
+      hasDateValue = _a.hasDateValue;
+
+  if (isInverted) {
+    return hasError ? getColors(theme).text.errorInverted : !hasDateValue ? getColors(theme).text.subtileInverted : getFonts(theme).copy.small.colorInverted;
+  }
+
+  return hasError ? getColors(theme).text.error : !hasDateValue ? getColors(theme).text.subtile : getFonts(theme).copy.small.color;
+}, function (_a) {
+  var isActive = _a.isActive;
+  return isActive ? 'none' : 'all';
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      isActive = _a.isActive;
+  return isActive && "1px solid ".concat(isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return "1px solid ".concat(isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return "1px solid ".concat(isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
+});
+var DatepickerButtonMain = styled.div.withConfig({
+  displayName: "Datepicker__DatepickerButtonMain",
+  componentId: "sc-1h58zop-3"
+})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.spacer);
+var DatepickerFoot = styled.div.withConfig({
+  displayName: "Datepicker__DatepickerFoot",
+  componentId: "sc-1h58zop-4"
+})(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n    display: block;\n    width: 100%;\n\n    /* margin-top: ", "px; */\n"], ["\n    display: block;\n    width: 100%;\n\n    /* margin-top: ", "px; */\n"])), spacings.spacer * 14);
+var FootFlex = styled.div.withConfig({
+  displayName: "Datepicker__FootFlex",
+  componentId: "sc-1h58zop-5"
+})(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n    clear: both;\n    display: flex;\n    flex-direction: column;\n\n    & > * {\n        width: 100%;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        align-items: center;\n        flex-direction: row;\n\n        & > * {\n            width: auto;\n        }\n\n        & > * + * {\n            margin-top: 0;\n            margin-left: ", "px;\n        }\n    }\n"], ["\n    clear: both;\n    display: flex;\n    flex-direction: column;\n\n    & > * {\n        width: 100%;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        align-items: center;\n        flex-direction: row;\n\n        & > * {\n            width: auto;\n        }\n\n        & > * + * {\n            margin-top: 0;\n            margin-left: ", "px;\n        }\n    }\n"])), spacings.spacer * 0.5, mq.medium, spacings.spacer * 0.5);
+var ButtonLabel = styled(Button.Label).withConfig({
+  displayName: "Datepicker__ButtonLabel",
+  componentId: "sc-1h58zop-6"
+})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n    font-size: 12px;\n"], ["\n    font-size: 12px;\n"])));
+var ButtonGhostLabel = styled(ButtonGhost.Label).withConfig({
+  displayName: "Datepicker__ButtonGhostLabel",
+  componentId: "sc-1h58zop-7"
+})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n    font-size: 12px;\n"], ["\n    font-size: 12px;\n"])));
+var PickerButton = forwardRef(function (_a, ref) {
+  var label = _a.label,
+      errorMessage = _a.errorMessage,
+      infoMessage = _a.infoMessage,
+      isRequired = _a.isRequired,
+      isInverted = _a.isInverted,
+      isDisabled = _a.isDisabled,
+      isFocused = _a.isFocused,
+      name = _a.name,
+      altText = _a.altText,
+      startDate = _a.startDate,
+      endDate = _a.endDate,
+      setFocused = _a.setFocused,
+      onClick = _a.onClick,
+      _b = _a.dateFormat,
+      dateFormat = _b === void 0 ? 'dd.MM.yyyy' : _b,
+      customIcon = _a.customIcon,
+      singleSelect = _a.singleSelect;
+  return React__default.createElement(FieldWrapper$1.View, {
+    isDisabled: isDisabled
+  }, React__default.createElement(FieldWrapper$1.Head, {
+    label: label,
+    isRequired: isRequired,
+    isInverted: isInverted
+  }), React__default.createElement(FieldWrapper$1.Content, null, React__default.createElement(DatepickerButton, {
+    ref: ref,
+    type: "button",
+    onClick: function (e) {
+      setFocused && setFocused(true);
+      onClick && onClick(e);
+    },
+    isActive: isFocused,
+    hasDateValue: !!startDate,
+    isInverted: isInverted,
+    hasError: !!errorMessage,
+    className: "myPickerButton"
+  }, React__default.createElement(DatepickerButtonMain, null, startDate ? "".concat(format(startDate, dateFormat)).concat(endDate ? " \u2013 ".concat(format(endDate, dateFormat)) : '') : altText), React__default.createElement(Icon$1, {
+    isInverted: isInverted
+  }, customIcon ? customIcon({
+    isInverted: isInverted,
+    singleSelect: singleSelect
+  }) : singleSelect ? React__default.createElement(CalendarToday, null) : React__default.createElement(DateRange, null))), name && React__default.createElement(React__default.Fragment, null, React__default.createElement("input", {
+    type: "hidden",
+    name: "".concat(name, "[\"start\"]"),
+    value: startDate === null || startDate === void 0 ? void 0 : startDate.toString()
+  }), React__default.createElement("input", {
+    type: "hidden",
+    name: "".concat(name, "[\"end\"]"),
+    value: endDate === null || endDate === void 0 ? void 0 : endDate.toString()
+  }))), React__default.createElement(FieldWrapper$1.Messages, {
+    infoMessage: infoMessage,
+    errorMessage: errorMessage,
+    isInverted: isInverted
+  }));
+});
+PickerButton.displayName = 'PickerButton';
+var PickerHeader = styled.div.withConfig({
+  displayName: "Datepicker__PickerHeader",
+  componentId: "sc-1h58zop-8"
+})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n    margin-bottom: ", "px;\n"], ["\n    margin-bottom: ", "px;\n"])), spacings.nudge * 3);
+
+var getPickerHeader = function (locale$1, prevMonthAction, nextMonthAction) {
+  // eslint-disable-next-line react/display-name
+  return function (_a) {
+    var monthDate = _a.monthDate,
+        customHeaderCount = _a.customHeaderCount,
+        decreaseMonth = _a.decreaseMonth,
+        increaseMonth = _a.increaseMonth;
+    return React__default.createElement(PickerHeader, null, React__default.createElement("button", {
+      "aria-label": "Previous Month",
+      className: 'react-datepicker__navigation react-datepicker__navigation--previous',
+      style: customHeaderCount === 1 ? {
+        visibility: 'hidden'
+      } : undefined,
+      onClick: function (ev) {
+        ev.preventDefault();
+        decreaseMonth();
+      }
+    }, prevMonthAction ? typeof prevMonthAction === 'string' ? React__default.createElement("img", {
+      src: prevMonthAction
+    }) : prevMonthAction : React__default.createElement("span", {
+      className: 'react-datepicker__navigation-icon react-datepicker__navigation-icon--previous'
+    }, '<')), React__default.createElement("span", {
+      className: "react-datepicker__current-month"
+    }, format(monthDate, 'LLLL', {
+      locale: locale
+    })), React__default.createElement("button", {
+      "aria-label": "Next Month",
+      className: 'react-datepicker__navigation react-datepicker__navigation--next',
+      style: customHeaderCount === 0 ? {
+        visibility: 'hidden'
+      } : undefined,
+      onClick: function (ev) {
+        ev.preventDefault();
+        increaseMonth();
+      }
+    }, nextMonthAction ? typeof nextMonthAction === 'string' ? React__default.createElement("img", {
+      src: nextMonthAction
+    }) : nextMonthAction : React__default.createElement("span", {
+      className: 'react-datepicker__navigation-icon react-datepicker__navigation-icon--next'
+    }, '>')));
+  };
+};
+
+var Datepicker = function (_a) {
+  var label = _a.label,
+      errorMessage = _a.errorMessage,
+      infoMessage = _a.infoMessage,
+      isRequired = _a.isRequired,
+      isDisabled = _a.isDisabled,
+      isInverted = _a.isInverted,
+      name = _a.name,
+      dateSubmitLabel = _a.dateSubmitLabel,
+      dateDeleteLabel = _a.dateDeleteLabel,
+      placeholder = _a.placeholder,
+      _b = _a.singleSelect,
+      singleSelect = _b === void 0 ? false : _b,
+      values = _a.values,
+      _c = _a.minDate,
+      minDate = _c === void 0 ? new Date() : _c,
+      maxDate = _a.maxDate,
+      onDataChange = _a.onDataChange,
+      onSubmit = _a.onSubmit,
+      deleteAction = _a.deleteAction,
+      submitAction = _a.submitAction,
+      customIcon = _a.customIcon,
+      nextCtrlUrl = _a.nextCtrlUrl,
+      prevCtrlUrl = _a.prevCtrlUrl;
+  var globals = useLibTheme().globals;
+  var locale$1 = globals.sections.datepickerLocaleKey;
+  var dateFormat = globals.sections.datepickerDateFormat;
+  var pickerRef = useRef(null);
+  var pickerBtnRef = useRef(null);
+
+  var _d = useState(false),
+      isSmall = _d[0],
+      setIsSmall = _d[1];
+
+  var _e = useState(),
+      startDate = _e[0],
+      setStartDate = _e[1];
+
+  var _f = useState(),
+      endDate = _f[0],
+      setEndDate = _f[1];
+
+  var _g = useState(),
+      focused = _g[0],
+      setFocused = _g[1];
+
+  useEffect(function () {
+    var x = function () {
+      return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              return [4
+              /*yield*/
+              , import('react-datepicker')];
+
+            case 1:
+              _a.sent();
+
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
+    if (!singleSelect) setIsSmall(!window.matchMedia(mq.medium).matches);
+    x();
+  }, [locale$1, singleSelect]);
+  useEffect(function () {
+    if (values) {
+      if (values[0] && isValid(values[0])) {
+        setStartDate(values[0]);
+      }
+
+      if (values[1] && isValid(values[1])) {
+        setEndDate(values[1]);
+      }
+    }
+  }, [values]);
+  useEffect(function () {
+    var handleResize = function () {
+      var shouldBeSmall = !window.matchMedia(mq.medium).matches;
+
+      if (shouldBeSmall !== isSmall) {
+        setIsSmall(shouldBeSmall);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [isSmall]);
+  useEffect(function () {
+    var _a;
+
+    if (pickerRef.current && focused !== undefined) {
+      (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(focused);
+    }
+  }, [focused]);
+  var handleSubmit = useCallback(function (ev) {
+    ev.preventDefault();
+    setFocused(false);
+    onSubmit && onSubmit(startDate, endDate);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [endDate, startDate]);
+  var handleReset = useCallback(function (ev) {
+    ev.preventDefault();
+    setStartDate(undefined);
+    setEndDate(undefined);
+  }, []);
+  return React__default.createElement(PickerView, null, React__default.createElement(ReactDatePicker, {
+    locale: locale$1 === 'de' ? locale : undefined,
+    ref: pickerRef,
+    dateFormat: dateFormat,
+    onChange: function (date) {
+      if (date) {
+        if (singleSelect) {
+          setStartDate(date);
+          setFocused(false);
+          onDataChange && onDataChange(date, null);
+        } else if (startDate) {
+          if (endDate) {
+            setStartDate(date);
+            setEndDate(null);
+            onDataChange && onDataChange(date, null);
+          } else if (isBefore(date, startDate)) {
+            setEndDate(startDate);
+            setStartDate(date);
+            onDataChange && onDataChange(date, startDate);
+          } else {
+            setEndDate(date);
+            onDataChange && onDataChange(startDate, date);
+          }
+        } else {
+          setStartDate(date);
+          onDataChange && onDataChange(date, endDate || null);
+        }
+      } else {
+        setStartDate(undefined);
+        onDataChange && onDataChange(null, null);
+      }
+    },
+    selected: startDate,
+    startDate: startDate,
+    endDate: endDate,
+    monthsShown: isSmall ? 1 : 2,
+    shouldCloseOnSelect: singleSelect,
+    customInput: React__default.createElement(PickerButton, {
+      label: label,
+      isInverted: isInverted,
+      isDisabled: isDisabled,
+      infoMessage: infoMessage,
+      errorMessage: errorMessage,
+      isRequired: isRequired,
+      ref: pickerBtnRef,
+      name: name,
+      altText: placeholder,
+      startDate: startDate,
+      endDate: endDate,
+      isFocused: focused,
+      setFocused: setFocused,
+      dateFormat: dateFormat,
+      customIcon: customIcon,
+      singleSelect: singleSelect
+    }),
+    showPopperArrow: true,
+    minDate: minDate,
+    maxDate: maxDate,
+    disabledKeyboardNavigation: false,
+    isClearable: true,
+    onClickOutside: function (ev) {
+      ev.stopPropagation();
+      setFocused(false);
+      onSubmit && onSubmit(startDate, endDate);
+    },
+    renderCustomHeader: getPickerHeader(locale$1, prevCtrlUrl, nextCtrlUrl)
+  }, React__default.createElement(DatepickerFoot, null, React__default.createElement(FootFlex, null, deleteAction ? deleteAction(handleReset) : React__default.createElement(ButtonGhost.View, {
+    as: "button",
+    onClick: handleReset
+  }, React__default.createElement(ButtonGhostLabel, null, dateDeleteLabel || 'Delete')), submitAction ? submitAction(handleSubmit) : React__default.createElement(Button.View, {
+    as: "button",
+    onClick: handleSubmit
+  }, React__default.createElement(ButtonLabel, null, dateSubmitLabel || 'Submit'))))));
+};
+/**
+ * Function to compare both field prop states
+ * @param prev Previous props
+ * @param next Next props
+ * @returns
+ */
+
+
+var areEqual$5 = function (prev, next) {
+  var _a, _b, _c, _d; // only apply logic if memo functionality is enabled
+
+
+  if (!prev.enableMemo) return false;
+  if (prev.infoMessage !== next.infoMessage) return false;
+  if (prev.errorMessage !== next.errorMessage) return false;
+  if (prev.dateDeleteLabel !== next.dateDeleteLabel) return false;
+  if (prev.dateSubmitLabel !== next.dateSubmitLabel) return false;
+  if (prev.label !== next.label) return false;
+  if (prev.placeholder !== next.placeholder) return false; // compare date values
+
+  var prevDateStart = (_a = prev.values) === null || _a === void 0 ? void 0 : _a[0];
+  var prevDateEnd = (_b = prev.values) === null || _b === void 0 ? void 0 : _b[1];
+  var nextDateStart = (_c = prev.values) === null || _c === void 0 ? void 0 : _c[0];
+  var nextDateEnd = (_d = prev.values) === null || _d === void 0 ? void 0 : _d[1];
+
+  if (prevDateStart !== nextDateStart || !isEqual(prevDateStart || -1, nextDateStart || -1) || prevDateEnd !== nextDateEnd || !isEqual(prevDateEnd || -1, nextDateEnd || -1)) {
+    return false;
+  }
+
+  return true;
+};
+
+var DatepickerCmp = React__default.memo(Datepicker, areEqual$5);
+var templateObject_1$5, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$3, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9$1;
+
+var View = styled.label.withConfig({
+  displayName: "Radio__View",
+  componentId: "sc-1h5e0q8-0"
+})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 2);
+var RadioContainer = styled.div.withConfig({
+  displayName: "Radio__RadioContainer",
+  componentId: "sc-1h5e0q8-1"
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    cursor: ", ";\n    pointer-events: ", ";\n\n    border: 2px solid transparent;\n    border-radius: 50%;\n\n    &:focus-within {\n        outline: 1px solid ", ";\n        outline-offset: 0;\n    }\n"], ["\n    cursor: ", ";\n    pointer-events: ", ";\n\n    border: 2px solid transparent;\n    border-radius: 50%;\n\n    &:focus-within {\n        outline: 1px solid ", ";\n        outline-offset: 0;\n    }\n"])), function (_a) {
+  var isDisabled = _a.isDisabled;
+  return isDisabled ? 'default' : 'pointer';
+}, function (_a) {
+  var isDisabled = _a.isDisabled;
+  return isDisabled ? 'none' : 'all';
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+});
+var Original$1 = styled.input.withConfig({
+  displayName: "Radio__Original",
+  componentId: "sc-1h5e0q8-2"
+})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n"], ["\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n"])));
+var StyledRadioButton = styled.span.withConfig({
+  displayName: "Radio__StyledRadioButton",
+  componentId: "sc-1h5e0q8-3"
+})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n    background: transparent;\n    border-radius: 50%;\n\n    position: relative;\n\n    width: 20px;\n    height: 20px;\n    display: block;\n\n    border: 2px solid\n        ", ";\n\n    ", "\n"], ["\n    background: transparent;\n    border-radius: 50%;\n\n    position: relative;\n\n    width: 20px;\n    height: 20px;\n    display: block;\n\n    border: 2px solid\n        ", ";\n\n    ", "\n"])), function (_a) {
+  var isInverted = _a.isInverted,
+      theme = _a.theme,
+      isSelected = _a.isSelected;
+  return isSelected ? getColors(theme).primary.default : isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
+}, function (_a) {
+  var isSelected = _a.isSelected,
+      theme = _a.theme;
+  return isSelected ? css(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n                  background-color: ", ";\n\n                  &:before {\n                      content: '';\n                      position: absolute;\n                      display: block;\n                      height: 8px;\n                      width: 8px;\n                      background-color: ", ";\n                      border-radius: 50%;\n                      top: 50%;\n                      left: 50%;\n\n                      transform: translate(-50%, -50%);\n                  }\n              "], ["\n                  background-color: ", ";\n\n                  &:before {\n                      content: '';\n                      position: absolute;\n                      display: block;\n                      height: 8px;\n                      width: 8px;\n                      background-color: ", ";\n                      border-radius: 50%;\n                      top: 50%;\n                      left: 50%;\n\n                      transform: translate(-50%, -50%);\n                  }\n              "])), getColors(theme).primary.default, getColors(theme).elementBg.light) : 'none';
+});
+var Label = styled(Copy).withConfig({
+  displayName: "Radio__Label",
+  componentId: "sc-1h5e0q8-4"
+})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n    padding-top: 2px;\n    text-align: left;\n    user-select: none;\n\n    & > * {\n        margin: 0;\n    }\n"], ["\n    padding-top: 2px;\n    text-align: left;\n    user-select: none;\n\n    & > * {\n        margin: 0;\n    }\n"])));
+
+var RadioButton = function (_a) {
+  var isDisabled = _a.isDisabled,
+      isSelected = _a.isSelected,
+      isInverted = _a.isInverted,
+      onChange = _a.onChange,
+      label = _a.label,
+      id = _a.id,
+      name = _a.name,
+      value = _a.value;
+  var colors = useLibTheme().colors;
+  return React.createElement(View, null, React.createElement(RadioContainer, {
+    isDisabled: isDisabled
+  }, React.createElement(StyledRadioButton, {
+    isSelected: isSelected,
+    isInverted: isInverted
+  }), React.createElement(Original$1, {
+    type: "radio",
+    name: name,
+    id: id,
+    value: value,
+    checked: isSelected,
+    onChange: onChange
+  })), label && React.createElement(Label, {
+    renderAs: "span",
+    size: "small",
+    type: "copy-b",
+    textColor: isDisabled ? colors.elementBg.medium : isInverted ? colors.text.inverted : colors.text.default,
+    innerHTML: label,
+    isInverted: isInverted
+  }));
+};
+/**
+ * Function to compare both field prop states
+ * @param prev Previous props
+ * @param next Next props
+ * @returns
+ */
+
+
+var areEqual$4 = function (prev, next) {
+  // only apply logic if memo functionality is enabled
+  if (!prev.enableMemo) return false;
+  if (prev.isSelected !== next.isSelected) return false;
+  if (prev.label !== next.label) return false;
+  if (prev.value !== next.value) return false;
+  return true;
+};
+
+var RadioButton$1 = React.memo(RadioButton, areEqual$4);
+var templateObject_1$4, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2;
+
+var Area = styled.textarea.withConfig({
+  displayName: "Textarea__Area",
+  componentId: "sc-1hq47t-0"
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    display: block;\n    outline: none;\n    width: 100%;\n    min-height: 100px;\n    box-shadow: none;\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    resize: none;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n"], ["\n    display: block;\n    outline: none;\n    width: 100%;\n    min-height: 100px;\n    box-shadow: none;\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    resize: none;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n"])), spacings.nudge, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      hasError = _a.hasError;
+
+  if (isInverted) {
+    return hasError ? getColors(theme).errorInverted : getColors(theme).elementBg.light;
+  }
+
+  return hasError ? getColors(theme).error : getColors(theme).elementBg.dark;
+}, function (_a) {
+  var theme = _a.theme;
+  return getGlobals(theme).sections.edgeRadius;
+}, copyStyle('copy', 'small'), function (_a) {
+  var theme = _a.theme;
+  return withRange(getFormFieldTextSize(theme), 'font-size');
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      hasError = _a.hasError;
+
+  if (isInverted) {
+    return hasError ? getColors(theme).text.errorInverted : getFonts(theme).copy.small.colorInverted;
+  }
+
+  return hasError ? getColors(theme).text.error : getFonts(theme).copy.small.color;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return "1px solid ".concat(isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return "1px solid ".concat(isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).text.subtileInverted : getColors(theme).text.subtile;
+});
+
+var Textarea = function (_a) {
+  var label = _a.label,
+      isRequired = _a.isRequired,
+      errorMessage = _a.errorMessage,
+      infoMessage = _a.infoMessage,
+      isDisabled = _a.isDisabled,
+      isInverted = _a.isInverted,
+      placeholder = _a.placeholder,
+      value = _a.value,
+      name = _a.name,
+      onChange = _a.onChange,
+      onBlur = _a.onBlur;
+
+  if (isDisabled) {
+    errorMessage = '';
+  }
+
+  return React__default.createElement(FieldWrapper$1.View, {
+    isDisabled: isDisabled
+  }, React__default.createElement(FieldWrapper$1.Head, {
+    label: label,
+    isRequired: isRequired,
+    isInverted: isInverted
+  }), React__default.createElement(FieldWrapper$1.Content, null, React__default.createElement(Area, {
+    value: value,
+    name: name,
+    placeholder: placeholder,
+    hasError: !!errorMessage,
+    isDisabled: isDisabled,
+    isInverted: isInverted,
+    required: isRequired,
+    onChange: onChange,
+    onBlur: onBlur
+  })), React__default.createElement(FieldWrapper$1.Messages, {
+    infoMessage: infoMessage,
+    errorMessage: errorMessage,
+    isInverted: isInverted
+  }));
+};
+/**
+ * Function to compare both field prop states
+ * @param prev Previous props
+ * @param next Next props
+ * @returns
+ */
+
+
+var areEqual$3 = function (prev, next) {
+  // only apply logic if memo functionality is enabled
+  if (!prev.enableMemo) return false;
+  if (prev.value !== next.value) return false;
+  if (prev.errorMessage !== next.errorMessage) return false;
+  if (prev.infoMessage !== next.infoMessage) return false;
+  if (prev.label !== next.label) return false;
+  if (prev.placeholder !== next.placeholder) return false;
+  return true;
+};
+
+var Textarea$1 = React__default.memo(Textarea, areEqual$3);
+var templateObject_1$3;
+
+var InputField = styled.input.withConfig({
+  displayName: "Textfield__InputField",
+  componentId: "sc-11gw2iv-0"
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    display: block;\n    outline: none;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n"], ["\n    display: block;\n    outline: none;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n"])), spacings.nudge, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      hasError = _a.hasError;
+
+  if (isInverted) {
+    return hasError ? getColors(theme).errorInverted : getColors(theme).elementBg.light;
+  }
+
+  return hasError ? getColors(theme).error : getColors(theme).elementBg.dark;
+}, function (_a) {
+  var theme = _a.theme;
+  return getGlobals(theme).sections.edgeRadius;
+}, copyStyle('copy', 'small'), function (_a) {
+  var theme = _a.theme;
+  return withRange(getFormFieldTextSize(theme), 'font-size');
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      hasError = _a.hasError;
+
+  if (isInverted) {
+    return hasError ? getColors(theme).text.errorInverted : getFonts(theme).copy.small.colorInverted;
+  }
+
+  return hasError ? getColors(theme).text.error : getFonts(theme).copy.small.color;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return "1px solid ".concat(isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return "1px solid ".concat(isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).text.subtileInverted : getColors(theme).text.subtile;
+});
+
+var Textfield = function (_a) {
+  var _b = _a.type,
+      type = _b === void 0 ? 'text' : _b,
+      label = _a.label,
+      errorMessage = _a.errorMessage,
+      infoMessage = _a.infoMessage,
+      isRequired = _a.isRequired,
+      isDisabled = _a.isDisabled,
+      isInverted = _a.isInverted,
+      placeholder = _a.placeholder,
+      value = _a.value,
+      name = _a.name,
+      onChange = _a.onChange,
+      onBlur = _a.onBlur;
+
+  if (isDisabled) {
+    errorMessage = '';
+  }
+
+  return React__default.createElement(FieldWrapper$1.View, {
+    isDisabled: isDisabled
+  }, React__default.createElement(FieldWrapper$1.Head, {
+    label: label,
+    isRequired: isRequired,
+    isInverted: isInverted
+  }), React__default.createElement(FieldWrapper$1.Content, null, React__default.createElement(InputField, {
+    placeholder: placeholder,
+    hasError: !!errorMessage,
+    type: type,
+    isInverted: isInverted,
+    name: name,
+    value: value,
+    required: isRequired,
+    onChange: onChange,
+    onBlur: onBlur
+  })), React__default.createElement(FieldWrapper$1.Messages, {
+    infoMessage: infoMessage,
+    errorMessage: errorMessage,
+    isInverted: isInverted
+  }));
+};
+/**
+ * Function to compare both field prop states
+ * @param prev Previous props
+ * @param next Next props
+ * @returns
+ */
+
+
+var areEqual$2 = function (prev, next) {
+  // only apply logic if memo functionality is enabled
+  if (!prev.enableMemo) return false;
+  if (prev.value !== next.value) return false;
+  if (prev.errorMessage !== next.errorMessage) return false;
+  if (prev.infoMessage !== next.infoMessage) return false;
+  if (prev.label !== next.label) return false;
+  if (prev.placeholder !== next.placeholder) return false;
+  return true;
+};
+
+var Textfield$1 = React__default.memo(Textfield, areEqual$2);
+var templateObject_1$2;
+
+var Select = styled.button.withConfig({
+  displayName: "SelectDropdown__Select",
+  componentId: "sc-hnkdye-0"
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n    position: relative;\n\n    -webkit-appearance: none;\n    outline: none;\n    cursor: pointer;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n    position: relative;\n\n    -webkit-appearance: none;\n    outline: none;\n    cursor: pointer;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      hasError = _a.hasError,
+      isOpen = _a.isOpen;
+  if (isOpen) return 'transparent';
+
+  if (isInverted) {
+    return hasError ? getColors(theme).errorInverted : getColors(theme).elementBg.light;
+  }
+
+  return hasError ? getColors(theme).error : getColors(theme).elementBg.dark;
+}, function (_a) {
+  var theme = _a.theme;
+  return getGlobals(theme).sections.edgeRadius;
+}, copyStyle('copy', 'small'), function (_a) {
+  var theme = _a.theme;
+  return withRange(getFormFieldTextSize(theme), 'font-size');
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      hasError = _a.hasError,
+      isSelected = _a.isSelected;
+
+  if (!isSelected) {
+    return isInverted ? getColors(theme).text.subtileInverted : getColors(theme).text.subtile;
+  }
+
+  if (isInverted) {
+    return hasError ? getColors(theme).text.errorInverted : getFonts(theme).copy.small.colorInverted;
+  }
+
+  return hasError ? getColors(theme).text.error : getFonts(theme).copy.small.color;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      isOpen = _a.isOpen;
+  return "1px solid ".concat(isOpen ? 'transparent' : isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      isOpen = _a.isOpen;
+  return "1px solid ".concat(isOpen ? 'transparent' : isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
+}, spacings.nudge);
+var SelectMain = styled.span.withConfig({
+  displayName: "SelectDropdown__SelectMain",
+  componentId: "sc-hnkdye-1"
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    display: block;\n    user-select: none;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: block;\n    user-select: none;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge);
+var Indicator = styled.span.withConfig({
+  displayName: "SelectDropdown__Indicator",
+  componentId: "sc-hnkdye-2"
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    display: block;\n    pointer-events: none;\n"], ["\n    display: block;\n    pointer-events: none;\n"])));
+var Flyout = styled.ul.withConfig({
+  displayName: "SelectDropdown__Flyout",
+  componentId: "sc-hnkdye-3"
+})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n    list-style: none;\n    padding: 0 !important;\n    margin: 0 !important;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 2;\n\n    display: ", ";\n    background: ", ";\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    max-height: 300px;\n    overflow-y: auto;\n    scrollbar-width: none;\n\n    outline: ", ";\n    outline-offset: 0;\n\n    ::-webkit-scrollbar {\n        -webkit-appearance: none;\n        width: 14px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        border-radius: 8px;\n        background-color: ", ";\n        border: 4px solid rgba(0, 0, 0, 0);\n        background-clip: padding-box;\n    }\n"], ["\n    list-style: none;\n    padding: 0 !important;\n    margin: 0 !important;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 2;\n\n    display: ", ";\n    background: ", ";\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    max-height: 300px;\n    overflow-y: auto;\n    scrollbar-width: none;\n\n    outline: ", ";\n    outline-offset: 0;\n\n    ::-webkit-scrollbar {\n        -webkit-appearance: none;\n        width: 14px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        border-radius: 8px;\n        background-color: ", ";\n        border: 4px solid rgba(0, 0, 0, 0);\n        background-clip: padding-box;\n    }\n"])), function (_a) {
+  var isVisible = _a.isVisible;
+  return isVisible ? 'block' : 'none';
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.light;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.dark;
+}, function (_a) {
+  var theme = _a.theme;
+  return getGlobals(theme).sections.edgeRadius;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return "1px solid ".concat(isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.medium;
+});
+var ItemStyle = styled.li.withConfig({
+  displayName: "SelectDropdown__ItemStyle",
+  componentId: "sc-hnkdye-4"
+})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n    padding: ", "px;\n    width: 100%;\n    cursor: pointer;\n    position: relative;\n"], ["\n    padding: ", "px;\n    width: 100%;\n    cursor: pointer;\n    position: relative;\n"])), spacings.nudge);
+var Item = styled(Copy).withConfig({
+  displayName: "SelectDropdown__Item",
+  componentId: "sc-hnkdye-5"
+})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n    z-index: 0;\n\n    @media (hover: hover) and (pointer: fine) {\n        ", ":hover & {\n            &:before {\n                content: '';\n                background: ", ";\n                opacity: 0.25;\n                display: block;\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                right: 0;\n                left: 0;\n                z-index: -1;\n            }\n        }\n    }\n\n    ", "\n"], ["\n    z-index: 0;\n\n    @media (hover: hover) and (pointer: fine) {\n        ", ":hover & {\n            &:before {\n                content: '';\n                background: ", ";\n                opacity: 0.25;\n                display: block;\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                right: 0;\n                left: 0;\n                z-index: -1;\n            }\n        }\n    }\n\n    ", "\n"])), ItemStyle, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.hover;
+}, function (_a) {
+  var isSelected = _a.isSelected;
+  return isSelected && css(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n            &:before {\n                content: '';\n                background: ", ";\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                right: 0;\n                left: 0;\n\n                z-index: -1;\n            }\n        "], ["\n            &:before {\n                content: '';\n                background: ", ";\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                right: 0;\n                left: 0;\n\n                z-index: -1;\n            }\n        "])), function (_a) {
+    var theme = _a.theme;
+    return getColors(theme).primary.default;
+  });
+});
+var ClearItem = styled(Item).withConfig({
+  displayName: "SelectDropdown__ClearItem",
+  componentId: "sc-hnkdye-6"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    color: transparent;\n"], ["\n    color: transparent;\n"])));
+var Container = styled.div.withConfig({
+  displayName: "SelectDropdown__Container",
+  componentId: "sc-hnkdye-7"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    position: relative;\n    outline: none;\n"], ["\n    position: relative;\n    outline: none;\n"])));
+
+var SelectDropdown = function (_a) {
+  var label = _a.label,
+      isRequired = _a.isRequired,
+      errorMessage = _a.errorMessage,
+      infoMessage = _a.infoMessage,
+      isDisabled = _a.isDisabled,
+      isInverted = _a.isInverted,
+      items = _a.items,
+      name = _a.name,
+      selectedItem = _a.selectedItem,
+      placeholder = _a.placeholder,
+      onChange = _a.onChange,
+      onBlur = _a.onBlur,
+      indicator = _a.indicator;
+  var colors = useLibTheme().colors;
+
+  var _b = useState(false),
+      isOpen = _b[0],
+      setIsOpen = _b[1];
+
+  var _c = useState((items === null || items === void 0 ? void 0 : items.findIndex(function (item) {
+    return item.label === selectedItem;
+  })) || -1),
+      activeItemIndex = _c[0],
+      setActiveItemIndex = _c[1];
+
+  var _d = useState(items || []),
+      selectItems = _d[0],
+      setSelectItems = _d[1];
+
+  var selectBtnRef = useRef(null);
+  var isMounted = useMounted();
+  var itemHasBeenClicked = useRef(false);
+  useEffect(function () {
+    var index = items === null || items === void 0 ? void 0 : items.findIndex(function (item) {
+      return item.label === selectedItem;
+    });
+    if (index !== -1) setActiveItemIndex(index);
+    setSelectItems(items || []);
+  }, [items, selectedItem]);
+  useEffect(function () {
+    var newItem = selectItems[activeItemIndex];
+
+    if (isMounted) {
+      onChange && onChange(newItem === null || newItem === void 0 ? void 0 : newItem.label, newItem === null || newItem === void 0 ? void 0 : newItem.value);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [selectItems, activeItemIndex, selectedItem]);
+
+  if (isDisabled) {
+    errorMessage = '';
+  }
+
+  var activeItem = useMemo(function () {
+    return activeItemIndex >= 0 && activeItemIndex < selectItems.length ? selectItems[activeItemIndex] : undefined;
+  }, [activeItemIndex, selectItems]);
+  return React__default.createElement(FieldWrapper$1.View, {
+    isDisabled: isDisabled
+  }, React__default.createElement(FieldWrapper$1.Head, {
+    label: label,
+    isRequired: isRequired,
+    isInverted: isInverted
+  }), React__default.createElement(FieldWrapper$1.Content, null, React__default.createElement(Container, null, React__default.createElement(Select, {
+    ref: selectBtnRef,
+    type: "button",
+    "aria-label": (activeItem === null || activeItem === void 0 ? void 0 : activeItem.label) || placeholder || 'Select item',
+    isOpen: isOpen,
+    isInverted: isInverted,
+    isSelected: !!activeItem,
+    hasError: !!errorMessage,
+    onClick: function () {
+      setIsOpen(function (prev) {
+        return !prev;
+      });
+    },
+    onBlur: function () {
+      if (!itemHasBeenClicked.current) {
+        setIsOpen(false);
+        onBlur && onBlur();
+      }
+    },
+    onKeyDown: function (ev) {
+      if (ev.key === 'ArrowDown') {
+        ev.preventDefault();
+        setIsOpen(true);
+
+        if (isOpen && selectItems[activeItemIndex + 1]) {
+          setActiveItemIndex(function (prev) {
+            return prev + 1;
+          });
+        }
+      } else if (ev.key === 'ArrowUp') {
+        ev.preventDefault();
+        setIsOpen(true);
+
+        if (isOpen && selectItems[activeItemIndex - 1]) {
+          setActiveItemIndex(function (prev) {
+            return prev - 1;
+          });
+        }
+      }
+    }
+  }, React__default.createElement(SelectMain, null, (activeItem === null || activeItem === void 0 ? void 0 : activeItem.label) || placeholder), React__default.createElement(Indicator, null, indicator && indicator({
+    isOpen: isOpen,
+    isDisabled: isDisabled
+  }), !indicator && (isOpen ? React__default.createElement(AngleUp, {
+    iconColor: isDisabled ? colors.elementBg.medium : colors.elementBg.dark
+  }) : React__default.createElement(AngleDown, {
+    iconColor: isDisabled ? colors.elementBg.medium : colors.elementBg.dark
+  })))), React__default.createElement(Flyout, {
+    isVisible: isOpen
+  }, isValidArray(items, false) && React__default.createElement(ItemStyle, {
+    key: "key_0",
+    onMouseDown: function () {
+      itemHasBeenClicked.current = true;
+    },
+    onClick: function (ev) {
+      var _a;
+
+      ev.preventDefault(); // set new item
+
+      setActiveItemIndex(-1); // set focus back to toggle
+
+      (_a = selectBtnRef.current) === null || _a === void 0 ? void 0 : _a.focus(); // close flyout
+
+      setIsOpen(false);
+      itemHasBeenClicked.current = false;
+    }
+  }, React__default.createElement(ClearItem, {
+    renderAs: "span",
+    size: "small"
+  }, "Clear")), items.map(function (item, i) {
+    return React__default.createElement(ItemStyle, {
+      key: "key_".concat(i + 1),
+      onMouseDown: function () {
+        itemHasBeenClicked.current = true;
+      },
+      onClick: function (ev) {
+        var _a;
+
+        ev.preventDefault(); // set new item
+
+        setActiveItemIndex(i); // set focus back to toggle
+
+        (_a = selectBtnRef.current) === null || _a === void 0 ? void 0 : _a.focus(); // close flyout
+
+        setIsOpen(false);
+        itemHasBeenClicked.current = false;
+      }
+    }, React__default.createElement(Item, {
+      renderAs: "span",
+      isSelected: i === activeItemIndex,
+      size: "small",
+      textColor: i === activeItemIndex ? colors.elementBg.light : colors.elementBg.dark
+    }, item.label));
+  }))), activeItem && React__default.createElement("input", {
+    type: "hidden",
+    name: name,
+    value: JSON.stringify(activeItem.value)
+  })), React__default.createElement(FieldWrapper$1.Messages, {
+    infoMessage: infoMessage,
+    errorMessage: errorMessage,
+    isInverted: isInverted
+  }));
+};
+/**
+ * Function to compare both field prop states
+ * @param prev Previous props
+ * @param next Next props
+ * @returns
+ */
+
+
+var areEqual$1 = function (prev, next) {
+  // only apply logic if memo functionality is enabled
+  if (!prev.enableMemo) return false;
+  if (prev.selectedItem !== next.selectedItem) return false;
+  if (prev.errorMessage !== next.errorMessage) return false;
+  if (prev.infoMessage !== next.infoMessage) return false;
+  if (prev.label !== next.label) return false;
+  if (prev.placeholder !== next.placeholder) return false; // compare items
+
+  if (prev.items.length !== next.items.length) return false;
+
+  for (var i = 0; i < prev.items.length; i++) {
+    if (prev.items[i].label !== next.items[i].label || prev.items[i].value !== next.items[i].value) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+var SelectDropdown$1 = React__default.memo(SelectDropdown, areEqual$1);
+var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8, templateObject_9;
+
+var FieldView = styled(FieldWrapper$1.View).withConfig({
+  displayName: "FileUpload__FieldView",
+  componentId: "sc-8g38v4-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    pointer-events: none;\n"], ["\n    pointer-events: none;\n"])));
+var FieldMain = styled.div.withConfig({
+  displayName: "FileUpload__FieldMain",
+  componentId: "sc-8g38v4-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    outline: none;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n\n    border-radius: 0px;\n    -webkit-appearance: none;\n    background: none;\n\n    padding: 0 ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    color: ", ";\n\n    &:focus-within {\n        outline: ", ";\n        outline-offset: 0;\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    outline: none;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n\n    border-radius: 0px;\n    -webkit-appearance: none;\n    background: none;\n\n    padding: 0 ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    color: ", ";\n\n    &:focus-within {\n        outline: ", ";\n        outline-offset: 0;\n    }\n"])), spacings.nudge, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      hasError = _a.hasError;
+
+  if (isInverted) {
+    return hasError ? getColors(theme).errorInverted : getColors(theme).elementBg.light;
+  }
+
+  return hasError ? getColors(theme).error : getColors(theme).elementBg.dark;
+}, function (_a) {
+  var theme = _a.theme;
+  return getGlobals(theme).sections.edgeRadius;
+}, copyStyle('copy', 'small'), function (_a) {
+  var theme = _a.theme;
+  return withRange(getFormFieldTextSize(theme), 'font-size');
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getFonts(theme).copy.small.colorInverted : getFonts(theme).copy.small.color;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return "1px solid ".concat(isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
+});
+var FileItem = styled.div.withConfig({
+  displayName: "FileUpload__FileItem",
+  componentId: "sc-8g38v4-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    padding: ", "px 0;\n    width: 100%;\n\n    * + & {\n        border-top: 1px dashed\n            ", ";\n    }\n\n    & > span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    padding: ", "px 0;\n    width: 100%;\n\n    * + & {\n        border-top: 1px dashed\n            ", ";\n    }\n\n    & > span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n"])), copyStyle('copy', 'small'), function (_a) {
+  var theme = _a.theme;
+  return withRange(getFormFieldTextSize(theme), 'font-size');
+}, spacings.nudge, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.dark;
+});
+var UploadItem = styled.button.withConfig({
+  displayName: "FileUpload__UploadItem",
+  componentId: "sc-8g38v4-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    padding: ", "px 0;\n    background: none;\n    outline: none;\n    border: none;\n\n    width: 100%;\n    cursor: pointer;\n    pointer-events: all;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    * + & {\n        border-top: 1px dashed\n            ", ";\n    }\n\n    & > span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    &:focus {\n        text-decoration: underline;\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    padding: ", "px 0;\n    background: none;\n    outline: none;\n    border: none;\n\n    width: 100%;\n    cursor: pointer;\n    pointer-events: all;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    * + & {\n        border-top: 1px dashed\n            ", ";\n    }\n\n    & > span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    &:focus {\n        text-decoration: underline;\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n    }\n"])), spacings.nudge, copyStyle('copy', 'small'), function (_a) {
+  var theme = _a.theme;
+  return withRange(getFormFieldTextSize(theme), 'font-size');
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).text.subtileInverted : getColors(theme).text.subtile;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.dark;
+});
+var Icon = styled.span.withConfig({
+  displayName: "FileUpload__Icon",
+  componentId: "sc-8g38v4-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    height: 100%;\n    min-width: 24px;\n    margin-left: auto;\n\n    color: ", ";\n\n    pointer-events: none;\n\n    & > * {\n        height: 20px;\n    }\n"], ["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    height: 100%;\n    min-width: 24px;\n    margin-left: auto;\n\n    color: ", ";\n\n    pointer-events: none;\n\n    & > * {\n        height: 20px;\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getFonts(theme).copy.small.colorInverted : getFonts(theme).copy.small.color;
+});
+var DeleteIcon = styled.button.withConfig({
+  displayName: "FileUpload__DeleteIcon",
+  componentId: "sc-8g38v4-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    height: 100%;\n    min-width: 24px;\n    margin-left: auto;\n\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    pointer-events: all;\n\n    color: ", ";\n\n    transition: opacity 0.2s ease-in-out;\n\n    & > * {\n        height: 20px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.8;\n        }\n    }\n\n    &:focus {\n        outline: solid 2px\n            ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    height: 100%;\n    min-width: 24px;\n    margin-left: auto;\n\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    pointer-events: all;\n\n    color: ", ";\n\n    transition: opacity 0.2s ease-in-out;\n\n    & > * {\n        height: 20px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.8;\n        }\n    }\n\n    &:focus {\n        outline: solid 2px\n            ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getFonts(theme).copy.small.colorInverted : getFonts(theme).copy.small.color;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+});
+var Original = styled.input.withConfig({
+  displayName: "FileUpload__Original",
+  componentId: "sc-8g38v4-6"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
+
+var readFileAsync = function (file, uid) {
+  return new Promise(function (resolve) {
+    resolve({
+      uid: uid,
+      type: file.type,
+      url: file.name,
+      isUploading: true
+    });
+    var reader = new FileReader();
+
+    reader.onload = function () {
+      resolve({
+        uid: uid,
+        type: file.type,
+        url: file.name,
+        isUploading: true
+      });
+    };
+
+    reader.readAsDataURL(file);
+  });
+};
+
+var FileUpload = function (_a) {
+  var onUploadFiles = _a.onUploadFiles,
+      label = _a.label,
+      isInverted = _a.isInverted,
+      isDisabled = _a.isDisabled,
+      isRequired = _a.isRequired,
+      infoMessage = _a.infoMessage,
+      errorMessage = _a.errorMessage,
+      acceptedFormats = _a.acceptedFormats,
+      uploadLabel = _a.uploadLabel,
+      customDeleteIcon = _a.customDeleteIcon,
+      customUploadIcon = _a.customUploadIcon;
+
+  var _b = useState([]),
+      selectedFiles = _b[0],
+      setSelectedFiles = _b[1];
+
+  var fileInputRef = useRef(null);
+
+  var _c = useState([]),
+      previews = _c[0],
+      setPreviews = _c[1];
+
+  if (isDisabled) {
+    errorMessage = '';
+  }
+
+  useEffect(function () {
+    if (selectedFiles) {
+      onUploadFiles && onUploadFiles(selectedFiles.map(function (f) {
+        return f.data;
+      }));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [selectedFiles]);
+
+  var handleClick = function (ev) {
+    var _a;
+
+    ev.preventDefault();
+    (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+  };
+
+  var handleChange = function (e) {
+    if (!e.currentTarget.files) return;
+    var newFiles = Array.from(e.currentTarget.files).map(function (f, i) {
+      return {
+        uid: "".concat(new Date().getTime().toString(), "_").concat(i),
+        data: f
+      };
+    });
+    var promises = newFiles.map(function (file) {
+      return readFileAsync(file.data, file.uid);
+    });
+    Promise.all(promises).then(function (p) {
+      setPreviews(function (prev) {
+        return __spreadArray(__spreadArray([], prev, true), p, true);
+      });
+    });
+    setSelectedFiles(function (prev) {
+      return __spreadArray(__spreadArray([], prev, true), newFiles, true);
+    });
+  };
+
+  var handleDelete = function (preview) {
+    return function (ev) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      if (!fileInputRef.current) return;
+      fileInputRef.current.value = ''; // remove element from previews
+
+      setPreviews(function (prev) {
+        var index = prev.findIndex(function (p) {
+          return p.uid === preview.uid;
+        });
+        if (index < 0) return prev;
+
+        var copy = __spreadArray([], prev, true);
+
+        copy.splice(index, 1);
+        return copy;
+      }); // remove alement from selected files
+
+      setSelectedFiles(function (prev) {
+        var index = prev.findIndex(function (p) {
+          return p.uid === preview.uid;
+        });
+        if (index < 0) return prev;
+
+        var copy = __spreadArray([], prev, true);
+
+        copy.splice(index, 1);
+        return copy;
+      });
+    };
+  };
+
+  return React__default.createElement(FieldView, {
+    isDisabled: isDisabled
+  }, React__default.createElement(FieldWrapper$1.Head, {
+    label: label,
+    isRequired: isRequired,
+    isInverted: isInverted
+  }), React__default.createElement(FieldWrapper$1.Content, null, React__default.createElement(FieldMain, {
+    isInverted: isInverted,
+    isDisabled: isDisabled,
+    hasError: !!errorMessage
+  }, previews.map(function (file) {
+    var fileName = file.url && file.url.split('/') || [];
+    return React__default.createElement(FileItem, {
+      key: file.uid,
+      isInverted: isInverted
+    }, React__default.createElement("span", null, fileName), React__default.createElement(DeleteIcon, {
+      "aria-label": "remove file",
+      type: "button",
+      isInverted: isInverted,
+      onClick: handleDelete(file)
+    }, customDeleteIcon ? customDeleteIcon(isInverted) : React__default.createElement(DeleteForever, null)));
+  }), React__default.createElement(UploadItem, {
+    type: "button",
+    isInverted: isInverted,
+    onClick: handleClick
+  }, uploadLabel && React__default.createElement("span", null, uploadLabel), React__default.createElement(Icon, {
+    isInverted: isInverted
+  }, customUploadIcon ? customUploadIcon(isInverted) : React__default.createElement(UploadFile, null)))), React__default.createElement(Original, {
+    type: "file",
+    onChange: handleChange,
+    ref: fileInputRef,
+    multiple: true,
+    required: isRequired,
+    disabled: isDisabled,
+    accept: acceptedFormats
+  })), React__default.createElement(FieldWrapper$1.Messages, {
+    infoMessage: infoMessage,
+    errorMessage: errorMessage,
+    isInverted: isInverted
+  }));
+};
+/**
+ * Function to compare both field prop states
+ * @param prev Previous props
+ * @param next Next props
+ * @returns
+ */
+
+
+var areEqual = function (prev, next) {
+  // only apply logic if memo functionality is enabled
+  if (!prev.enableMemo) return false;
+  if (prev.errorMessage !== next.errorMessage) return false;
+  if (prev.infoMessage !== next.infoMessage) return false;
+  if (prev.label !== next.label) return false;
+  return true;
+};
+
+var FileUploadCmp = React__default.memo(FileUpload, areEqual);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+export { DatepickerCmp as D, FieldWrapper$1 as F, LocationField$1 as L, RadioButton$1 as R, SelectDropdown$1 as S, Textarea$1 as T, Textfield$1 as a, FileUploadCmp as b };
+//# sourceMappingURL=FileUpload-851d473a.js.map