@cashub/ui 0.48.13 → 0.48.14

package/datetimePicker/TimePicker.js

@@ -13,14 +13,7 @@ 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 => {
@@ -46,7 +39,7 @@ const TimePicker = _ref => {
   });
   (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}`);
     }
   }, [onChange, time.hour, time.minute, time.second]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
@@ -99,7 +92,9 @@ const Hour = _ref2 => {
       onKeyUp: handleKeyUp,
       onBlur: event => {
         setTime(previous => {
-          const newState = _objectSpread({}, previous);
+          const newState = {
+            ...previous
+          };
           newState[NAME] = (0, _pad.default)(event.target.value, LENGTH, PAD_STRING);
           return newState;
         });
@@ -123,7 +118,7 @@ const Minute = _ref3 => {
   const NAME = 'minute';
   const MIN = 0;
   const MAX = 59;
-  const [minuteId] = (0, _react.useState)((0, _lodash.default)("".concat(NAME, "-")));
+  const [minuteId] = (0, _react.useState)((0, _lodash.default)(`${NAME}-`));
   const increase = (0, _hooks.useIncrease)(MIN, MAX, setTime, {
     name: NAME,
     length: LENGTH,
@@ -151,7 +146,9 @@ const Minute = _ref3 => {
         onKeyUp: handleKeyUp,
         onBlur: event => {
           setTime(previous => {
-            const newState = _objectSpread({}, previous);
+            const newState = {
+              ...previous
+            };
             newState[NAME] = (0, _pad.default)(event.target.value, LENGTH, PAD_STRING);
             return newState;
           });
@@ -176,7 +173,7 @@ const Second = _ref4 => {
   const NAME = 'second';
   const MIN = 0;
   const MAX = 59;
-  const [secondId] = (0, _react.useState)((0, _lodash.default)("".concat(NAME, "-")));
+  const [secondId] = (0, _react.useState)((0, _lodash.default)(`${NAME}-`));
   const increase = (0, _hooks.useIncrease)(MIN, MAX, setTime, {
     name: NAME,
     length: LENGTH,
@@ -204,7 +201,9 @@ const Second = _ref4 => {
         onKeyUp: handleKeyUp,
         onBlur: event => {
           setTime(previous => {
-            const newState = _objectSpread({}, previous);
+            const newState = {
+              ...previous
+            };
             newState[NAME] = (0, _pad.default)(event.target.value, LENGTH, PAD_STRING);
             return newState;
           });
@@ -233,14 +232,18 @@ const useKeyUp = (increase, decrease, min, max, setState, name) => {
         break;
       case _utils.KEY_CODE.HOME:
         setState(previous => {
-          const newState = _objectSpread({}, previous);
+          const newState = {
+            ...previous
+          };
           newState[name] = (0, _pad.default)(min, LENGTH, PAD_STRING);
           return newState;
         });
         break;
       case _utils.KEY_CODE.END:
         setState(previous => {
-          const newState = _objectSpread({}, previous);
+          const newState = {
+            ...previous
+          };
           newState[name] = (0, _pad.default)(max, LENGTH, PAD_STRING);
           return newState;
         });
@@ -250,13 +253,65 @@ const useKeyUp = (increase, decrease, min, max, setState, name) => {
     }
   }, [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 Container = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Label = _styledComponents.default.label`
+  display: inline-block;
+  color: var(--font-on-background);
+  font-size: var(--font-body1);
+  margin-right: 12px;
+`;
+const Section = _styledComponents.default.div`
+  display: inline-flex;
+  height: 36px;
+  width: 56px;
+  padding: calc(var(--spacing-xs) / 2) var(--spacing-xs);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-s);
+  background: transparent;
+  color: var(--font-on-background);
+`;
+const Input = _styledComponents.default.input`
+  width: calc(100% - 4px - 12px);
+  border: none;
+  background: transparent;
+  color: inherit;
+
+  &:focus {
+    outline: none;
+  }
+`;
 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"])));
+}))`
+  width: 12px;
+  height: 12px;
+
+  > svg {
+    width: 100%;
+    height: 100%;
+    vertical-align: top;
+  }
+
+  &:first-child {
+    margin-bottom: 2px;
+  }
+
+  &:hover {
+    color: var(--color-primary);
+  }
+`;
+const Stepper = _styledComponents.default.div`
+  margin-left: calc(var(--spacing-xs) / 2);
+`;
+const Delimiter = _styledComponents.default.span`
+  display: inline-block;
+  color: var(--font-on-background);
+  font-size: var(--font-body1);
+  width: 12px;
+  text-align: center;
+`;
 var _default = exports.default = TimePicker;

package/datetimePicker/TimePickerStyle.js

@@ -6,9 +6,59 @@ Object.defineProperty(exports, "__esModule", {
 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);
+const TimePickerStyle = (0, _styledComponents.createGlobalStyle)`
+  .rc-time-picker-panel-narrow {
+    max-width: none;
+  }
+
+  .rc-time-picker-panel {
+    .rc-time-picker-panel-inner {
+      background: transparent;
+      border: none;
+      box-shadow: none;
+
+      .rc-time-picker-panel-input-wrap {
+        display: none;
+      }
+
+      .rc-time-picker-panel-combobox {
+        height: 144px;
+        border: var(--border-width) solid var(--border-color);
+        color: var(--font-on-background);
+        box-shadow: var(--box-shadow);
+        border-radius: var(--border-radius);
+        background: var(--color-background2);
+
+        .rc-time-picker-panel-select {
+          font-size: var(--font-body1);
+          
+          ${_scrollbar.default}
+
+          li {
+            &:hover {
+              background: var(--color-hover);
+            }
+            
+            &.rc-time-picker-panel-select-option-selected {
+              background: var(--color-hover);
+            }
+          }
+
+          &:first-child {
+            border-top-left-radius: var(--border-radius);
+            border-bottom-left-radius: var(--border-radius);
+          }
+        }
+      }
+    }
+
+    &.rc-time-picker-panel-placement-bottomLeft {
+      .rc-time-picker-panel-inner {
+        padding-top: calc(36px + var(--spacing-xs));
+      }
+    }
+  }
+`;
 var _default = exports.default = TimePickerStyle;

package/datetimePicker/TimePickerV2.js

@@ -13,16 +13,9 @@ 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 => {
@@ -75,12 +68,13 @@ const TimePickerV2 = _ref => {
     update();
   };
   const handleChange = (type, value) => {
-    const next = _objectSpread(_objectSpread({}, time), {}, {
+    const next = {
+      ...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));
+      onSelect(`${next.hour}:${next.minute}:${next.second}`);
     }
   };
 
@@ -111,12 +105,12 @@ const TimePickerV2 = _ref => {
         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({
+        value: time.hour && time.minute && time.second ? `${time.hour}:${time.minute}:${time.second}` : ''
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Panel, {
         ref: setPopperElement,
         $display: display,
-        style: styles.popper
-      }, attributes.popper), {}, {
+        style: styles.popper,
+        ...attributes.popper,
         placement: state && state.placement,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
           children: HOUR_OPTIONS.map(option => {
@@ -155,21 +149,60 @@ const TimePickerV2 = _ref => {
             }, 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 => {
+const Panel = _styledComponents.default.div`
+  display: flex;
+  visibility: ${_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 => {
+}};
+  width: 100%;
+  max-width: 360px;
+  background: var(--color-background1);
+  color: var(--font-on-background);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  z-index: 85;
+`;
+const Picker = _styledComponents.default.ul`
+  flex: 1;
+  text-align: center;
+  max-height: 144px;
+  overflow-y: auto;
+
+  ${_scrollbar.default}
+
+  &:first-child {
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+  }
+
+  &:not(:last-child) {
+    border-right: var(--border-width) solid var(--border-color);
+  }
+`;
+const Option = _styledComponents.default.li`
+  padding: var(--spacing-xs) 0;
+  background: var(--color-background1);
+  transition: background 0.3s;
+
+  &:hover {
+    background: var(--color-hover);
+  }
+
+  ${_ref3 => {
   let {
     selected
   } = _ref3;
-  return selected && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      background: var(--color-hover);\n    "])));
-});
+  return selected && (0, _styledComponents.css)`
+      background: var(--color-hover);
+    `;
+}}
+`;
 var _default = exports.default = TimePickerV2;

package/datetimePicker/accordion/Month.js

@@ -12,11 +12,9 @@ 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,
@@ -134,44 +132,123 @@ const Month = _ref => {
     })]
   });
 };
-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 => {
+const Header = _styledComponents.default.div`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  position: relative;
+
+  > div {
+    width: 72px;
+    line-height: 36px;
+    text-align: center;
+  }
+
+  &::before {
+    content: '';
+    border-bottom: var(--border-width) solid var(--border-color);
+    position: absolute;
+    width: 300px;
+    bottom: 0;
+    z-index: 1;
+    right: -16px;
+  }
+`;
+const IconButton = _styledComponents.default.button`
+  width: 36px;
+  height: 36px;
+  background: var(--color-background1);
+  border: none;
+  color: var(--font-on-background);
+  padding: 0;
+  transition: 0.3s;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+
+  ${_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 => {
+  return disabled && (0, _styledComponents.css)`
+      opacity: 0.5;
+
+      &:hover {
+        color: var(--font-on-background);
+      }
+    `;
+}}
+
+  ${_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 => {
+  return right && `
+    position: absolute;
+    right: 0;
+    ${$rotate && (0, _styledComponents.css)`
+        transform: rotate(180deg);
+      `}
+  `;
+}}
+`;
+const Body = _styledComponents.default.div`
+  flex-wrap: wrap;
+  height: 0;
+  width: 100%;
+  display: ${_ref4 => {
   let {
     expand
   } = _ref4;
   return expand ? 'flex' : 'none';
-}, _ref5 => {
+}};
+
+  ${_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 => {
+  return (0, _styledComponents.css)`
+      min-height: ${fixedYear ? '192' : '144'}px;
+    `;
+}}
+  transition: .3s;
+
+  transition: 0.3s;
+`;
+const Item = _styledComponents.default.button`
+  width: calc(100% / 3);
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  border-radius: var(--border-radius-s);
+  padding: 0;
+  border: none;
+  color: var(--font-on-background);
+  background: var(--color-background1);
+
+  &:hover {
+    ${_ref6 => {
   let {
     disabled
   } = _ref6;
   return !disabled && 'background: var(--color-primary)';
-}, _ref7 => {
+}}
+  }
+
+  ${_ref7 => {
   let {
     disabled
   } = _ref7;
   return disabled && 'color: var(--font-on-mute)';
-}, _ref8 => {
+}}
+
+  ${_ref8 => {
   let {
     selected
   } = _ref8;
   return selected && 'background: var(--color-hover)';
-});
+}}
+`;
 var _default = exports.default = Month;

package/datetimePicker/accordion/Year.js

@@ -12,11 +12,9 @@ var _utils = require("@cashub/utils");
 var _DateTimePickerContext = _interopRequireDefault(require("../subComponent/DateTimePickerContext"));
 var _scrollbar = _interopRequireDefault(require("../../styles/mixin/scrollbar"));
 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 Year = _ref => {
   let {
     expand,
@@ -95,7 +93,7 @@ const Year = _ref => {
     }
   }, [fixedYear, selectedDate]);
   const scroll = (0, _react.useCallback)(() => {
-    if (bodyRef !== null && bodyRef !== void 0 && bodyRef.current && selectedYearRef !== null && selectedYearRef !== void 0 && selectedYearRef.current) {
+    if (bodyRef?.current && selectedYearRef?.current) {
       const body = bodyRef.current;
       if (body.scrollTop + body.clientHeight >= body.scrollHeight - 90) {
         body.removeEventListener('scroll', scroll);
@@ -131,7 +129,7 @@ const Year = _ref => {
     bodyRef.current.addEventListener('scroll', scroll);
   }, [scroll]);
   (0, _react.useEffect)(() => {
-    if (expand && bodyRef !== null && bodyRef !== void 0 && bodyRef.current && selectedYearRef !== null && selectedYearRef !== void 0 && selectedYearRef.current) {
+    if (expand && bodyRef?.current && selectedYearRef?.current) {
       bodyRef.current.scrollTo({
         top: selectedYearRef.current.offsetTop - bodyRef.current.offsetTop
       });
@@ -163,44 +161,124 @@ const Year = _ref => {
     })]
   });
 };
-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 => {
+const Header = _styledComponents.default.div`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  position: relative;
+
+  > div {
+    width: 72px;
+    line-height: 36px;
+    text-align: center;
+  }
+
+  &::before {
+    content: '';
+    border-bottom: var(--border-width) solid var(--border-color);
+    position: absolute;
+    width: 300px;
+    bottom: 0;
+    z-index: 1;
+    right: -16px;
+  }
+`;
+const IconButton = _styledComponents.default.button`
+  width: 36px;
+  height: 36px;
+  background: var(--color-background1);
+  border: none;
+  color: var(--font-on-background);
+  padding: 0;
+  transition: 0.3s;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+
+  ${_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 => {
+  return disabled && (0, _styledComponents.css)`
+      opacity: 0.5;
+
+      &:hover {
+        color: var(--font-on-background);
+      }
+    `;
+}}
+
+  ${_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  transition: 0.3s;\n  overflow-y: scroll;\n  gap: 12px 0;\n  ", "\n\n  ", "\n"])), _ref4 => {
+  return right && `
+    position: absolute;
+    right: 0;
+    ${$rotate && (0, _styledComponents.css)`
+        transform: rotate(180deg);
+      `}
+  `;
+}}
+`;
+const Body = _styledComponents.default.div`
+  flex-wrap: wrap;
+  height: 0;
+  width: 100%;
+  display: ${_ref4 => {
   let {
     expand
   } = _ref4;
   return expand ? 'flex' : 'none';
-}, _scrollbar.default, _ref5 => {
+}};
+  transition: 0.3s;
+  overflow-y: scroll;
+  gap: 12px 0;
+  ${_scrollbar.default}
+
+  ${_ref5 => {
   let {
     fixedYear
   } = _ref5;
-  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      height: ", "px};\n    "])), fixedYear ? '144' : '192');
-});
-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 => {
+  return (0, _styledComponents.css)`
+      height: ${fixedYear ? '144' : '192'}px};
+    `;
+}}
+`;
+const Item = _styledComponents.default.button`
+  width: calc(100% / 3);
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  border-radius: var(--border-radius-s);
+  padding: 0;
+  border: none;
+  color: var(--font-on-background);
+  background: var(--color-background1);
+
+  &:hover {
+    ${_ref6 => {
   let {
     disabled
   } = _ref6;
   return !disabled && 'background: var(--color-primary);';
-}, _ref7 => {
+}}
+  }
+
+  ${_ref7 => {
   let {
     disabled
   } = _ref7;
   return disabled && 'color: var(--font-on-mute)';
-}, _ref8 => {
+}}
+
+  ${_ref8 => {
   let {
     selected
   } = _ref8;
   return selected && 'background: var(--color-hover)';
-});
+}}
+`;
 var _default = exports.default = Year;