@cashub/ui 0.9.6 → 0.9.8

package/button/Button.js

@@ -32,7 +32,7 @@ var Button = _styledComponents.default.button.attrs(function () {
   return disabled ? 'no-drop' : 'pointer';
 }, function (_ref2) {
   var disabled = _ref2.disabled;
-  return !disabled && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        transition: 0.3s;\n        box-shadow: var(--box-shadow);\n        opacity: 0.9;\n      "])));
+  return !disabled && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          transition: 0.3s;\n          box-shadow: var(--box-shadow);\n          opacity: 0.9;\n        "])));
 }, _backgroundColor.default, _colorOnBackground.default, function (_ref3) {
   var secondary = _ref3.secondary;
   return secondary && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      background: var(--color-background2);\n      color: var(--font-on-background);\n    "])));

package/button/IconButton.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2;
 
 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); }
 
@@ -32,13 +32,13 @@ var IconButton = _styledComponents.default.div.attrs(function () {
   return size === 'small' && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      width: 32px;\n      height: 32px;\n    "])));
 }, function (_ref4) {
   var disabled = _ref4.disabled;
-  return !disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        background: var(--color-hover);\n      "])));
+  return !disabled && 'background: var(--color-hover)';
 }, function (_ref5) {
   var size = _ref5.size;
-  return size === 'small' && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        font-size: 1rem;\n      "])));
+  return size === 'small' && 'font-size: 1rem;';
 }, function (_ref6) {
   var size = _ref6.size;
-  return size === 'large' && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        font-size: 2rem;\n      "])));
+  return size === 'large' && 'font-size: 2rem;';
 });
 
 var _default = IconButton;

package/chart/utils/customTooltip.js

@@ -5,6 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var customTooltip = function customTooltip(theme) {
   // optimize: render in react way
   return function (context) {
@@ -61,7 +73,10 @@ var customTooltip = function customTooltip(theme) {
     tooltipEl.style.fontSize = theme.fontBody1;
     tooltipEl.style.display = 'block';
     tooltipEl.style.position = 'absolute';
-    tooltipEl.style.color = tooltipModel.labelTextColors[0];
+
+    var _tooltipModel$labelTe = _slicedToArray(tooltipModel.labelTextColors, 1);
+
+    tooltipEl.style.color = _tooltipModel$labelTe[0];
     tooltipEl.style.background = tooltipModel.labelColors[0].backgroundColor;
     tooltipEl.style.borderRadius = theme.borderRadius;
     tooltipEl.style.textAlign = 'center';

package/datetimePicker/DatePicker.js

@@ -68,7 +68,8 @@ var DatePicker = function DatePicker(_ref) {
       selected = _ref.selected,
       minDate = _ref.minDate,
       maxDate = _ref.maxDate,
-      fixedYear = _ref.fixedYear;
+      fixedYear = _ref.fixedYear,
+      disabled = _ref.disabled;
 
   var _useTranslation = (0, _reactI18next.useTranslation)(),
       t = _useTranslation.t;
@@ -83,37 +84,37 @@ var DatePicker = function DatePicker(_ref) {
       displayPicker = _useState4[0],
       setDisplayPicker = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(new Date(selected).getFullYear()),
+  var _useState5 = (0, _react.useState)(selected ? new Date(selected).getFullYear() : new Date().getFullYear()),
       _useState6 = _slicedToArray(_useState5, 2),
       selectedYear = _useState6[0],
       setSelectedYear = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(new Date(selected).getMonth()),
+  var _useState7 = (0, _react.useState)(selected ? new Date(selected).getMonth() : new Date().getMonth()),
       _useState8 = _slicedToArray(_useState7, 2),
       selectedMonth = _useState8[0],
       setSelectedMonth = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(new Date(selected).getDate()),
+  var _useState9 = (0, _react.useState)(selected ? new Date(selected).getDate() : new Date().getDate()),
       _useState10 = _slicedToArray(_useState9, 2),
       selectedDay = _useState10[0],
       setSelectedDay = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(new Date(selected).getFullYear()),
+  var _useState11 = (0, _react.useState)(selected ? new Date(selected).getFullYear() : ''),
       _useState12 = _slicedToArray(_useState11, 2),
       confirmYear = _useState12[0],
       setConfirmYear = _useState12[1];
 
-  var _useState13 = (0, _react.useState)(new Date(selected).getMonth()),
+  var _useState13 = (0, _react.useState)(selected ? new Date(selected).getMonth() : ''),
       _useState14 = _slicedToArray(_useState13, 2),
       confirmMonth = _useState14[0],
       setConfirmMonth = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(new Date(selected).getDate()),
+  var _useState15 = (0, _react.useState)(selected ? new Date(selected).getDate() : ''),
       _useState16 = _slicedToArray(_useState15, 2),
       confirmDay = _useState16[0],
       setConfirmDay = _useState16[1];
 
-  var _useState17 = (0, _react.useState)(selected),
+  var _useState17 = (0, _react.useState)(selected ? selected : ''),
       _useState18 = _slicedToArray(_useState17, 2),
       inputValue = _useState18[0],
       setInputValue = _useState18[1];
@@ -256,10 +257,12 @@ var DatePicker = function DatePicker(_ref) {
         return true;
       } else if (firstWeekOfMonth !== 6 && lastWeekOfMonth === 6) {
         return index + 1 > firstWeekOfMonth;
-      } else {
-        return index + 1 >= firstWeekOfMonth && index + 1 <= daysOfMonthForSelectedDate + firstWeekOfMonth ? true : false;
       }
-    } else return false;
+
+      return !!(index + 1 >= firstWeekOfMonth && index + 1 <= daysOfMonthForSelectedDate + firstWeekOfMonth);
+    }
+
+    return false;
   }, [confirmYear, confirmMonth, confirmDay, selectedYear, selectedMonth]);
   var handleDisplayDays = (0, _react.useMemo)(function () {
     var daysOfMonthForSelectedDate = new Date(selectedYear, selectedMonth + 1, 0).getDate();
@@ -309,6 +312,7 @@ var DatePicker = function DatePicker(_ref) {
   };
 
   (0, _react.useEffect)(function () {
+    if (!selected) return;
     var date = new Date(selected);
     setSelectedYear(date.getFullYear());
     setSelectedMonth(date.getMonth());
@@ -319,6 +323,7 @@ var DatePicker = function DatePicker(_ref) {
     setInputValue(selected);
   }, [selected]);
   (0, _react.useEffect)(function () {
+    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, {
@@ -327,7 +332,8 @@ var DatePicker = function DatePicker(_ref) {
       ref: setToggleElement,
       value: inputValue,
       onClick: handleToggle,
-      readOnly: true
+      readOnly: true,
+      disabled: disabled
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, attributes.popper), {}, {
       style: styles.popper,
       placement: state && state.placement,
@@ -379,7 +385,7 @@ var DatePicker = function DatePicker(_ref) {
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-bottom: var(--spacing-s);\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  border: var(--border-width) solid var(--border-color);\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n  width: 286px;\n  z-index: 1;\n\n  display: ", ";\n"])), function (_ref2) {
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-bottom: var(--spacing-s);\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  border: var(--border-width) solid var(--border-color);\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n  width: 286px;\n  z-index: 1;\n  color: var(--color-white);\n\n  display: ", ";\n"])), function (_ref2) {
   var displayPicker = _ref2.displayPicker;
   return displayPicker ? 'block' : 'none';
 });
@@ -396,7 +402,7 @@ var Day = _styledComponents.default.button(_templateObject3 || (_templateObject3
 
 var DateContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n"])));
 
-var PickerInput = (0, _styledComponents.default)(_Input.default)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:disabled {\n    cursor: auto;\n    opacity: 1;\n  }\n"])));
+var PickerInput = (0, _styledComponents.default)(_Input.default)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n"])));
 var ConfirmButton = (0, _styledComponents.default)(_Button.default)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 16px auto 0;\n"])));
 
 var Body = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n\n  overflow: hidden;\n  padding: ", ";\n"])), function (_ref5) {

package/datetimePicker/DatePickerV2.js

@@ -249,7 +249,7 @@ var DatePickerV2 = function DatePickerV2(_ref) {
         return dayIndex < firstWeekOfMonth;
       } else if (month === '12' && day + firstWeekOfMonth < dayIndex + 1) {
         // disabled date in december
-        return dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth ? true : false;
+        return dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth;
       }
     }
 

package/datetimePicker/DatetimePicker.js

@@ -83,7 +83,7 @@ var DatetimePicker = function DatetimePicker(_ref) {
 
 var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    > input {\n      width: 100%;\n      height: 36px;\n      color: var(--color-white);\n      background: transparent;\n      border-radius: var(--border-radius-l);\n      border: var(--border-width) solid var(--border-color);\n      padding: 0 var(--spacing-s);\n      outline: none;\n\n      ", "\n    }\n  }\n\n  .react-datepicker-popper {\n    z-index: 2;\n  }\n\n  .react-datepicker-popper[data-placement^='top'] {\n    padding-bottom: var(--spacing-xs);\n  }\n\n  .react-datepicker-popper[data-placement^='bottom'] {\n    padding-top: var(--spacing-xs);\n  }\n\n  .react-datepicker {\n    box-shadow: var(--box-shadow);\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--border-color);\n    padding: var(--spacing-s);\n    font-size: var(--font-body1);\n    color: var(--color-white);\n    background: var(--color-background1);\n\n    .react-datepicker__triangle {\n      &::before,\n      &::after {\n        display: none;\n      }\n    }\n\n    .react-datepicker__header {\n      border: none;\n      padding: 0;\n      background: var(--color-background1);\n    }\n\n    .react-datepicker__current-month {\n      line-height: 36px;\n      color: var(--color-white);\n      font-size: var(--font-body1);\n      font-weight: var(--font-normal);\n    }\n\n    .react-datepicker__day-names {\n      margin: 0;\n    }\n\n    .react-datepicker__day-name,\n    .react-datepicker__day {\n      width: 36px;\n      height: 36px;\n      line-height: 36px;\n      color: var(--color-white);\n      font-weight: var(--font-normal);\n      margin: 0;\n      border-radius: 4px;\n    }\n\n    .react-datepicker__day:hover {\n      background: var(--color-hover);\n    }\n\n    .react-datepicker__day--disabled {\n      color: var(--font-on-mute);\n      background: none !important;\n    }\n  }\n\n  .react-datepicker__month {\n    margin: 0;\n  }\n\n  .react-datepicker__navigation {\n    top: 0;\n    width: 36px;\n    height: 36px;\n    margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);\n    border-radius: 4px;\n\n    &.react-datepicker__navigation--previous {\n      left: 0;\n    }\n\n    &.react-datepicker__navigation--next {\n      right: 0;\n    }\n\n    &:hover {\n      background: var(--color-hover);\n    }\n\n    .react-datepicker__navigation-icon::before {\n      border-color: var(--color-white);\n    }\n\n    .react-datepicker__navigation-icon--previous::before {\n      right: -4px;\n    }\n\n    .react-datepicker__navigation-icon--next::before {\n      left: -4px;\n    }\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--in-selecting-range,\n  .react-datepicker__day--in-range,\n  .react-datepicker__month-text--selected,\n  .react-datepicker__month-text--in-selecting-range,\n  .react-datepicker__month-text--in-range,\n  .react-datepicker__quarter-text--selected,\n  .react-datepicker__quarter-text--in-selecting-range,\n  .react-datepicker__quarter-text--in-range,\n  .react-datepicker__year-text--selected,\n  .react-datepicker__year-text--in-selecting-range,\n  .react-datepicker__year-text--in-range {\n    background: var(--color-primary) !important;\n  }\n\n  .react-datepicker__day--keyboard-selected,\n  .react-datepicker__month-text--keyboard-selected,\n  .react-datepicker__quarter-text--keyboard-selected,\n  .react-datepicker__year-text--keyboard-selected {\n    background: none;\n  }\n\n  .react-datepicker__input-time-container {\n    margin: 0;\n    margin-top: var(--spacing-s);\n    margin-left: var(--spacing-xs);\n\n    .react-datepicker-time__input input {\n      height: 36px;\n      padding: 0 var(--spacing-xs);\n      border-radius: var(--border-radius);\n      border: var(--border-width) solid var(--border-color);\n      background: transparent;\n      color: var(--font-on-background);\n      outline: none;\n    }\n  }\n"])), function (_ref2) {
   var disabled = _ref2.disabled;
-  return disabled ? 'cursor: not-allowed ; opacity: 0.5;' : '';
+  return disabled ? 'cursor: not-allowed; opacity: 0.5;' : '';
 });
 
 var _default = DatetimePicker;

package/datetimePicker/TimeInput.js

@@ -1,13 +1,11 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _rcTimePicker = _interopRequireDefault(require("rc-time-picker"));
 
@@ -15,14 +13,10 @@ require("rc-time-picker/assets/index.css");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -38,9 +32,9 @@ var TimeInput = function TimeInput(props) {
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .rc-time-picker {\n    width: 100%;\n\n    .rc-time-picker-input {\n      height: 36px;\n      border-radius: var(--border-radius);\n      border: var(--border-width) solid var(--border-color);\n      padding: 10px var(--spacing-s);\n      color: var(--font-on-background);\n      background: transparent;\n      font-size: var(--font-body1);\n\n      ", ";\n\n      &:focus {\n        border: var(--border-width) solid var(--color-primary);\n        outline: none;\n      }\n    }\n\n    .rc-time-picker-clear {\n      top: 6px;\n      right: 8px;\n\n      i:after {\n        font-size: var(--font-body1);\n      }\n    }\n  }\n"])), function (_ref) {
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .rc-time-picker {\n    width: 100%;\n\n    .rc-time-picker-input {\n      height: 36px;\n      border-radius: var(--border-radius);\n      border: var(--border-width) solid var(--border-color);\n      padding: 10px var(--spacing-s);\n      color: var(--font-on-background);\n      background: transparent;\n      font-size: var(--font-body1);\n\n      ", "\n\n      &:focus {\n        border: var(--border-width) solid var(--color-primary);\n        outline: none;\n      }\n    }\n\n    .rc-time-picker-clear {\n      top: 6px;\n      right: 8px;\n\n      i:after {\n        font-size: var(--font-body1);\n      }\n    }\n  }\n"])), function (_ref) {
   var disabled = _ref.disabled;
-  return disabled && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          opacity: 0.5;\n        "])));
+  return disabled && 'opacity: 0.5;';
 });
 
 var _default = TimeInput;

package/datetimePicker/accordion/Month.js

@@ -23,7 +23,7 @@ var _constant = require("../provider/constant");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -72,11 +72,11 @@ var Month = function Month(_ref) {
     }
 
     if (minDate !== undefined && maxDate !== undefined) {
-      return new Date((0, _utils.datetimeTFormat)(minDate)) <= minDayDate && maxDayDate <= new Date((0, _utils.datetimeTFormat)(maxDate)) ? false : true;
+      return !(new Date((0, _utils.datetimeTFormat)(minDate)) <= minDayDate && maxDayDate <= new Date((0, _utils.datetimeTFormat)(maxDate)));
     } else if (minDate) {
-      return (0, _utils.datetimeTFormat)(minDate) <= (0, _utils.datetimeTFormat)(minDayDate) ? false : true;
+      return !((0, _utils.datetimeTFormat)(minDate) <= (0, _utils.datetimeTFormat)(minDayDate));
     } else if (maxDate) {
-      return (0, _utils.datetimeTFormat)(maxDayDate) <= (0, _utils.datetimeTFormat)(maxDate) ? false : true;
+      return !((0, _utils.datetimeTFormat)(maxDayDate) <= (0, _utils.datetimeTFormat)(maxDate));
     }
 
     return false;
@@ -177,13 +177,13 @@ var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 =
 
 var Item = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 84px;\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  border-radius: var(--border-radius-s);\n  padding: 0;\n  border: none;\n  color: var(--whiet);\n  background: var(--color-background1);\n\n  &:hover {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref6) {
   var disabled = _ref6.disabled;
-  return !disabled && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        background: var(--color-primary);\n      "])));
+  return !disabled && 'background: var(--color-primary)';
 }, function (_ref7) {
   var disabled = _ref7.disabled;
-  return disabled && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      color: var(--font-on-mute);\n    "])));
+  return disabled && 'color: var(--font-on-mute)';
 }, function (_ref8) {
   var selected = _ref8.selected;
-  return selected && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      background: var(--color-hover);\n    "])));
+  return selected && 'background: var(--color-hover)';
 });
 
 var _default = Month;

package/datetimePicker/accordion/Year.js

@@ -23,7 +23,7 @@ var _scrollbar = _interopRequireDefault(require("../../styles/mixin/scrollbar"))
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -152,19 +152,18 @@ var Year = function Year(_ref) {
             body.addEventListener('scroll', scroll);
 
             if (previousParams[0] - 15 <= 0) {
-              var addYearRange = (0, _utils.generateRange)(previousParams[0] - (previousParams[0] - 1), previousParams[0] - 1);
-              return [].concat(_toConsumableArray(addYearRange), _toConsumableArray(previousParams));
-            } else {
-              setTimeout(function () {
-                body.scrollTo({
-                  top: body.scrollTop + 96
-                });
-              }, 400);
-
-              var _addYearRange = (0, _utils.generateRange)(previousParams[0] - 15, previousParams[0] - 1);
+              var _addYearRange = (0, _utils.generateRange)(previousParams[0] - (previousParams[0] - 1), previousParams[0] - 1);
 
               return [].concat(_toConsumableArray(_addYearRange), _toConsumableArray(previousParams));
             }
+
+            setTimeout(function () {
+              body.scrollTo({
+                top: body.scrollTop + 96
+              });
+            }, 400);
+            var addYearRange = (0, _utils.generateRange)(previousParams[0] - 15, previousParams[0] - 1);
+            return [].concat(_toConsumableArray(addYearRange), _toConsumableArray(previousParams));
           });
         }, 400);
       }
@@ -232,13 +231,13 @@ var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 =
 
 var Item = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 84px;\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  border-radius: var(--border-radius-s);\n  padding: 0;\n  border: none;\n  color: var(--whiet);\n  background: var(--color-background1);\n\n  &:hover {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref6) {
   var disabled = _ref6.disabled;
-  return !disabled && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        background: var(--color-primary);\n      "])));
+  return !disabled && 'background: var(--color-primary);';
 }, function (_ref7) {
   var disabled = _ref7.disabled;
-  return disabled && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      color: var(--font-on-mute);\n    "])));
+  return disabled && 'color: var(--font-on-mute)';
 }, function (_ref8) {
   var selected = _ref8.selected;
-  return selected && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      background: var(--color-hover);\n    "])));
+  return selected && 'background: var(--color-hover)';
 });
 
 var _default = Year;

package/datetimePicker/subComponent/Accordion.js

@@ -21,7 +21,7 @@ var _scrollbar = _interopRequireDefault(require("../../styles/mixin/scrollbar"))
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -123,9 +123,11 @@ var Accordion = function Accordion(_ref) {
 
   var accordionTitle = function accordionTitle() {
     if (type === 'year') {
-      return selectedYear;
+      return selectedYear ? selectedYear : new Date().getFullYear();
     } else if (type === 'month') {
-      return monthArr[selectedMonth].name;
+      var _monthArr;
+
+      return (_monthArr = monthArr[selectedMonth ? selectedMonth : new Date().getMonth()]) === null || _monthArr === void 0 ? void 0 : _monthArr.name;
     }
   };
 
@@ -322,18 +324,18 @@ var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 =
 }, function (_ref5) {
   var type = _ref5.type,
       fixedYear = _ref5.fixedYear;
-  return type && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  min-height: ", "px};\n  transition: .3s;\n  \n  ", ";\n  "])), type === 'year' ? '197' : fixedYear ? '144' : '192', type === 'year' && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      overflow-y: scroll;\n      gap: 12px 0;\n      ", "\n    "])), _scrollbar.default));
+  return type && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      min-height: ", "px};\n      transition: .3s;\n      \n      ", ";\n  "])), type === 'year' ? '197' : fixedYear ? '144' : '192', type === 'year' && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          overflow-y: scroll;\n          gap: 12px 0;\n          ", "\n        "])), _scrollbar.default));
 });
 
 var Item = _styledComponents.default.button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 84px;\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  border-radius: var(--border-radius-s);\n  padding: 0;\n  border: none;\n  color: var(--whiet);\n  background: var(--color-background1);\n\n  &:hover {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref6) {
   var disabled = _ref6.disabled;
-  return !disabled && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        background: var(--color-primary);\n      "])));
+  return !disabled && 'background: var(--color-primary)';
 }, function (_ref7) {
   var disabled = _ref7.disabled;
-  return disabled && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      color: var(--font-on-mute);\n    "])));
+  return disabled && 'color: var(--font-on-mute)';
 }, function (_ref8) {
   var selected = _ref8.selected;
-  return selected && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      background: var(--color-hover);\n    "])));
+  return selected && 'background: var(--color-hover)';
 });
 
 var _default = Accordion;

package/dropdown/DropdownContent.js

@@ -87,7 +87,7 @@ var DropdownContent = function DropdownContent(_ref) {
   }));
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  visibility: ", ";\n  min-width: 160px;\n  max-width: 320px;\n  border: 1px solid var(--border-color);\n  color: var(--font-on-background);\n  background: var(--color-background2);\n  box-shadow: var(--box-shadow);\n  border-radius: var(--border-radius);\n  padding: var(--spacing-s) 0;\n  z-index: 20;\n  margin: 0 !important;\n  max-height: min(320px, ((50vh - 36px) - 20px) - 36px);\n  overflow-y: auto;\n  overflow-x: visible;\n\n  ", "\n"])), function (_ref2) {
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  visibility: ", ";\n  min-width: 160px;\n  max-width: 320px;\n  border: 1px solid var(--border-color);\n  color: var(--font-on-background);\n  background: var(--color-background2);\n  box-shadow: var(--box-shadow);\n  border-radius: var(--border-radius);\n  padding: var(--spacing-s) 0;\n  z-index: 20;\n  margin: 0 !important;\n  max-height: min(320px, ((50vh - 36px) - 20px) - 36px);\n  overflow-y: auto;\n  overflow-x: hidden;\n\n  ", "\n"])), function (_ref2) {
   var $display = _ref2.$display;
   return $display === true ? 'visible' : 'hidden';
 }, _scrollbar.default);

package/dropzone/FileDropzone.js

@@ -69,11 +69,7 @@ var FileDropzone = function FileDropzone(_ref) {
   var message = _ref.message,
       accept = _ref.accept,
       translation = _ref.translation,
-      _ref$state = _ref.state,
-      state = _ref$state === void 0 ? {
-    isRemoving: false,
-    isUploading: false
-  } : _ref$state,
+      state = _ref.state,
       _ref$chunking = _ref.chunking,
       chunking = _ref$chunking === void 0 ? true : _ref$chunking,
       _ref$chunkSize = _ref.chunkSize,
@@ -209,8 +205,8 @@ var FileDropzone = function FileDropzone(_ref) {
   var handleDragLeave = (0, _react.useCallback)(function (event) {
     event.preventDefault();
     event.stopPropagation();
-    if (files.length === 0) setDragging(false);
-  }, [files]);
+    setDragging(false);
+  }, []);
   var handleDrop = (0, _react.useCallback)(function (event) {
     event.preventDefault();
     event.stopPropagation();
@@ -247,62 +243,54 @@ var FileDropzone = function FileDropzone(_ref) {
               setNext = _args.length > 1 && _args[1] !== undefined ? _args[1] : true;
               _files = _slicedToArray(files, 1), file = _files[0];
 
-              if (file) {
-                _context.next = 4;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 4:
               if (chunking) {
-                _context.next = 18;
+                _context.next = 16;
                 break;
               }
 
               if (!onUploading) {
-                _context.next = 16;
+                _context.next = 14;
                 break;
               }
 
-              _context.prev = 6;
-              _context.next = 9;
+              _context.prev = 4;
+              _context.next = 7;
               return onUploading(file, file.name, index);
 
-            case 9:
+            case 7:
               setSuccessCount(function (previous) {
                 return previous + 1;
               });
-              _context.next = 16;
+              _context.next = 14;
               break;
 
-            case 12:
-              _context.prev = 12;
-              _context.t0 = _context["catch"](6);
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](4);
               setHasFail(true);
               setFailUploadIndexes(function (previous) {
                 return [].concat(_toConsumableArray(previous), [index]);
               });
 
-            case 16:
-              _context.next = 32;
+            case 14:
+              _context.next = 30;
               break;
 
-            case 18:
+            case 16:
               start = index * chunkSize;
               end = Math.min(start + chunkSize, file.size);
               chunkData = file.slice(start, end);
 
               if (!onUploading) {
-                _context.next = 32;
+                _context.next = 30;
                 break;
               }
 
-              _context.prev = 22;
-              _context.next = 25;
+              _context.prev = 20;
+              _context.next = 23;
               return onUploading(chunkData, file.name, index);
 
-            case 25:
+            case 23:
               setSuccessCount(function (previous) {
                 return previous + 1;
               });
@@ -313,12 +301,12 @@ var FileDropzone = function FileDropzone(_ref) {
                 });
               }
 
-              _context.next = 32;
+              _context.next = 30;
               break;
 
-            case 29:
-              _context.prev = 29;
-              _context.t1 = _context["catch"](22);
+            case 27:
+              _context.prev = 27;
+              _context.t1 = _context["catch"](20);
 
               if (_context.t1.message !== 'canceled') {
                 setHasFail(true);
@@ -333,12 +321,12 @@ var FileDropzone = function FileDropzone(_ref) {
                 }
               }
 
-            case 32:
+            case 30:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[6, 12], [22, 29]]);
+      }, _callee, null, [[4, 10], [20, 27]]);
     }));
 
     return function (_x) {
@@ -362,7 +350,7 @@ var FileDropzone = function FileDropzone(_ref) {
     });
   }, [failUploadIndexes, handleUpload]);
   var handleCancelUpload = (0, _react.useCallback)(function (event) {
-    if (event) event.stopPropagation();
+    event.stopPropagation();
     if (onCanceledFile) onCanceledFile(files[0]);
     handleReset();
   }, [files, onCanceledFile, handleReset]);
@@ -473,6 +461,7 @@ var FileDropzone = function FileDropzone(_ref) {
   }, [hasFail, successCount, failUploadIndexes.length, total, handleError]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Dropzone, {
     tabIndex: "0",
+    dragging: dragging,
     onClick: handleClick,
     onKeyUp: handleKeyUp,
     onKeyDown: handleKeyDown,
@@ -489,9 +478,12 @@ var FileDropzone = function FileDropzone(_ref) {
   });
 };
 
-var Dropzone = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 200px;\n  border: 4px dashed var(--border-color);\n  border-radius: var(--border-radius);\n  color: var(--font-on-primary);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 0 var(--spacing-s);\n  cursor: ", ";\n\n  &:focus {\n    border-color: var(--color-primary);\n    outline: none;\n  }\n"])), function (_ref3) {
+var Dropzone = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 200px;\n  border: 4px dashed var(--border-color);\n  border-radius: var(--border-radius);\n  color: var(--font-on-primary);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 0 var(--spacing-s);\n  cursor: ", ";\n\n  ", ";\n\n  &:focus {\n    border-color: var(--color-primary);\n  }\n"])), function (_ref3) {
   var reachedLimit = _ref3.reachedLimit;
   return reachedLimit ? 'default' : 'pointer';
+}, function (_ref4) {
+  var dragging = _ref4.dragging;
+  return dragging && 'border-color: var(--color-primary);';
 });
 
 Dropzone.displayName = 'Dropzone';
@@ -511,8 +503,8 @@ PreviewDetails.displayName = 'PreviewDetails';
 var Progress = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"]))); // fix:color
 
 
-var ProgressBar = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex: 1;\n  height: 1.25rem;\n  border-radius: var(--border-radius);\n  position: relative;\n  overflow: hidden;\n  border: 1px solid var(--color-primary);\n\n  &::before {\n    position: absolute;\n    content: '';\n    width: ", "%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background: linear-gradient(to bottom, #00bdff, #597ef7);\n    transition: width 300ms ease-in-out;\n  }\n\n  > span {\n    position: absolute;\n    width: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n"])), function (_ref4) {
-  var percentage = _ref4.percentage;
+var ProgressBar = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex: 1;\n  height: 1.25rem;\n  border-radius: var(--border-radius);\n  position: relative;\n  overflow: hidden;\n  border: 1px solid var(--color-primary);\n\n  &::before {\n    position: absolute;\n    content: '';\n    width: ", "%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background: linear-gradient(to bottom, #00bdff, #597ef7);\n    transition: width 300ms ease-in-out;\n  }\n\n  > span {\n    position: absolute;\n    width: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n"])), function (_ref5) {
+  var percentage = _ref5.percentage;
   return percentage;
 });
 
@@ -522,8 +514,8 @@ var Button = _styledComponents.default.span.attrs(function () {
   return {
     role: 'button'
   };
-})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 0 0 auto;\n  cursor: pointer;\n  width: 1.25rem;\n  height: 1.25rem;\n  color: var(--font-on-primary);\n  background: var(--color-primary);\n  border-radius: var(--border-radius);\n  margin-left: var(--spacing-xs);\n  padding: 0.25rem;\n\n  ", "\n"])), function (_ref5) {
-  var danger = _ref5.danger;
+})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 0 0 auto;\n  cursor: pointer;\n  width: 1.25rem;\n  height: 1.25rem;\n  color: var(--font-on-primary);\n  background: var(--color-primary);\n  border-radius: var(--border-radius);\n  margin-left: var(--spacing-xs);\n  padding: 0.25rem;\n\n  ", "\n"])), function (_ref6) {
+  var danger = _ref6.danger;
   return danger && "\n      background: var(--color-danger);\n    ";
 });