@cashub/ui 0.48.28 → 0.49.0-beta.0

package/datetimePicker/TimePicker.js

@@ -1,262 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _fa = require("react-icons/fa");
-var _moment = _interopRequireDefault(require("moment"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _lodash = _interopRequireDefault(require("lodash.uniqueid"));
-var _utils = require("@cashub/utils");
-var _hooks = require("./hooks");
-var _pad = _interopRequireDefault(require("./utils/pad"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const LENGTH = 2;
-const PAD_STRING = '0';
-const TimePicker = _ref => {
-  let {
-    labelName = 'Time',
-    value,
-    onChange,
-    showSecond = true
-  } = _ref;
-  const [hourId] = (0, _react.useState)((0, _lodash.default)('hour-'));
-  const [time, setTime] = (0, _react.useState)(() => {
-    let time = (0, _moment.default)(value, 'HH:mm:ss');
-
-    // use current time when time value is invalid
-    if (!value || !time.isValid()) {
-      time = (0, _moment.default)();
-    }
-    return {
-      hour: (0, _pad.default)(time.hour(), LENGTH, PAD_STRING),
-      minute: (0, _pad.default)(time.minute(), LENGTH, PAD_STRING),
-      second: (0, _pad.default)(time.second(), LENGTH, PAD_STRING)
-    };
-  });
-  (0, _react.useEffect)(() => {
-    if (typeof onChange === 'function' && time.hour && time.minute && time.second) {
-      onChange("".concat(time.hour, ":").concat(time.minute, ":").concat(time.second));
-    }
-  }, [onChange, time.hour, time.minute, time.second]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
-      htmlFor: hourId,
-      children: labelName
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Hour, {
-      id: hourId,
-      value: time.hour,
-      setTime: setTime
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Minute, {
-      value: time.minute,
-      setTime: setTime
-    }), showSecond === true && /*#__PURE__*/(0, _jsxRuntime.jsx)(Second, {
-      value: time.second,
-      setTime: setTime
-    })]
-  });
-};
-const Hour = _ref2 => {
-  let {
-    id,
-    value,
-    setTime
-  } = _ref2;
-  const NAME = 'hour';
-  const MIN = 0;
-  const MAX = 23;
-  const increase = (0, _hooks.useIncrease)(MIN, MAX, setTime, {
-    name: NAME,
-    length: LENGTH,
-    padString: PAD_STRING
-  });
-  const decrease = (0, _hooks.useDecrease)(MIN, MAX, setTime, {
-    name: NAME,
-    length: LENGTH,
-    padString: PAD_STRING
-  });
-  const changeNumber = (0, _hooks.useChangeNumber)(MIN, MAX, setTime, NAME);
-  const handleKeyUp = useKeyUp(increase, decrease, MIN, MAX, setTime, NAME);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Section, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
-      type: "text",
-      id: id,
-      maxLength: "2",
-      value: value,
-      onChange: event => {
-        changeNumber(event.target.value);
-      },
-      onKeyUp: handleKeyUp,
-      onBlur: event => {
-        setTime(previous => {
-          const newState = _objectSpread({}, previous);
-          newState[NAME] = (0, _pad.default)(event.target.value, LENGTH, PAD_STRING);
-          return newState;
-        });
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Stepper, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
-        onClick: increase,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleUp, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
-        onClick: decrease,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleDown, {})
-      })]
-    })]
-  });
-};
-const Minute = _ref3 => {
-  let {
-    value,
-    setTime
-  } = _ref3;
-  const NAME = 'minute';
-  const MIN = 0;
-  const MAX = 59;
-  const [minuteId] = (0, _react.useState)((0, _lodash.default)("".concat(NAME, "-")));
-  const increase = (0, _hooks.useIncrease)(MIN, MAX, setTime, {
-    name: NAME,
-    length: LENGTH,
-    padString: PAD_STRING
-  });
-  const decrease = (0, _hooks.useDecrease)(MIN, MAX, setTime, {
-    name: NAME,
-    length: LENGTH,
-    padString: PAD_STRING
-  });
-  const changeNumber = (0, _hooks.useChangeNumber)(MIN, MAX, setTime, NAME);
-  const handleKeyUp = useKeyUp(increase, decrease, MIN, MAX, setTime, NAME);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Delimiter, {
-      children: ":"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Section, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
-        type: "text",
-        id: minuteId,
-        maxLength: "2",
-        value: value,
-        onChange: event => {
-          changeNumber(event.target.value);
-        },
-        onKeyUp: handleKeyUp,
-        onBlur: event => {
-          setTime(previous => {
-            const newState = _objectSpread({}, previous);
-            newState[NAME] = (0, _pad.default)(event.target.value, LENGTH, PAD_STRING);
-            return newState;
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Stepper, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
-          onClick: increase,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleUp, {})
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
-          onClick: decrease,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleDown, {})
-        })]
-      })]
-    })]
-  });
-};
-const Second = _ref4 => {
-  let {
-    value,
-    setTime
-  } = _ref4;
-  const NAME = 'second';
-  const MIN = 0;
-  const MAX = 59;
-  const [secondId] = (0, _react.useState)((0, _lodash.default)("".concat(NAME, "-")));
-  const increase = (0, _hooks.useIncrease)(MIN, MAX, setTime, {
-    name: NAME,
-    length: LENGTH,
-    padString: PAD_STRING
-  });
-  const decrease = (0, _hooks.useDecrease)(MIN, MAX, setTime, {
-    name: NAME,
-    length: LENGTH,
-    padString: PAD_STRING
-  });
-  const changeNumber = (0, _hooks.useChangeNumber)(MIN, MAX, setTime, NAME);
-  const handleKeyUp = useKeyUp(increase, decrease, MIN, MAX, setTime, NAME);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Delimiter, {
-      children: ":"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Section, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
-        type: "text",
-        id: secondId,
-        maxLength: "2",
-        value: value,
-        onChange: event => {
-          changeNumber(event.target.value);
-        },
-        onKeyUp: handleKeyUp,
-        onBlur: event => {
-          setTime(previous => {
-            const newState = _objectSpread({}, previous);
-            newState[NAME] = (0, _pad.default)(event.target.value, LENGTH, PAD_STRING);
-            return newState;
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Stepper, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
-          onClick: increase,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleUp, {})
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
-          onClick: decrease,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleDown, {})
-        })]
-      })]
-    })]
-  });
-};
-const useKeyUp = (increase, decrease, min, max, setState, name) => {
-  return (0, _react.useCallback)(event => {
-    const key = event.keyCode;
-    switch (key) {
-      case _utils.KEY_CODE.UP:
-        increase();
-        break;
-      case _utils.KEY_CODE.DOWN:
-        decrease();
-        break;
-      case _utils.KEY_CODE.HOME:
-        setState(previous => {
-          const newState = _objectSpread({}, previous);
-          newState[name] = (0, _pad.default)(min, LENGTH, PAD_STRING);
-          return newState;
-        });
-        break;
-      case _utils.KEY_CODE.END:
-        setState(previous => {
-          const newState = _objectSpread({}, previous);
-          newState[name] = (0, _pad.default)(max, LENGTH, PAD_STRING);
-          return newState;
-        });
-        break;
-      default:
-        break;
-    }
-  }, [increase, decrease, min, max, setState, name]);
-};
-const Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-const Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: var(--font-on-background);\n  font-size: var(--font-body1);\n  margin-right: 12px;\n"])));
-const Section = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  height: 36px;\n  width: 56px;\n  padding: calc(var(--spacing-xs) / 2) var(--spacing-xs);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius-s);\n  background: transparent;\n  color: var(--font-on-background);\n"])));
-const Input = _styledComponents.default.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: calc(100% - 4px - 12px);\n  border: none;\n  background: transparent;\n  color: inherit;\n\n  &:focus {\n    outline: none;\n  }\n"])));
-const StepperButton = _styledComponents.default.div.attrs(() => ({
-  role: 'button'
-}))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n\n  > svg {\n    width: 100%;\n    height: 100%;\n    vertical-align: top;\n  }\n\n  &:first-child {\n    margin-bottom: 2px;\n  }\n\n  &:hover {\n    color: var(--color-primary);\n  }\n"])));
-const Stepper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: calc(var(--spacing-xs) / 2);\n"])));
-const Delimiter = _styledComponents.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: var(--font-on-background);\n  font-size: var(--font-body1);\n  width: 12px;\n  text-align: center;\n"])));
-var _default = exports.default = TimePicker;

package/datetimePicker/TimePickerStyle.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = require("styled-components");
-var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
-var _templateObject;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-// integrate rc-time-picker component
-const TimePickerStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .rc-time-picker-panel-narrow {\n    max-width: none;\n  }\n\n  .rc-time-picker-panel {\n    .rc-time-picker-panel-inner {\n      background: transparent;\n      border: none;\n      box-shadow: none;\n\n      .rc-time-picker-panel-input-wrap {\n        display: none;\n      }\n\n      .rc-time-picker-panel-combobox {\n        height: 144px;\n        border: var(--border-width) solid var(--border-color);\n        color: var(--font-on-background);\n        box-shadow: var(--box-shadow);\n        border-radius: var(--border-radius);\n        background: var(--color-background2);\n\n        .rc-time-picker-panel-select {\n          font-size: var(--font-body1);\n          \n          ", "\n\n          li {\n            &:hover {\n              background: var(--color-hover);\n            }\n            \n            &.rc-time-picker-panel-select-option-selected {\n              background: var(--color-hover);\n            }\n          }\n\n          &:first-child {\n            border-top-left-radius: var(--border-radius);\n            border-bottom-left-radius: var(--border-radius);\n          }\n        }\n      }\n    }\n\n    &.rc-time-picker-panel-placement-bottomLeft {\n      .rc-time-picker-panel-inner {\n        padding-top: calc(36px + var(--spacing-xs));\n      }\n    }\n  }\n"])), _scrollbar.default);
-var _default = exports.default = TimePickerStyle;

package/datetimePicker/TimePickerV2.js

@@ -1,175 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
-var _hooks = require("@cashub/hooks");
-var _utils = require("@cashub/utils");
-var _pad = _interopRequireDefault(require("./utils/pad"));
-var _form = require("../form");
-var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-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; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const LENGTH = 2;
-const PAD_STRING = '0';
-const HOUR_OPTIONS = (0, _utils.generateRange)(0, 23).map(value => {
-  return (0, _pad.default)(value, LENGTH, PAD_STRING);
-});
-const MINUTE_SECOND_OPTIONS = (0, _utils.generateRange)(0, 59).map(value => {
-  return (0, _pad.default)(value, LENGTH, PAD_STRING);
-});
-const EMPTY_TIME = {
-  hour: '',
-  minute: '',
-  second: ''
-};
-const getTimeFromSelected = (selected, allowEmpty) => {
-  let time = new Date(Date.parse(selected));
-  if (isNaN(time)) {
-    if (allowEmpty) {
-      return EMPTY_TIME;
-    }
-    time = new Date();
-  }
-  return {
-    hour: (0, _pad.default)(time.getHours(), LENGTH, PAD_STRING),
-    minute: (0, _pad.default)(time.getMinutes(), LENGTH, PAD_STRING),
-    second: (0, _pad.default)(time.getSeconds(), LENGTH, PAD_STRING)
-  };
-};
-const TimePickerV2 = _ref => {
-  let {
-    selected,
-    onSelect,
-    allowEmpty = false
-  } = _ref;
-  const [display, setDisplay] = (0, _react.useState)(false);
-  const [targetElement, setTargetElement] = (0, _react.useState)(null);
-  const [popperElement, setPopperElement] = (0, _react.useState)(null);
-  const [time, setTime] = (0, _react.useState)(() => {
-    return getTimeFromSelected(selected, allowEmpty);
-  });
-  const {
-    styles,
-    attributes,
-    state,
-    update
-  } = (0, _hooks.useCustomPopper)(targetElement, popperElement, {
-    placement: 'bottom-start'
-  });
-  const handleToggle = () => {
-    setDisplay(!display);
-    update();
-  };
-  const handleChange = (type, value) => {
-    const next = _objectSpread(_objectSpread({}, time), {}, {
-      [type]: value
-    });
-    setTime(next);
-    if (typeof onSelect === 'function' && next.hour && next.minute && next.second) {
-      onSelect("".concat(next.hour, ":").concat(next.minute, ":").concat(next.second));
-    }
-  };
-
-  // sync time picker state when selected value changes
-  (0, _react.useEffect)(() => {
-    setTime(getTimeFromSelected(selected, allowEmpty));
-  }, [allowEmpty, selected]);
-  (0, _react.useEffect)(() => {
-    if (display) {
-      const {
-        childNodes
-      } = popperElement;
-      childNodes.forEach(panel => {
-        const selectedItem = panel.querySelector('[aria-selected="true"]');
-        if (panel.scrollHeight > panel.clientHeight) {
-          panel.scrollTop = selectedItem ? selectedItem.offsetTop : 0;
-        }
-      });
-    }
-  }, [display, popperElement]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
-    onOutsideClick: () => {
-      setDisplay(false);
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_form.Input, {
-        ref: setTargetElement,
-        type: "text",
-        readOnly: true,
-        onClick: handleToggle,
-        value: time.hour && time.minute && time.second ? "".concat(time.hour, ":").concat(time.minute, ":").concat(time.second) : ''
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Panel, _objectSpread(_objectSpread({
-        ref: setPopperElement,
-        $display: display,
-        style: styles.popper
-      }, attributes.popper), {}, {
-        placement: state && state.placement,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
-          children: HOUR_OPTIONS.map(option => {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
-              role: "option",
-              onClick: () => {
-                handleChange('hour', option);
-              },
-              selected: option === time.hour,
-              "aria-selected": option === time.hour,
-              children: option
-            }, option);
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
-          children: MINUTE_SECOND_OPTIONS.map(option => {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
-              role: "option",
-              onClick: () => {
-                handleChange('minute', option);
-              },
-              selected: option === time.minute,
-              "aria-selected": option === time.minute,
-              children: option
-            }, option);
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
-          children: MINUTE_SECOND_OPTIONS.map(option => {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
-              role: "option",
-              onClick: () => {
-                handleChange('second', option);
-              },
-              selected: option === time.second,
-              "aria-selected": option === time.second,
-              children: option
-            }, option);
-          })
-        })]
-      }))]
-    })
-  });
-};
-const Panel = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  visibility: ", ";\n  width: 100%;\n  max-width: 360px;\n  background: var(--color-background1);\n  color: var(--font-on-background);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  z-index: 85;\n"])), _ref2 => {
-  let {
-    $display
-  } = _ref2;
-  return $display ? 'visible' : 'hidden';
-});
-const Picker = _styledComponents.default.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  text-align: center;\n  max-height: 144px;\n  overflow-y: auto;\n\n  ", "\n\n  &:first-child {\n    border-top-left-radius: var(--border-radius);\n    border-bottom-left-radius: var(--border-radius);\n  }\n\n  &:not(:last-child) {\n    border-right: var(--border-width) solid var(--border-color);\n  }\n"])), _scrollbar.default);
-const Option = _styledComponents.default.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: var(--spacing-xs) 0;\n  background: var(--color-background1);\n  transition: background 0.3s;\n\n  &:hover {\n    background: var(--color-hover);\n  }\n\n  ", "\n"])), _ref3 => {
-  let {
-    selected
-  } = _ref3;
-  return selected && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      background: var(--color-hover);\n    "])));
-});
-var _default = exports.default = TimePickerV2;

package/datetimePicker/accordion/Month.js

@@ -1,177 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _io = require("react-icons/io");
-var _md = require("react-icons/md");
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _utils = require("@cashub/utils");
-var _DateTimePickerContext = _interopRequireDefault(require("../subComponent/DateTimePickerContext"));
-var _constant = require("../provider/constant");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-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; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const Month = _ref => {
-  let {
-    expand,
-    handleDisplayAccordionContent
-  } = _ref;
-  const {
-    selectedDate,
-    setSelectedDate,
-    minDate,
-    maxDate,
-    fixedYear,
-    setAccordionCurrentDisplayType
-  } = (0, _react.useContext)(_DateTimePickerContext.default);
-  const handleChangeMonth = (0, _react.useCallback)(month => {
-    // switch to the first day of the target month
-    const date = new Date(selectedDate);
-    date.setDate(1);
-    date.setMonth(month);
-    setSelectedDate((0, _utils.datetimeTFormat)(date));
-    setAccordionCurrentDisplayType(null);
-  }, [setAccordionCurrentDisplayType, setSelectedDate, selectedDate]);
-  const changeToPreviousMonth = () => {
-    const date = new Date(selectedDate);
-    handleChangeMonth(date.getMonth() <= 0 ? 11 : date.getMonth() - 1);
-  };
-  const changeToNextMonth = () => {
-    const date = new Date(selectedDate);
-    handleChangeMonth(date.getMonth() >= 11 ? 0 : date.getMonth() + 1);
-  };
-  const handleMonthItemDisable = (0, _react.useCallback)(month => {
-    let minDayDate;
-    let maxDayDate;
-    if (minDate) {
-      minDayDate = new Date((0, _utils.datetimeTFormat)(minDate));
-      minDayDate.setMonth(month);
-      minDayDate.setFullYear(new Date(selectedDate).getFullYear());
-    }
-    if (maxDate) {
-      maxDayDate = maxDate && new Date((0, _utils.datetimeTFormat)(maxDate));
-      maxDayDate.setFullYear(new Date(selectedDate).getFullYear());
-      maxDayDate.setMonth(month);
-    }
-    if (minDate !== undefined && maxDate !== undefined) {
-      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));
-    } else if (maxDate) {
-      return !((0, _utils.datetimeTFormat)(maxDayDate) <= (0, _utils.datetimeTFormat)(maxDate));
-    }
-    return false;
-  }, [maxDate, minDate, selectedDate]);
-  const handleDisableArrow = (0, _react.useCallback)(arrowType => {
-    const date = new Date(selectedDate);
-    const selectedMonth = date.getMonth();
-    date.setDate(1);
-    if (arrowType === 'previous') {
-      date.setMonth(selectedMonth - 1 < 0 ? 11 : selectedMonth - 1);
-    } else {
-      date.setMonth(selectedMonth + 1 > 11 ? 0 : selectedMonth + 1);
-    }
-    if (fixedYear && !minDate && !maxDate || !minDate && !maxDate) {
-      return false;
-    }
-    const minDate1st = minDate && new Date((0, _utils.datetimeTFormat)(minDate));
-    const maxDate1st = maxDate && new Date((0, _utils.datetimeTFormat)(maxDate));
-    if (minDate && !maxDate) {
-      minDate1st.setDate(1);
-      minDate1st.setHours(0, 0, 0, 0);
-      return !(minDate1st <= date);
-    } else if (maxDate && !minDate) {
-      maxDate1st.setDate(1);
-      maxDate1st.setHours(23, 59, 59, 0);
-      return !(maxDate1st >= date);
-    } else if (minDate && maxDate) {
-      minDate1st.setDate(1);
-      minDate1st.setHours(0, 0, 0, 0);
-      maxDate1st.setDate(1);
-      maxDate1st.setHours(23, 59, 59, 0);
-      return !(minDate1st <= date && maxDate1st >= date);
-    }
-  }, [fixedYear, maxDate, minDate, selectedDate]);
-  const monthContent = (0, _react.useMemo)(() => {
-    const selectedMonth = new Date(selectedDate).getMonth();
-    return _constant.MONTH.map((month, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
-      selected: selectedMonth === index,
-      onClick: () => {
-        handleChangeMonth(index);
-      },
-      disabled: handleMonthItemDisable(index),
-      children: month.text
-    }, month.number));
-  }, [selectedDate, handleChangeMonth, handleMonthItemDisable]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
-        onClick: changeToPreviousMonth,
-        disabled: handleDisableArrow('previous'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdArrowBackIosNew, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: _constant.MONTH[new Date(selectedDate).getMonth()].text
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
-        onClick: changeToNextMonth,
-        disabled: handleDisableArrow('next'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdArrowForwardIos, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
-        $rotate: expand,
-        right: true,
-        onClick: handleDisplayAccordionContent,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_io.IoMdArrowDropup, {})
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Body, {
-      expand: expand,
-      fixedYear: fixedYear,
-      children: monthContent
-    })]
-  });
-};
-const Header = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  position: relative;\n\n  > div {\n    width: 72px;\n    line-height: 36px;\n    text-align: center;\n  }\n\n  &::before {\n    content: '';\n    border-bottom: var(--border-width) solid var(--border-color);\n    position: absolute;\n    width: 300px;\n    bottom: 0;\n    z-index: 1;\n    right: -16px;\n  }\n"])));
-const IconButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  background: var(--color-background1);\n  border: none;\n  color: var(--font-on-background);\n  padding: 0;\n  transition: 0.3s;\n\n  &:hover {\n    color: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), _ref2 => {
-  let {
-    disabled
-  } = _ref2;
-  return disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n\n      &:hover {\n        color: var(--font-on-background);\n      }\n    "])));
-}, _ref3 => {
-  let {
-    right,
-    $rotate
-  } = _ref3;
-  return right && "\n    position: absolute;\n    right: 0;\n    ".concat($rotate && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        transform: rotate(180deg);\n      "]))), "\n  ");
-});
-const Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex-wrap: wrap;\n  height: 0;\n  width: 100%;\n  display: ", ";\n\n  ", "\n  transition: .3s;\n\n  transition: 0.3s;\n"])), _ref4 => {
-  let {
-    expand
-  } = _ref4;
-  return expand ? 'flex' : 'none';
-}, _ref5 => {
-  let {
-    fixedYear
-  } = _ref5;
-  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      min-height: ", "px;\n    "])), fixedYear ? '192' : '144');
-});
-const Item = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: calc(100% / 3);\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(--font-on-background);\n  background: var(--color-background1);\n\n  &:hover {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), _ref6 => {
-  let {
-    disabled
-  } = _ref6;
-  return !disabled && 'background: var(--color-primary)';
-}, _ref7 => {
-  let {
-    disabled
-  } = _ref7;
-  return disabled && 'color: var(--font-on-mute)';
-}, _ref8 => {
-  let {
-    selected
-  } = _ref8;
-  return selected && 'background: var(--color-hover)';
-});
-var _default = exports.default = Month;