@cashub/ui-elv 1.0.0

package/chart/utils/yAxisTopTitlePlugin.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactChartjs = require("react-chartjs-2");
+const yAxisTopTitlePlugin = {
+  id: 'yAxisTopTitle',
+  afterDraw(chart) {
+    const {
+      options
+    } = chart.config;
+    const config = options.plugins.yAxisTopTitle;
+    if (!config || !config.title) {
+      return;
+    }
+    const {
+      title
+    } = config;
+    const {
+      ctx,
+      chartArea,
+      scales
+    } = chart;
+    const yScale = scales.y;
+    if (!yScale) {
+      return;
+    }
+    ctx.save();
+    const {
+      font,
+      color
+    } = _reactChartjs.defaults;
+    const {
+      family,
+      size
+    } = font;
+    ctx.font = `bold ${size}px ${family}`;
+    ctx.fillStyle = color;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    const x = yScale.left;
+    const y = chartArea.top - 24;
+    ctx.fillText(title, x, y);
+    ctx.restore();
+  }
+};
+var _default = exports.default = yAxisTopTitlePlugin;

package/container/FlexContainer.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const FlexContainer = _styledComponents.default.div`
+  display: flex;
+
+  ${_ref => {
+  let {
+    marginBottom
+  } = _ref;
+  return marginBottom && 'margin-bottom: var(--spacing-l)';
+}};
+
+  ${_ref2 => {
+  let {
+    wrap
+  } = _ref2;
+  return wrap && 'flex-wrap: wrap';
+}};
+
+  ${_ref3 => {
+  let {
+    alignCenter
+  } = _ref3;
+  return alignCenter && 'align-items: center;';
+}}
+
+  ${_ref4 => {
+  let {
+    spaceBetween
+  } = _ref4;
+  return spaceBetween && 'justify-content: space-between;';
+}}
+`;
+var _default = exports.default = FlexContainer;

package/container/index.js

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

package/cropper/Cropper.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+require("cropperjs/dist/cropper.css");
+var _cropperjs = _interopRequireDefault(require("cropperjs"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CropperWrapper = _ref => {
+  let {
+    src,
+    alt = 'picture',
+    width,
+    height,
+    cropBoxResizable = false,
+    onInitialized,
+    dragMode = 'move'
+  } = _ref;
+  const imageRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const node = imageRef.current;
+    if (node !== null) {
+      const cropper = new _cropperjs.default(node, {
+        dragMode,
+        viewMode: 1,
+        initialAspectRatio: 9 / 16,
+        background: true,
+        cropBoxResizable,
+        data: {
+          width,
+          height
+        }
+      });
+      if (onInitialized) {
+        onInitialized(cropper);
+      }
+    }
+    return () => {
+      node?.cropper?.destroy();
+    };
+  }, [onInitialized, dragMode, width, height, cropBoxResizable]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: src,
+      alt: alt,
+      ref: imageRef,
+      crossOrigin: "anonymous"
+    })
+  });
+};
+var _default = exports.default = CropperWrapper;

package/cropper/CropperModalHandler.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _TitleModal = _interopRequireDefault(require("../modal/TitleModal"));
+var _CropImageModal = _interopRequireDefault(require("./subComponent/CropImageModal"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CropperModalHandler = _ref => {
+  let {
+    src,
+    file,
+    width,
+    height,
+    cropBoxResizable = false,
+    onCrop,
+    onClose
+  } = _ref;
+  (0, _TitleModal.default)({
+    size: 'normal',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CropImageModal.default, {
+      src: src,
+      mime: file.type,
+      alt: file.name,
+      file: file,
+      width: width,
+      height: height,
+      cropBoxResizable: cropBoxResizable,
+      onCrop: onCrop,
+      onClose: onClose
+    }),
+    onClose: dismiss => {
+      if (dismiss === true && onClose) {
+        onClose();
+      }
+    }
+  });
+};
+var _default = exports.default = CropperModalHandler;

package/cropper/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Cropper", {
+  enumerable: true,
+  get: function () {
+    return _Cropper.default;
+  }
+});
+Object.defineProperty(exports, "CropperModalHandler", {
+  enumerable: true,
+  get: function () {
+    return _CropperModalHandler.default;
+  }
+});
+var _Cropper = _interopRequireDefault(require("./Cropper"));
+var _CropperModalHandler = _interopRequireDefault(require("./CropperModalHandler"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/cropper/subComponent/CropImageModal.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactI18next = require("react-i18next");
+var _utils = require("@cashub/utils");
+var _Cropper = _interopRequireDefault(require("../Cropper"));
+var _Button = _interopRequireDefault(require("../../button/Button"));
+var _ButtonGroup = _interopRequireDefault(require("../../button/ButtonGroup"));
+var _TitleModal = _interopRequireDefault(require("../../modal/TitleModal"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CropImageModal = _ref => {
+  let {
+    src,
+    mime,
+    alt,
+    width,
+    height,
+    cropBoxResizable = false,
+    onCrop,
+    onClose,
+    close
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const [instance, setIntance] = (0, _react.useState)(null);
+  const [resizedImage, setResizedImage] = (0, _react.useState)(null);
+  const handleCrop = (0, _react.useCallback)(() => {
+    onCrop(instance.getCroppedCanvas().toDataURL());
+    close();
+  }, [onCrop, instance, close]);
+  const handleInitialized = (0, _react.useCallback)(instance => {
+    setIntance(instance);
+  }, []);
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+    close();
+  };
+  (0, _react.useEffect)(() => {
+    (0, _utils.resizeImage)(src, mime, width > height ? width : height, 'cover', resizedImageUrl => {
+      setResizedImage(resizedImageUrl);
+    });
+  }, [src, mime, height, width]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TitleModal.default.Header, {
+      handleClose: handleClose,
+      children: t('CropImage')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TitleModal.default.Body, {
+      children: resizedImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cropper.default, {
+        src: resizedImage,
+        alt: alt,
+        width: width,
+        height: height,
+        cropBoxResizable: cropBoxResizable,
+        onInitialized: handleInitialized
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TitleModal.default.Footer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          danger: true,
+          onClick: handleClose,
+          children: t('button:Cancel')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          success: true,
+          onClick: handleCrop,
+          children: t('button:Confirm')
+        })]
+      })
+    })]
+  });
+};
+var _default = exports.default = CropImageModal;

package/datetimePicker/DatePicker.js

@@ -0,0 +1,363 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _reactI18next = require("react-i18next");
+var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
+var _hooks = require("@cashub/hooks");
+var _utils = require("@cashub/utils");
+var _Button = _interopRequireDefault(require("../button/Button"));
+var _Accordion = _interopRequireDefault(require("./subComponent/Accordion"));
+var _Input = _interopRequireDefault(require("../form/Input"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const DatePicker = _ref => {
+  let {
+    onConfirm,
+    selected,
+    minDate,
+    maxDate,
+    fixedYear,
+    disabled
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const [currentDisplayType, setCurrentDisplayType] = (0, _react.useState)(null);
+  const [displayPicker, setDisplayPicker] = (0, _react.useState)(false);
+  const [selectedYear, setSelectedYear] = (0, _react.useState)(selected ? new Date(selected).getFullYear() : new Date().getFullYear());
+  const [selectedMonth, setSelectedMonth] = (0, _react.useState)(selected ? new Date(selected).getMonth() : new Date().getMonth());
+  const [selectedDay, setSelectedDay] = (0, _react.useState)(selected ? new Date(selected).getDate() : new Date().getDate());
+  const [confirmYear, setConfirmYear] = (0, _react.useState)(selected ? new Date(selected).getFullYear() : '');
+  const [confirmMonth, setConfirmMonth] = (0, _react.useState)(selected ? new Date(selected).getMonth() : '');
+  const [confirmDay, setConfirmDay] = (0, _react.useState)(selected ? new Date(selected).getDate() : '');
+  const [inputValue, setInputValue] = (0, _react.useState)(selected ? selected : '');
+  const [toggleElement, setToggleElement] = (0, _react.useState)(null);
+  const [contentElement, setContentElement] = (0, _react.useState)(null);
+  const {
+    styles,
+    attributes,
+    state,
+    update
+  } = (0, _hooks.useCustomPopper)(toggleElement, contentElement, {
+    strategy: 'absolute',
+    placement: 'bottom-start'
+  });
+  const weeks = (0, _react.useMemo)(() => {
+    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(week => /*#__PURE__*/(0, _jsxRuntime.jsx)(Week, {
+      children: week
+    }, week));
+  }, []);
+  const handleDisplayAccordionContent = (0, _react.useCallback)(type => {
+    if (currentDisplayType === type) {
+      setCurrentDisplayType(null);
+    } else {
+      setCurrentDisplayType(type);
+    }
+  }, [currentDisplayType]);
+  const handleChangeYear = selected => {
+    if (selected === 'previous') {
+      setSelectedYear(previousParams => {
+        if (previousParams <= 1) {
+          return previousParams;
+        }
+        return previousParams - 1;
+      });
+    } else if (selected === 'next') {
+      setSelectedYear(previousParams => {
+        return previousParams + 1;
+      });
+    }
+    setCurrentDisplayType(null);
+  };
+  const handleChangeMonth = selected => {
+    if (selected === 'previous') {
+      setSelectedMonth(previousParams => {
+        if (previousParams <= 0) {
+          return 11;
+        }
+        return previousParams - 1;
+      });
+    } else if (selected === 'next') {
+      setSelectedMonth(previousParams => {
+        if (previousParams >= 11) {
+          return 0;
+        }
+        return previousParams + 1;
+      });
+    }
+    setCurrentDisplayType(null);
+  };
+  const handleDisabled = (0, _react.useCallback)((firstWeekOfMonth, daysOfMonthForSelectedDate, dayIndex, day) => {
+    const selectedDate = (0, _utils.formatDate)(new Date(selectedYear, firstWeekOfMonth >= dayIndex + 1 ? selectedMonth - 1 : daysOfMonthForSelectedDate + firstWeekOfMonth < dayIndex + 1 ? selectedMonth + 1 : selectedMonth, day).getTime() + 86399 * 1000);
+    if (minDate && minDate > selectedDate || maxDate && maxDate < selectedDate) {
+      return true;
+    }
+    if (fixedYear) {
+      const disabledDateInDec = selectedMonth === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth;
+      const disabledDateInJan = selectedMonth === 0 && dayIndex < firstWeekOfMonth;
+      return !!(disabledDateInDec || disabledDateInJan);
+    }
+    return false;
+  }, [fixedYear, minDate, maxDate, selectedMonth, selectedYear]);
+  const handleChangeDate = (0, _react.useCallback)((daysOfMonthForSelectedDate, firstWeekOfMonth, dayIndex, day) => {
+    if (!fixedYear) {
+      setSelectedYear(() => {
+        if (selectedMonth === 0 && dayIndex < firstWeekOfMonth && selectedYear > 1) {
+          return selectedYear - 1;
+        } else if (selectedMonth === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
+          return selectedYear + 1;
+        }
+        return selectedYear;
+      });
+      setConfirmYear(() => {
+        if (selectedMonth === 0 && dayIndex < firstWeekOfMonth && selectedYear > 1) {
+          return selectedYear - 1;
+        } else if (selectedMonth === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
+          return selectedYear + 1;
+        }
+        return selectedYear;
+      });
+    }
+    setSelectedMonth(() => {
+      if (firstWeekOfMonth > dayIndex) {
+        return selectedMonth !== 0 ? selectedMonth - 1 : 11;
+      } else if (daysOfMonthForSelectedDate + firstWeekOfMonth <= dayIndex) {
+        return selectedMonth !== 11 ? selectedMonth + 1 : 0;
+      }
+      return selectedMonth;
+    });
+    setConfirmMonth(() => {
+      if (firstWeekOfMonth > dayIndex) {
+        return selectedMonth !== 0 ? selectedMonth - 1 : 11;
+      } else if (daysOfMonthForSelectedDate + firstWeekOfMonth <= dayIndex) {
+        return selectedMonth !== 11 ? selectedMonth + 1 : 0;
+      }
+      return selectedMonth;
+    });
+    setConfirmDay(day);
+  }, [fixedYear, selectedMonth, selectedYear]);
+  const handleSelectedDay = (0, _react.useCallback)((day, daysOfMonthForSelectedDate, index, firstWeekOfMonth, lastWeekOfMonth) => {
+    if (confirmDay === day && confirmYear === selectedYear && confirmMonth === selectedMonth) {
+      if (firstWeekOfMonth === 6 && lastWeekOfMonth === 6) {
+        return true;
+      } else if (firstWeekOfMonth !== 6 && lastWeekOfMonth === 6) {
+        return index + 1 > firstWeekOfMonth;
+      }
+      return !!(index + 1 >= firstWeekOfMonth && index + 1 <= daysOfMonthForSelectedDate + firstWeekOfMonth);
+    }
+    return false;
+  }, [confirmYear, confirmMonth, confirmDay, selectedYear, selectedMonth]);
+  const handleDisplayDays = (0, _react.useMemo)(() => {
+    const daysOfMonthForSelectedDate = new Date(selectedYear, selectedMonth + 1, 0).getDate();
+    const daysOfPrevioueMonthForSelectedDate = new Date(selectedYear, selectedMonth + 1 - 1, 0).getDate();
+    const firstWeekOfMonth = new Date(`${selectedYear}/${selectedMonth + 1}/1`).getDay();
+    const lastWeekOfMonth = new Date(`${selectedYear}/${selectedMonth + 1}/${daysOfMonthForSelectedDate}`).getDay();
+    const days = [];
+    for (const day of [...Array(daysOfMonthForSelectedDate).keys()]) {
+      days.push(day + 1);
+    }
+    if (firstWeekOfMonth !== 0) {
+      for (let index = daysOfPrevioueMonthForSelectedDate; index > daysOfPrevioueMonthForSelectedDate - firstWeekOfMonth; index -= 1) {
+        days.unshift(index);
+      }
+    }
+    if (lastWeekOfMonth !== 6) {
+      for (let index = 1; index <= 6 - lastWeekOfMonth; index += 1) {
+        days.push(index);
+      }
+    }
+    return days.map((day, index) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, {
+        disabled: handleDisabled(firstWeekOfMonth, daysOfMonthForSelectedDate, index, day),
+        onClick: () => {
+          handleChangeDate(daysOfMonthForSelectedDate, firstWeekOfMonth, index, day);
+        },
+        selected: handleSelectedDay(day, daysOfMonthForSelectedDate, index, firstWeekOfMonth, lastWeekOfMonth),
+        children: day
+      }, index);
+    });
+  }, [selectedMonth, selectedYear, handleDisabled, handleChangeDate, handleSelectedDay]);
+  const handleToggle = () => {
+    setDisplayPicker(!displayPicker);
+    update();
+  };
+  const handleConfirm = () => {
+    onConfirm(inputValue);
+    setDisplayPicker(false);
+    setCurrentDisplayType(null);
+  };
+  (0, _react.useEffect)(() => {
+    if (!selected) return;
+    const date = new Date(selected);
+    setSelectedYear(date.getFullYear());
+    setSelectedMonth(date.getMonth());
+    setSelectedDay(date.getDate());
+    setConfirmYear(date.getFullYear());
+    setConfirmMonth(date.getMonth());
+    setConfirmDay(date.getDate());
+    setInputValue(selected);
+  }, [selected]);
+  (0, _react.useEffect)(() => {
+    if (!(confirmYear && confirmMonth && confirmDay)) return;
+    setInputValue((0, _utils.formatDate)(new Date(confirmYear, confirmMonth, confirmDay), 'date'));
+  }, [confirmYear, confirmMonth, confirmDay]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
+    onOutsideClick: handleConfirm,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PickerInput, {
+      ref: setToggleElement,
+      value: inputValue,
+      onClick: handleToggle,
+      readOnly: true,
+      disabled: disabled
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+      ...attributes.popper,
+      style: styles.popper,
+      placement: state && state.placement,
+      ref: setContentElement,
+      displayPicker: displayPicker,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
+        displayType: currentDisplayType,
+        children: [!fixedYear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+          type: "year",
+          handleDisplayAccordionContent: () => {
+            handleDisplayAccordionContent('year');
+          },
+          handleChangeTitle: handleChangeYear,
+          setCurrentDisplayType: setCurrentDisplayType,
+          currentDisplayType: currentDisplayType,
+          selectedYear: selectedYear,
+          setSelectedYear: setSelectedYear,
+          selectedDay: selectedDay,
+          minDate: minDate,
+          maxDate: maxDate,
+          fixedYear: fixedYear
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+          type: "month",
+          handleDisplayAccordionContent: () => {
+            handleDisplayAccordionContent('month');
+          },
+          handleChangeTitle: handleChangeMonth,
+          setCurrentDisplayType: setCurrentDisplayType,
+          currentDisplayType: currentDisplayType,
+          selectedMonth: selectedMonth,
+          setSelectedMonth: setSelectedMonth,
+          selectedYear: selectedYear,
+          selectedDay: selectedDay,
+          fixedYear: fixedYear,
+          minDate: minDate,
+          maxDate: maxDate
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateContent, {
+          children: [weeks, handleDisplayDays]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Footer, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmButton, {
+          fullWidth: true,
+          alignCenter: true,
+          onClick: handleConfirm,
+          children: t('Confirm')
+        })
+      })]
+    })]
+  });
+};
+const Wrapper = _styledComponents.default.div`
+  padding-bottom: var(--spacing-s);
+  background: var(--color-background1);
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid var(--border-color);
+  box-shadow: var(--box-shadow);
+  overflow: hidden;
+  width: 286px;
+  z-index: 1;
+  color: var(--font-on-background);
+
+  display: ${_ref2 => {
+  let {
+    displayPicker
+  } = _ref2;
+  return displayPicker ? 'block' : 'none';
+}};
+`;
+const Week = _styledComponents.default.div`
+  min-width: 36px;
+  height: 36px;
+  border-radius: var(--border-radius-s);
+  line-height: 36px;
+  text-align: center;
+`;
+const Day = _styledComponents.default.button`
+  min-width: 36px;
+  height: 36px;
+  border-radius: var(--border-radius-s);
+  line-height: 36px;
+  text-align: center;
+  padding: 0;
+  border: 0;
+  background: var(--color-background1);
+  color: var(--font-on-background);
+  &:hover {
+    background: var(--color-primary);
+  }
+
+  ${_ref3 => {
+  let {
+    selected
+  } = _ref3;
+  return selected && 'background: var(--color-hover);';
+}}
+
+  ${_ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  return disabled && (0, _styledComponents.css)`
+      color: var(--font-on-mute);
+      background: none;
+      &:hover {
+        background: none;
+      }
+    `;
+}}
+`;
+const DateContent = _styledComponents.default.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+const PickerInput = (0, _styledComponents.default)(_Input.default)`
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+const ConfirmButton = (0, _styledComponents.default)(_Button.default)`
+  margin: 16px auto 0;
+`;
+const Body = _styledComponents.default.div`
+  ${_ref5 => {
+  let {
+    displayType
+  } = _ref5;
+  return displayType && (0, _styledComponents.css)`
+      height: 216px;
+    `;
+}}
+
+  overflow: hidden;
+  padding: ${_ref6 => {
+  let {
+    displayType
+  } = _ref6;
+  return displayType === 'year' ? ' 0 4px var(--spacing-s) var(--spacing-s)' : '0 var(--spacing-s) 0 var(--spacing-s)';
+}};
+`;
+const Footer = _styledComponents.default.div`
+  padding: 0 var(--spacing-s);
+`;
+var _default = exports.default = DatePicker;