@gympass/yoga 7.87.1 → 7.88.1

package/cjs/Datepicker/web/Datepicker.js

@@ -1,315 +1,413 @@
 "use strict";
-
-exports.__esModule = true;
-exports.toUTC = exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _yogaIcons = require("@gympass/yoga-icons");
-
-var _yoga = require("@gympass/yoga");
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _propTypes = require("prop-types");
-
-var _dateFns = require("date-fns");
-
-var _Theme = require("../../Theme");
-
-var _Calendar = _interopRequireDefault(require("./Calendar"));
-
-var _excluded = ["_disabled", "inputFilled"],
-    _excluded2 = ["fullWidth", "type", "placeholder", "startDate", "endDate", "onSelectSingle", "disabled", "onSelectRange", "customOnSelectRange", "disablePastDates", "disableFutureDates", "disablePastFrom", "disableFutureFrom", "error", "onOpen", "displayEndDateOnly"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n  vertical-align: top;\n  width: ", ";\n"])), function (props) {
-  return props.fullWidth ? '100%' : (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n          ", "px\n        "])), _Theme.theme.components.input.width);
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Datepicker_exports = {};
+__export(Datepicker_exports, {
+  default: () => Datepicker_default,
+  toUTC: () => toUTC
 });
-
-var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabled, inputFilled, colors) {
+module.exports = __toCommonJS(Datepicker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_yoga_icons = require("@gympass/yoga-icons");
+var import_styled_components = __toESM(require("styled-components"));
+var import_prop_types = require("prop-types");
+var import_date_fns = require("date-fns");
+var import__ = require("../..");
+var import_Theme = require("../../Theme");
+var import_Calendar = __toESM(require("./Calendar"));
+const Wrapper = import_styled_components.default.div`
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  width: ${(props) => props.fullWidth ? "100%" : import_styled_components.css`
+          ${import_Theme.theme.components.input.width}px
+        `};
+`;
+const getSelectorBorderColor = (open, error, disabled, inputFilled, colors) => {
   if (error) {
     return colors.feedback.attention[1];
   }
-
   if (disabled) {
     return colors.elements.backgroundAndDisabled;
   }
-
   if (open || inputFilled) {
     return colors.secondary;
   }
-
   return colors.elements.lineAndBorders;
 };
-
-var Selector = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var open = _ref.open,
-      error = _ref.error,
-      disabled = _ref.disabled,
-      inputFilled = _ref.inputFilled,
-      _ref$theme$yoga = _ref.theme.yoga,
-      components = _ref$theme$yoga.components,
-      colors = _ref$theme$yoga.colors,
-      spacing = _ref$theme$yoga.spacing;
-  return "\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    box-sizing: border-box;\n    height: " + components.input.height + "px;\n    width: 100%;\n    padding: " + spacing.small + "px;\n    background-color: " + colors.white + ";\n    border-radius: " + components.input.border.radius + "px;\n    border-width: " + components.input.border.width + "px;\n    border-style: solid;\n    border-color: " + getSelectorBorderColor(open, error, disabled, inputFilled, colors) + ";\n    &:hover {\n      border-color: " + colors.secondary + ";\n    }\n  ";
-});
-
-var Input = (0, _styledComponents["default"])(_yoga.Text.Small)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var disabled = _ref2.disabled,
-      colors = _ref2.theme.yoga.colors;
-  return "\n    width: 100%;\n    padding: 0;\n    border: none;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: " + (!disabled ? colors.text.primary : colors.text.disabled) + "\n  ";
-});
-var InputPlaceholder = (0, _styledComponents["default"])(_yoga.Text.Small)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
-  var disabled = _ref3.disabled,
-      colors = _ref3.theme.yoga.colors;
-  return "\n    color: " + (!disabled ? colors.text.secondary : colors.text.disabled) + "\n  ";
-});
-
-var TButton = _styledComponents["default"].button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: flex-end;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: none;\n  outline: none;\n  background-color: transparent;\n  cursor: pointer;\n"])));
-
-var Panel = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref4) {
-  var _ref4$theme$yoga = _ref4.theme.yoga,
-      components = _ref4$theme$yoga.components,
-      colors = _ref4$theme$yoga.colors,
-      radii = _ref4$theme$yoga.radii,
-      borders = _ref4$theme$yoga.borders,
-      spacing = _ref4$theme$yoga.spacing;
-  return "\n    position: absolute;\n    background-color: " + colors.white + ";\n    border: " + borders.small + "px solid " + colors.elements.lineAndBorders + ";\n    z-index: 1;\n    width: " + components.input.width + "px;\n    left: 0;\n    border-radius: " + radii.regular + "px;\n    margin-top: " + spacing.xxsmall + "px;\n  ";
-});
-
-var CalendarIcon = (0, _styledComponents["default"])(function (_ref5) {
-  var _disabled = _ref5._disabled,
-      inputFilled = _ref5.inputFilled,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded);
-
-  return !inputFilled ? /*#__PURE__*/_react["default"].createElement(_yogaIcons.Booking, _extends({
-    width: 20,
-    height: 20
-  }, props)) : /*#__PURE__*/_react["default"].createElement(_yogaIcons.BookingFilled, _extends({
-    width: 20,
-    height: 20
-  }, props));
-})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref6) {
-  var disabled = _ref6.disabled,
-      _ref6$theme$yoga = _ref6.theme.yoga,
-      colors = _ref6$theme$yoga.colors,
-      spacing = _ref6$theme$yoga.spacing;
-  return "\n    fill: " + (disabled ? colors.text.disabled : colors.text.primary) + ";\n    margin-right: " + spacing.xxsmall + "px;\n  ";
-});
-var ErrorWrapper = (0, _styledComponents["default"])(_yoga.Text.Small)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref7) {
-  var _ref7$theme$yoga = _ref7.theme.yoga,
-      colors = _ref7$theme$yoga.colors,
-      components = _ref7$theme$yoga.components;
-  return "\n    margin-top: " + components.input.helper.margin.top + "px;\n    font-size: " + components.input.helper.font.size + "px;\n    color: " + colors.feedback.attention[1] + ";\n    position: absolute;\n  ";
-});
-
-var toUTC = function toUTC(date) {
+const Selector = import_styled_components.default.div`
+  ${({
+  open,
+  error,
+  disabled,
+  inputFilled,
+  theme: {
+    yoga: { components, colors, spacing }
+  }
+}) => `
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    box-sizing: border-box;
+    height: ${components.input.height}px;
+    width: 100%;
+    padding: ${spacing.small}px;
+    background-color: ${colors.white};
+    border-radius: ${components.input.border.radius}px;
+    border-width: ${components.input.border.width}px;
+    border-style: solid;
+    border-color: ${getSelectorBorderColor(
+  open,
+  error,
+  disabled,
+  inputFilled,
+  colors
+)};
+    &:hover {
+      border-color: ${colors.secondary};
+    }
+  `}
+`;
+const Input = (0, import_styled_components.default)(import__.Text.Small)`
+  ${({
+  disabled,
+  theme: {
+    yoga: { colors }
+  }
+}) => `
+    width: 100%;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: ${!disabled ? colors.text.primary : colors.text.disabled}
+  `}
+`;
+const InputPlaceholder = (0, import_styled_components.default)(import__.Text.Small)`
+  ${({
+  disabled,
+  theme: {
+    yoga: { colors }
+  }
+}) => `
+    color: ${!disabled ? colors.text.secondary : colors.text.disabled}
+  `}
+`;
+const TButton = import_styled_components.default.button`
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-end;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+`;
+const Panel = import_styled_components.default.div`
+  ${({
+  theme: {
+    yoga: { components, colors, radii, borders, spacing }
+  }
+}) => `
+    position: absolute;
+    background-color: ${colors.white};
+    border: ${borders.small}px solid ${colors.elements.lineAndBorders};
+    z-index: 1;
+    width: ${components.input.width}px;
+    left: 0;
+    border-radius: ${radii.regular}px;
+    margin-top: ${spacing.xxsmall}px;
+  `}
+`;
+const CalendarIcon = (0, import_styled_components.default)(
+  (_a) => {
+    var _b = _a, { _disabled, inputFilled } = _b, props = __objRest(_b, ["_disabled", "inputFilled"]);
+    return !inputFilled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.Booking, __spreadValues({ width: 20, height: 20 }, props)) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.BookingFilled, __spreadValues({ width: 20, height: 20 }, props));
+  }
+)`
+  ${({
+  disabled,
+  theme: {
+    yoga: { colors, spacing }
+  }
+}) => `
+    fill: ${disabled ? colors.text.disabled : colors.text.primary};
+    margin-right: ${spacing.xxsmall}px;
+  `}
+`;
+const ErrorWrapper = (0, import_styled_components.default)(import__.Text.Small)`
+  ${({
+  theme: {
+    yoga: { colors, components }
+  }
+}) => `
+    margin-top: ${components.input.helper.margin.top}px;
+    font-size: ${components.input.helper.font.size}px;
+    color: ${colors.feedback.attention[1]};
+    position: absolute;
+  `}
+`;
+const toUTC = (date) => {
   return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
 };
-
-exports.toUTC = toUTC;
-
-function Datepicker(_ref8) {
-  var fullWidth = _ref8.fullWidth,
-      type = _ref8.type,
-      placeholder = _ref8.placeholder,
-      startDate = _ref8.startDate,
-      endDate = _ref8.endDate,
-      onSelectSingle = _ref8.onSelectSingle,
-      disabled = _ref8.disabled,
-      onSelectRange = _ref8.onSelectRange,
-      customOnSelectRange = _ref8.customOnSelectRange,
-      disablePastDates = _ref8.disablePastDates,
-      disableFutureDates = _ref8.disableFutureDates,
-      disablePastFrom = _ref8.disablePastFrom,
-      disableFutureFrom = _ref8.disableFutureFrom,
-      error = _ref8.error,
-      onOpen = _ref8.onOpen,
-      displayEndDateOnly = _ref8.displayEndDateOnly,
-      props = _objectWithoutPropertiesLoose(_ref8, _excluded2);
-
-  var _useState = (0, _react.useState)(),
-      open = _useState[0],
-      setOpen = _useState[1];
-
-  var _useState2 = (0, _react.useState)(startDate),
-      startDateLocal = _useState2[0],
-      setStartDateLocal = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(endDate),
-      endDateLocal = _useState3[0],
-      setEndDateLocal = _useState3[1];
-
-  var ref = (0, _react.useRef)(null);
-
-  var _useState4 = (0, _react.useState)(false),
-      inputFilled = _useState4[0],
-      setInputFilled = _useState4[1];
-
-  var triggerOnOpen = (0, _react.useCallback)(function () {
-    if (onOpen) onOpen(open === 'true');
+function Datepicker(_c) {
+  var _d = _c, {
+    fullWidth,
+    type,
+    placeholder,
+    startDate,
+    endDate,
+    onSelectSingle,
+    disabled,
+    onSelectRange,
+    customOnSelectRange,
+    disablePastDates,
+    disableFutureDates,
+    disablePastFrom,
+    disableFutureFrom,
+    error,
+    onOpen,
+    displayEndDateOnly
+  } = _d, props = __objRest(_d, [
+    "fullWidth",
+    "type",
+    "placeholder",
+    "startDate",
+    "endDate",
+    "onSelectSingle",
+    "disabled",
+    "onSelectRange",
+    "customOnSelectRange",
+    "disablePastDates",
+    "disableFutureDates",
+    "disablePastFrom",
+    "disableFutureFrom",
+    "error",
+    "onOpen",
+    "displayEndDateOnly"
+  ]);
+  const [open, setOpen] = (0, import_react.useState)();
+  const [startDateLocal, setStartDateLocal] = (0, import_react.useState)(startDate);
+  const [endDateLocal, setEndDateLocal] = (0, import_react.useState)(endDate);
+  const ref = (0, import_react.useRef)(null);
+  const [inputFilled, setInputFilled] = (0, import_react.useState)(false);
+  const triggerOnOpen = (0, import_react.useCallback)(() => {
+    if (onOpen)
+      onOpen(open === "true");
   }, [open]);
-
-  var onBlur = function onBlur() {
+  const onBlur = () => {
     setOpen(false.toString());
     triggerOnOpen();
   };
-
-  var checkInputFilled = function checkInputFilled() {
-    if (type === 'range') {
-      if (!customOnSelectRange) setInputFilled(!!(startDateLocal && endDateLocal));else {
+  const checkInputFilled = () => {
+    if (type === "range") {
+      if (!customOnSelectRange)
+        setInputFilled(!!(startDateLocal && endDateLocal));
+      else {
         setInputFilled(startDateLocal && endDateLocal);
       }
     } else {
       setInputFilled(startDate);
     }
   };
-
-  (0, _react.useEffect)(function () {
+  (0, import_react.useEffect)(() => {
     checkInputFilled();
   }, [startDate, startDateLocal, endDateLocal]);
-  (0, _react.useEffect)(function () {
+  (0, import_react.useEffect)(() => {
     setStartDateLocal(startDate);
     setEndDateLocal(endDate);
-
-    if (type === 'single' && startDate) {
+    if (type === "single" && startDate) {
       setOpen(false.toString());
     }
-
-    if ((startDate || endDate) && onSelectRange) onSelectRange(startDate, endDate);
-    if (displayEndDateOnly && !endDate) setInputFilled(false);
+    if ((startDate || endDate) && onSelectRange)
+      onSelectRange(startDate, endDate);
+    if (displayEndDateOnly && !endDate)
+      setInputFilled(false);
   }, [startDate, endDate, type]);
-
-  var onDateSingleSelect = function onDateSingleSelect(startLocal) {
+  const onDateSingleSelect = (startLocal) => {
     onSelectSingle(startLocal);
   };
-
-  (0, _react.useEffect)(function () {
-    if (open === 'true') ref.current.focus();
+  (0, import_react.useEffect)(() => {
+    if (open === "true")
+      ref.current.focus();
   }, [open]);
-
-  var onDateRangeSelect = function onDateRangeSelect(selectedDate) {
+  const onDateRangeSelect = (selectedDate) => {
     if (customOnSelectRange) {
       customOnSelectRange(selectedDate);
       return;
     }
-
-    var onSelectRangeCallback = function onSelectRangeCallback(start, end) {
+    const onSelectRangeCallback = (start, end) => {
       if (onSelectRange) {
         onSelectRange(start, end);
       }
     };
-
     if (!startDateLocal || startDateLocal > selectedDate && !endDateLocal || endDateLocal) {
       setStartDateLocal(selectedDate);
-      if (endDateLocal) setEndDateLocal(undefined);
-      onSelectRangeCallback(selectedDate, undefined);
+      if (endDateLocal)
+        setEndDateLocal(void 0);
+      onSelectRangeCallback(selectedDate, void 0);
     } else {
       setEndDateLocal(selectedDate);
       onSelectRangeCallback(startDateLocal, selectedDate);
     }
   };
-
-  var renderInput = function renderInput(start, end) {
+  const renderInput = (start, end) => {
     if (!start && !end || displayEndDateOnly && !end) {
-      return /*#__PURE__*/_react["default"].createElement(InputPlaceholder, {
-        disabled: disabled
-      }, placeholder != null ? placeholder : "Select Date");
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputPlaceholder, { disabled, children: placeholder != null ? placeholder : `Select Date` });
     }
-
-    var dateFormat = 'MMM d, yyyy';
-    if (displayEndDateOnly) return /*#__PURE__*/_react["default"].createElement(Input, {
-      disabled: disabled
-    }, end && (0, _dateFns.format)(toUTC(end), dateFormat));
-    return start && /*#__PURE__*/_react["default"].createElement(Input, {
-      disabled: disabled
-    }, (0, _dateFns.format)(toUTC(start), dateFormat), end && " - " + (0, _dateFns.format)(toUTC(end), dateFormat));
+    const dateFormat = "MMM d, yyyy";
+    if (displayEndDateOnly)
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, { disabled, children: end && (0, import_date_fns.format)(toUTC(end), dateFormat) });
+    return start && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Input, { disabled, children: [
+      (0, import_date_fns.format)(toUTC(start), dateFormat),
+      end && ` - ${(0, import_date_fns.format)(toUTC(end), dateFormat)}`
+    ] });
   };
-
-  return /*#__PURE__*/_react["default"].createElement(Wrapper, _extends({
-    fullWidth: fullWidth,
-    tabIndex: "0"
-  }, props), /*#__PURE__*/_react["default"].createElement(Selector, {
-    open: open === 'true',
-    disabled: disabled,
-    error: error,
-    inputFilled: inputFilled
-  }, renderInput(type === 'range' && !customOnSelectRange ? startDateLocal : startDate, type === 'range' && !customOnSelectRange ? endDateLocal : endDate), /*#__PURE__*/_react["default"].createElement(TButton, {
-    onClick: function onClick() {
-      if (!disabled) {
-        setOpen((open !== 'true').toString());
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, __spreadProps(__spreadValues({ fullWidth, tabIndex: "0" }, props), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      Selector,
+      {
+        open: open === "true",
+        disabled,
+        error,
+        inputFilled,
+        children: [
+          renderInput(
+            type === "range" && !customOnSelectRange ? startDateLocal : startDate,
+            type === "range" && !customOnSelectRange ? endDateLocal : endDate
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            TButton,
+            {
+              onClick: () => {
+                if (!disabled) {
+                  setOpen((open !== "true").toString());
+                }
+                triggerOnOpen();
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { disabled, inputFilled })
+            }
+          )
+        ]
       }
-
-      triggerOnOpen();
-    }
-  }, /*#__PURE__*/_react["default"].createElement(CalendarIcon, {
-    disabled: disabled,
-    inputFilled: inputFilled
-  }))), error && /*#__PURE__*/_react["default"].createElement(ErrorWrapper, null, error), open === 'true' && /*#__PURE__*/_react["default"].createElement(Panel, {
-    tabIndex: -1,
-    ref: ref,
-    onBlur: onBlur
-  }, /*#__PURE__*/_react["default"].createElement(_Calendar["default"], {
-    type: type,
-    startDate: startDateLocal,
-    endDate: endDateLocal,
-    onSelectSingle: onDateSingleSelect,
-    onSelectRange: onDateRangeSelect,
-    disablePastDates: disablePastDates,
-    disableFutureDates: disableFutureDates,
-    disablePastFrom: disablePastFrom,
-    disableFutureFrom: disableFutureFrom
-  })));
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorWrapper, { children: error }),
+    open === "true" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Panel, { tabIndex: -1, ref, onBlur, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Calendar.default,
+      {
+        type,
+        startDate: startDateLocal,
+        endDate: endDateLocal,
+        onSelectSingle: onDateSingleSelect,
+        onSelectRange: onDateRangeSelect,
+        disablePastDates,
+        disableFutureDates,
+        disablePastFrom,
+        disableFutureFrom
+      }
+    ) })
+  ] }));
 }
-
 Datepicker.propTypes = {
-  fullWidth: _propTypes.bool,
-  type: (0, _propTypes.oneOf)(['single', 'range']).isRequired,
-  placeholder: _propTypes.string,
-  startDate: (0, _propTypes.instanceOf)(Date),
-  endDate: (0, _propTypes.instanceOf)(Date),
-  disabled: _propTypes.bool,
-  onSelectSingle: _propTypes.func,
-  onSelectRange: _propTypes.func,
-  customOnSelectRange: _propTypes.func,
-  disablePastDates: _propTypes.bool,
-  disableFutureDates: _propTypes.bool,
-  disablePastFrom: (0, _propTypes.instanceOf)(Date),
-  disableFutureFrom: (0, _propTypes.instanceOf)(Date),
-  error: _propTypes.string,
-  onOpen: _propTypes.func,
-  displayEndDateOnly: _propTypes.bool
+  fullWidth: import_prop_types.bool,
+  type: (0, import_prop_types.oneOf)(["single", "range"]).isRequired,
+  placeholder: import_prop_types.string,
+  startDate: (0, import_prop_types.instanceOf)(Date),
+  endDate: (0, import_prop_types.instanceOf)(Date),
+  disabled: import_prop_types.bool,
+  onSelectSingle: import_prop_types.func,
+  onSelectRange: import_prop_types.func,
+  customOnSelectRange: import_prop_types.func,
+  disablePastDates: import_prop_types.bool,
+  disableFutureDates: import_prop_types.bool,
+  disablePastFrom: (0, import_prop_types.instanceOf)(Date),
+  disableFutureFrom: (0, import_prop_types.instanceOf)(Date),
+  error: import_prop_types.string,
+  onOpen: import_prop_types.func,
+  displayEndDateOnly: import_prop_types.bool
 };
 Datepicker.defaultProps = {
   fullWidth: false,
-  placeholder: undefined,
-  startDate: undefined,
-  endDate: undefined,
+  placeholder: void 0,
+  startDate: void 0,
+  endDate: void 0,
   disabled: false,
-  onSelectSingle: undefined,
-  onSelectRange: undefined,
-  customOnSelectRange: undefined,
+  onSelectSingle: void 0,
+  onSelectRange: void 0,
+  customOnSelectRange: void 0,
   disablePastDates: false,
   disableFutureDates: false,
-  disablePastFrom: undefined,
-  disableFutureFrom: undefined,
-  error: undefined,
-  onOpen: undefined,
+  disablePastFrom: void 0,
+  disableFutureFrom: void 0,
+  error: void 0,
+  onOpen: void 0,
   displayEndDateOnly: false
 };
-var _default = Datepicker;
-exports["default"] = _default;
+var Datepicker_default = Datepicker;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  toUTC
+});