@cashub/ui 0.48.6 → 0.48.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (177) hide show
  1. package/Tab/TabList.js +26 -38
  2. package/Tab/TabPanel.js +20 -13
  3. package/Tab/TabTab.js +24 -36
  4. package/Tab/index.js +6 -3
  5. package/Tab/subComponent/TabListV2.js +18 -11
  6. package/Tab/subComponent/TabPanelV2.js +20 -16
  7. package/Tab/subComponent/TabTabV2.js +21 -33
  8. package/VerticalTab/TabList.js +18 -13
  9. package/VerticalTab/TabPanel.js +20 -16
  10. package/VerticalTab/TabTab.js +21 -40
  11. package/VerticalTab/VerticalTab.js +4 -8
  12. package/alert/Alert.js +5 -12
  13. package/animate/Collapse.js +7 -5
  14. package/animate/Loader.js +7 -18
  15. package/animate/PulseRing.js +5 -18
  16. package/animate/Spinner.js +3 -8
  17. package/backdrop/BaseBackdrop.js +3 -9
  18. package/backdrop/LoadingBackdrop.js +3 -7
  19. package/backdrop/ModalBackdrop.js +3 -5
  20. package/badge/Badge.js +3 -15
  21. package/badge/BadgeDot.js +3 -8
  22. package/badge/BadgeFill.js +6 -24
  23. package/badge/BadgeWithText.js +3 -13
  24. package/billing/BarChart.js +1 -1
  25. package/breadcrumb/Breadcrumb.js +3 -42
  26. package/button/Button.js +20 -88
  27. package/button/ButtonGroup.js +9 -33
  28. package/button/IconButton.js +10 -37
  29. package/button/ScrollToTopButton.js +4 -12
  30. package/callout/Callout.js +8 -37
  31. package/chart/BarChart.js +27 -11
  32. package/chart/DoughnutChart.js +20 -34
  33. package/chart/LineChart.js +22 -13
  34. package/chart/SingleBarChart.js +5 -22
  35. package/chart/utils/centerTextPlugin.js +2 -2
  36. package/chart/utils/customTooltip.js +8 -8
  37. package/chart/utils/htmlLegendPlugin.js +1 -1
  38. package/chart/utils/yAxisTopTitlePlugin.js +1 -1
  39. package/container/FlexContainer.js +7 -15
  40. package/cropper/Cropper.js +2 -1
  41. package/datetimePicker/DatePicker.js +26 -80
  42. package/datetimePicker/DatePickerV2.js +36 -95
  43. package/datetimePicker/DatetimePicker.js +11 -174
  44. package/datetimePicker/DatetimePickerV2.js +33 -87
  45. package/datetimePicker/DatetimePickerV3.js +11 -174
  46. package/datetimePicker/TimeInput.js +10 -35
  47. package/datetimePicker/TimePicker.js +22 -77
  48. package/datetimePicker/TimePickerStyle.js +3 -53
  49. package/datetimePicker/TimePickerV2.js +21 -54
  50. package/datetimePicker/accordion/Month.js +16 -93
  51. package/datetimePicker/accordion/Year.js +18 -96
  52. package/datetimePicker/hooks/useChangeNumber.js +6 -3
  53. package/datetimePicker/hooks/useDecrease.js +6 -3
  54. package/datetimePicker/hooks/useIncrease.js +6 -3
  55. package/datetimePicker/subComponent/Accordion.js +20 -101
  56. package/descriptionList/DescriptionDetail.js +4 -15
  57. package/descriptionList/DescriptionList.js +4 -12
  58. package/descriptionList/DescriptionTerm.js +3 -5
  59. package/divider/Divider.js +6 -15
  60. package/dropdown/DropdownButtonOption.js +6 -22
  61. package/dropdown/DropdownContent.js +15 -29
  62. package/dropdown/DropdownDivOption.js +3 -17
  63. package/dropdown/DropdownLinkOption.js +3 -14
  64. package/dropdown/DropdownToggle.js +15 -7
  65. package/dropzone/FileDropzone.js +22 -121
  66. package/dropzone/ImageDropzone.js +14 -83
  67. package/dropzone/subComponent/Message.js +4 -11
  68. package/figure/IconFigure.js +7 -16
  69. package/figure/ImageFigure.js +6 -19
  70. package/file/HiddenFileInput.js +3 -3
  71. package/form/Checkbox.js +13 -74
  72. package/form/Fieldset.js +3 -9
  73. package/form/FormItem.js +5 -10
  74. package/form/Input.js +7 -40
  75. package/form/Label.js +10 -34
  76. package/form/MutedText.js +4 -8
  77. package/form/PasswordInput.js +13 -20
  78. package/form/RadioButton.js +8 -55
  79. package/form/SearchSelect.js +12 -64
  80. package/form/Searchbox.js +19 -45
  81. package/form/Slider.js +10 -28
  82. package/form/SwitchButton.js +14 -48
  83. package/form/Textarea.js +3 -30
  84. package/form/TreeView.js +6 -13
  85. package/grid/Column.js +10 -23
  86. package/grid/Grid.js +6 -14
  87. package/heading/Heading1.js +4 -8
  88. package/heading/Heading2.js +5 -11
  89. package/heading/Heading3.js +8 -20
  90. package/iconbox/ApplicationIconBox.js +12 -48
  91. package/iconbox/IconBox.js +7 -31
  92. package/iconbox/IconBoxV2.js +8 -33
  93. package/iconbox/subComponent/IconBoxFigure.js +9 -17
  94. package/iconbox/subComponent/IconBoxImage.js +8 -21
  95. package/image/ImageFluid.js +3 -7
  96. package/image/UploadImage.js +18 -66
  97. package/jsoneditor/JsonEditor.js +15 -121
  98. package/keyframe/Pulse.js +3 -13
  99. package/keyframe/Spin.js +3 -5
  100. package/layout/Aside.js +5 -30
  101. package/layout/Backdrop.js +4 -8
  102. package/layout/Container.js +5 -21
  103. package/layout/Footer.js +7 -26
  104. package/link/LinkSpan.js +19 -37
  105. package/map/GoogleMap.js +7 -3
  106. package/map/GoogleReverseGeolocation.js +3 -6
  107. package/map/LeafletMap.js +2 -2
  108. package/map/subComponent/GoogleMapContainer.js +4 -16
  109. package/map/subComponent/GoogleMapPopup.js +10 -7
  110. package/map/subComponent/GoogleMapWrapper.js +15 -8
  111. package/map/subComponent/LeafletDrawControl.js +7 -9
  112. package/map/subComponent/LeafletMapContainer.js +4 -159
  113. package/modal/StateModal.js +28 -49
  114. package/modal/TitleModal.js +29 -70
  115. package/package.json +1 -1
  116. package/page/Disclaimer.js +3 -119
  117. package/paginate/Paginate.js +12 -54
  118. package/popover/Popover.js +25 -30
  119. package/qrcode/QRCode.js +6 -20
  120. package/qrcode/QRCodeContainter.js +4 -12
  121. package/ribbon/Ribbon.js +4 -29
  122. package/section/Section.js +20 -68
  123. package/section/SectionBody.js +8 -29
  124. package/section/SectionHeader.js +11 -36
  125. package/section/SectionToolbar.js +3 -9
  126. package/section/SectionToolbarItem.js +3 -8
  127. package/select/InputSelect.js +23 -16
  128. package/select/Select.js +43 -112
  129. package/select/subComponent/Checkbox.js +5 -24
  130. package/select/subComponent/Footer.js +3 -4
  131. package/select/subComponent/ListBox.js +5 -12
  132. package/select/subComponent/Option.js +7 -27
  133. package/select/subComponent/OptionGroup.js +3 -13
  134. package/select/subComponent/Options.js +5 -18
  135. package/select/subComponent/SearchBox.js +12 -34
  136. package/select/subComponent/SelectedMultipleTags.js +3 -21
  137. package/select/subComponent/SelectedMultipleText.js +4 -20
  138. package/select/subComponent/SelectedSingle.js +3 -7
  139. package/styles/GlobalStyle.js +45 -156
  140. package/styles/mixin/backgroundColor.js +8 -16
  141. package/styles/mixin/borderColor.js +7 -13
  142. package/styles/mixin/color.js +7 -13
  143. package/styles/mixin/colorOnBackground.js +7 -13
  144. package/styles/mixin/inputPlaceholder.js +3 -20
  145. package/styles/mixin/media.js +3 -5
  146. package/styles/mixin/rounded.js +6 -10
  147. package/styles/mixin/scrollbar.js +3 -13
  148. package/styles/theme/dark.theme.js +14 -15
  149. package/styles/theme/light.theme.js +14 -15
  150. package/styles/theme/white.theme.js +14 -15
  151. package/table/GridTable.js +33 -71
  152. package/table/ImageBox.js +5 -15
  153. package/table/InfiniteGridTable.js +46 -92
  154. package/table/PermissionTable.js +10 -32
  155. package/table/SimpleGridTable.js +17 -52
  156. package/table/Table.js +48 -198
  157. package/table/__mock__/columns.js +1 -1
  158. package/table/subComponent/BaseTableHeadCell.js +8 -37
  159. package/table/subComponent/GridTableFooter.js +4 -10
  160. package/table/subComponent/GridTableHeadCell.js +4 -6
  161. package/table/subComponent/Resizer.js +4 -19
  162. package/table/subComponent/TableFooter.js +6 -15
  163. package/table/subComponent/TableFooterInfo.js +3 -4
  164. package/table/subComponent/TableFooterPager.js +6 -19
  165. package/table/subComponent/TableHeadCell.js +3 -9
  166. package/table/subComponent/TableSort.js +7 -17
  167. package/tagify/TagifyStyle.js +3 -49
  168. package/tagify/Tags.js +21 -37
  169. package/tagify/templates/getCreateButtonTemplate.js +2 -5
  170. package/text/Paragraph.js +12 -50
  171. package/timeline/Timeline.js +17 -94
  172. package/toast/CustomToastContainer.js +3 -35
  173. package/toast/MessageContainer.js +4 -22
  174. package/tooltip/Tooltip.js +19 -47
  175. package/treeView/TreeViewV2.js +1 -1
  176. package/treeView/TreeflexStyle.js +3 -38
  177. package/wizard/Wizard.js +6 -115
@@ -5,57 +5,33 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ var _templateObject;
8
9
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
9
- const ButtonGroup = _styledComponents.default.div`
10
- display: flex;
11
- align-items: center;
12
-
13
- > button:not(:first-child),
14
- *:not(:first-child) {
15
- margin-left: var(--spacing-s);
16
- }
17
-
18
- ${_ref => {
10
+ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
11
+ const ButtonGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n > button:not(:first-child),\n *:not(:first-child) {\n margin-left: var(--spacing-s);\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), _ref => {
19
12
  let {
20
13
  alignCenter
21
14
  } = _ref;
22
15
  return alignCenter && 'justify-content: center;';
23
- }}
24
-
25
- ${_ref2 => {
16
+ }, _ref2 => {
26
17
  let {
27
18
  alignRight
28
19
  } = _ref2;
29
20
  return alignRight && 'justify-content: flex-end;';
30
- }}
31
-
32
- ${_ref3 => {
21
+ }, _ref3 => {
33
22
  let {
34
23
  marginBottom
35
24
  } = _ref3;
36
25
  return marginBottom && 'margin-bottom: var(--spacing);';
37
- }}
38
-
39
- ${_ref4 => {
26
+ }, _ref4 => {
40
27
  let {
41
28
  vertical
42
29
  } = _ref4;
43
- return vertical && `
44
- flex-direction: column;
45
-
46
- > button,
47
- > * {
48
- margin-left: 0 !important;
49
- margin-bottom: var(--spacing-s);
50
- }
51
- `;
52
- }}
53
-
54
- ${_ref5 => {
30
+ return vertical && "\n flex-direction: column;\n\n > button,\n > * {\n margin-left: 0 !important;\n margin-bottom: var(--spacing-s);\n }\n ";
31
+ }, _ref5 => {
55
32
  let {
56
33
  height100
57
34
  } = _ref5;
58
35
  return height100 && 'height: 100%;';
59
- }}
60
- `;
36
+ });
61
37
  var _default = exports.default = ButtonGroup;
@@ -5,68 +5,41 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
8
+ var _templateObject, _templateObject2;
8
9
  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); }
9
10
  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; }
11
+ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
10
12
  const IconButton = _styledComponents.default.div.attrs(() => ({
11
13
  role: 'button'
12
- }))`
13
- display: flex;
14
- justify-content: center;
15
- align-items: center;
16
- width: 40px;
17
- height: 40px;
18
- transition: 0.3s;
19
- position: relative;
20
- border-radius: var(--border-radius-l);
21
- color: ${_ref => {
14
+ }))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 40px;\n height: 40px;\n transition: 0.3s;\n position: relative;\n border-radius: var(--border-radius-l);\n color: ", ";\n cursor: ", ";\n margin: auto;\n\n ", "\n\n &:hover {\n ", "\n }\n\n > svg {\n font-size: 1.5rem;\n\n ", "\n\n ", "\n }\n"])), _ref => {
22
15
  let {
23
16
  disabled
24
17
  } = _ref;
25
18
  return disabled ? 'var(--color-grey)' : 'var(--font-on-background)';
26
- }};
27
- cursor: ${_ref2 => {
19
+ }, _ref2 => {
28
20
  let {
29
21
  disabled
30
22
  } = _ref2;
31
23
  return disabled ? 'no-drop' : 'pointer';
32
- }};
33
- margin: auto;
34
-
35
- ${_ref3 => {
24
+ }, _ref3 => {
36
25
  let {
37
26
  size
38
27
  } = _ref3;
39
- return size === 'small' && (0, _styledComponents.css)`
40
- width: 32px;
41
- height: 32px;
42
- `;
43
- }}
44
-
45
- &:hover {
46
- ${_ref4 => {
28
+ return size === 'small' && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 32px;\n height: 32px;\n "])));
29
+ }, _ref4 => {
47
30
  let {
48
31
  disabled
49
32
  } = _ref4;
50
33
  return !disabled && 'background: var(--color-hover)';
51
- }}
52
- }
53
-
54
- > svg {
55
- font-size: 1.5rem;
56
-
57
- ${_ref5 => {
34
+ }, _ref5 => {
58
35
  let {
59
36
  size
60
37
  } = _ref5;
61
38
  return size === 'small' && 'font-size: 1rem;';
62
- }}
63
-
64
- ${_ref6 => {
39
+ }, _ref6 => {
65
40
  let {
66
41
  size
67
42
  } = _ref6;
68
43
  return size === 'large' && 'font-size: 2rem;';
69
- }}
70
- }
71
- `;
44
+ });
72
45
  var _default = exports.default = IconButton;
@@ -9,7 +9,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
  var _md = require("react-icons/md");
10
10
  var _Button = _interopRequireDefault(require("./Button"));
11
11
  var _jsxRuntime = require("react/jsx-runtime");
12
+ var _templateObject;
12
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
+ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
13
15
  const ScrollToTopButton = () => {
14
16
  const [$display, setDisplay] = (0, _react.useState)(false);
15
17
  const toggleVisible = () => {
@@ -35,20 +37,10 @@ const ScrollToTopButton = () => {
35
37
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdOutlineArrowBackIosNew, {})
36
38
  });
37
39
  };
38
- const StyledScrollToTopButton = (0, _styledComponents.default)(_Button.default)`
39
- position: fixed;
40
- bottom: var(--spacing);
41
- right: var(--spacing);
42
- display: ${_ref => {
40
+ const StyledScrollToTopButton = (0, _styledComponents.default)(_Button.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: fixed;\n bottom: var(--spacing);\n right: var(--spacing);\n display: ", ";\n z-index: 30;\n\n > svg {\n transform: rotate(90deg);\n }\n"])), _ref => {
43
41
  let {
44
42
  $display
45
43
  } = _ref;
46
44
  return $display ? 'flex' : 'none';
47
- }};
48
- z-index: 30;
49
-
50
- > svg {
51
- transform: rotate(90deg);
52
- }
53
- `;
45
+ });
54
46
  var _default = exports.default = ScrollToTopButton;
@@ -5,44 +5,15 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
8
9
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
9
- const Callout = _styledComponents.default.div`
10
- padding: var(--spacing);
11
- border-radius: var(--border-radius);
12
- background: var(--color-background3);
13
- margin-bottom: var(--spacing);
14
- `;
15
- const Body = _styledComponents.default.div`
16
- display: flex;
17
- align-items: center;
18
- `;
19
- const Content = _styledComponents.default.div`
20
- flex: 2;
21
- `;
22
- const Title = _styledComponents.default.h3`
23
- font-size: var(--font-h3);
24
- font-weight: 500;
25
- color: var(--font-on-background);
26
- margin-bottom: var(--border-radius);
27
- `;
28
- const Description = _styledComponents.default.p`
29
- font-size: var(--font-body1);
30
- line-height: 1.5;
31
- color: var(--font-on-mute);
32
- padding-right: var(--spacing);
33
- font-weight: 400;
34
-
35
- &:last-child {
36
- margin-bottom: 0;
37
- }
38
- `;
39
- const Action = _styledComponents.default.div`
40
- flex: 1;
41
- display: flex;
42
- flex-direction: column;
43
- align-items: flex-end;
44
- justify-content: center;
45
- `;
10
+ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
11
+ const Callout = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: var(--spacing);\n border-radius: var(--border-radius);\n background: var(--color-background3);\n margin-bottom: var(--spacing);\n"])));
12
+ const Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
13
+ const Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 2;\n"])));
14
+ const Title = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: var(--font-h3);\n font-weight: 500;\n color: var(--font-on-background);\n margin-bottom: var(--border-radius);\n"])));
15
+ const Description = _styledComponents.default.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: var(--font-body1);\n line-height: 1.5;\n color: var(--font-on-mute);\n padding-right: var(--spacing);\n font-weight: 400;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
16
+ const Action = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: center;\n"])));
46
17
  var _default = exports.default = Object.assign(Callout, {
47
18
  Body,
48
19
  Content,
package/chart/BarChart.js CHANGED
@@ -11,14 +11,22 @@ var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
11
11
  var _padEmptyChartBar = _interopRequireDefault(require("./utils/padEmptyChartBar"));
12
12
  var _yAxisTopTitlePlugin = _interopRequireDefault(require("./utils/yAxisTopTitlePlugin"));
13
13
  var _jsxRuntime = require("react/jsx-runtime");
14
+ const _excluded = ["height", "data", "options"];
14
15
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
16
+ 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; }
17
+ 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; }
18
+ 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; }
19
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
20
+ 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); }
21
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
22
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
15
23
  const BarChart = _ref => {
16
24
  let {
17
- height = 300,
18
- data,
19
- options = {},
20
- ...props
21
- } = _ref;
25
+ height = 300,
26
+ data,
27
+ options = {}
28
+ } = _ref,
29
+ props = _objectWithoutProperties(_ref, _excluded);
22
30
  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
23
31
 
24
32
  // fix: read value from theme
@@ -47,6 +55,10 @@ const BarChart = _ref => {
47
55
  responsive: true,
48
56
  maintainAspectRatio: false,
49
57
  aspectRatio: 1,
58
+ interaction: {
59
+ mode: 'nearest',
60
+ intersect: false
61
+ },
50
62
  plugins: {
51
63
  padEmptyChartBar: {
52
64
  maxBarNumber: customOptions.maxBarNumber
@@ -66,11 +78,16 @@ const BarChart = _ref => {
66
78
  return context[0] ? context[0].label.match(/(.{1,20})/g) : '';
67
79
  },
68
80
  label(context) {
81
+ var _context$dataset$tool;
82
+ const tooltipLabel = (_context$dataset$tool = context.dataset.tooltipLabels) === null || _context$dataset$tool === void 0 ? void 0 : _context$dataset$tool[context.dataIndex];
83
+ if (tooltipLabel !== undefined) {
84
+ return "".concat(context.dataset.label, ": ").concat(tooltipLabel);
85
+ }
69
86
  const label = context.dataset.data[context.dataIndex];
70
87
  if (context.dataset.customLabel) {
71
88
  return context.dataset.customLabel[context.dataIndex].toString();
72
89
  }
73
- return `${label.toString()}${customOptions.tooltipLabelPostfix}`;
90
+ return "".concat(context.dataset.label, ": ").concat(label.toString()).concat(customOptions.tooltipLabelPostfix);
74
91
  },
75
92
  labelTextColor(context) {
76
93
  const {
@@ -101,7 +118,7 @@ const BarChart = _ref => {
101
118
  minRotation: customOptions.rotateLabel ? 15 : 0,
102
119
  callback(value) {
103
120
  const label = this.getLabelForValue(value);
104
- return label && label.length > 11 ? `${label.substr(0, 11)}...` : label;
121
+ return label && label.length > 11 ? "".concat(label.substr(0, 11), "...") : label;
105
122
  }
106
123
  }
107
124
  },
@@ -129,12 +146,11 @@ const BarChart = _ref => {
129
146
  }
130
147
  };
131
148
  }, [customOptions, theme.fontOnPrimary]);
132
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Bar, {
149
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Bar, _objectSpread({
133
150
  height: height,
134
151
  data: data,
135
152
  options: defaultOptions,
136
- plugins: [_padEmptyChartBar.default, _yAxisTopTitlePlugin.default],
137
- ...props
138
- });
153
+ plugins: [_padEmptyChartBar.default, _yAxisTopTitlePlugin.default]
154
+ }, props));
139
155
  };
140
156
  var _default = exports.default = BarChart;
@@ -12,17 +12,27 @@ var _htmlLegendPlugin = _interopRequireDefault(require("./utils/htmlLegendPlugin
12
12
  var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
13
13
  var _centerTextPlugin = _interopRequireDefault(require("./utils/centerTextPlugin"));
14
14
  var _jsxRuntime = require("react/jsx-runtime");
15
+ var _templateObject;
16
+ const _excluded = ["height", "data", "showCenterText", "centerTextTitle"];
15
17
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
16
18
  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); }
17
19
  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; }
20
+ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
21
+ 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; }
22
+ 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; }
23
+ 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; }
24
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
25
+ 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); }
26
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
27
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
18
28
  const DoughnutChart = _ref => {
19
29
  let {
20
- height = 300,
21
- data,
22
- showCenterText = false,
23
- centerTextTitle,
24
- ...props
25
- } = _ref;
30
+ height = 300,
31
+ data,
32
+ showCenterText = false,
33
+ centerTextTitle
34
+ } = _ref,
35
+ props = _objectWithoutProperties(_ref, _excluded);
26
36
  const [legendContainerId] = (0, _react.useState)((0, _lodash.default)('legend-container-'));
27
37
  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
28
38
 
@@ -79,40 +89,16 @@ const DoughnutChart = _ref => {
79
89
  }, [legendContainerId, theme.fontOnPrimary, showCenterText, centerTextTitle]);
80
90
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
81
91
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
82
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Doughnut, {
92
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Doughnut, _objectSpread({
83
93
  height: height,
84
94
  data: data,
85
95
  options: defaultOptions,
86
- plugins: [_htmlLegendPlugin.default, _centerTextPlugin.default],
87
- ...props
88
- })
96
+ plugins: [_htmlLegendPlugin.default, _centerTextPlugin.default]
97
+ }, props))
89
98
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LegendWrapper, {
90
99
  id: legendContainerId
91
100
  })]
92
101
  });
93
102
  };
94
- const LegendWrapper = _styledComponents.default.div`
95
- .custom-legend-tooltip {
96
- position: relative;
97
- }
98
-
99
- .custom-legend-tooltip:hover::after {
100
- content: attr(data-tooltip);
101
- position: absolute;
102
- top: calc(1rem + var(--spacing-xs));
103
- left: 50%;
104
- transform: translateX(-50%);
105
- border: 1px solid var(--border-color);
106
- color: var(--font-on-background);
107
- background: var(--color-background2);
108
- box-shadow: var(--box-shadow);
109
- border-radius: calc(var(--border-radius) / 2);
110
- padding: var(--spacing-xs);
111
- font-size: var(--font-body1);
112
- font-weight: var(--font-normal);
113
- text-align: center;
114
- width: max-content;
115
- max-width: 50vw;
116
- }
117
- `;
103
+ const LegendWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .custom-legend-tooltip {\n position: relative;\n }\n\n .custom-legend-tooltip:hover::after {\n content: attr(data-tooltip);\n position: absolute;\n top: calc(1rem + var(--spacing-xs));\n left: 50%;\n transform: translateX(-50%);\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: calc(var(--border-radius) / 2);\n padding: var(--spacing-xs);\n font-size: var(--font-body1);\n font-weight: var(--font-normal);\n text-align: center;\n width: max-content;\n max-width: 50vw;\n }\n"])));
118
104
  var _default = exports.default = DoughnutChart;
@@ -10,14 +10,22 @@ var _reactChartjs = require("react-chartjs-2");
10
10
  var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
11
11
  var _yAxisTopTitlePlugin = _interopRequireDefault(require("./utils/yAxisTopTitlePlugin"));
12
12
  var _jsxRuntime = require("react/jsx-runtime");
13
+ const _excluded = ["height", "data", "options"];
13
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
+ 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; }
16
+ 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; }
17
+ 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; }
18
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
19
+ 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); }
20
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
21
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
14
22
  const LineChart = _ref => {
15
23
  let {
16
- height = 300,
17
- data,
18
- options = {},
19
- ...props
20
- } = _ref;
24
+ height = 300,
25
+ data,
26
+ options = {}
27
+ } = _ref,
28
+ props = _objectWithoutProperties(_ref, _excluded);
21
29
  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
22
30
 
23
31
  // fix: read value from theme
@@ -66,15 +74,17 @@ const LineChart = _ref => {
66
74
  callbacks: {
67
75
  title(context) {
68
76
  const content = context[0] ? context[0].label.match(/(.{1,20})/g) : '';
69
- return `${customOptions.tooltipTitlePrefix}${content}`;
77
+ return "".concat(customOptions.tooltipTitlePrefix).concat(content);
70
78
  },
71
79
  label(context) {
72
- const tooltipLabel = context.dataset.tooltipLabels?.[context.dataIndex];
80
+ var _context$dataset$tool;
81
+ const datasetLabel = context.dataset.label || '';
82
+ const tooltipLabel = (_context$dataset$tool = context.dataset.tooltipLabels) === null || _context$dataset$tool === void 0 ? void 0 : _context$dataset$tool[context.dataIndex];
73
83
  if (tooltipLabel !== undefined) {
74
- return `${context.dataset.label}: ${tooltipLabel}`;
84
+ return datasetLabel ? "".concat(datasetLabel, ": ").concat(tooltipLabel) : "".concat(tooltipLabel);
75
85
  }
76
86
  const content = context.dataset.data[context.dataIndex].toString();
77
- return `${context.dataset.label}: ${customOptions.tooltipLabelPrefix}${content}${customOptions.tooltipLabelPostfix}`;
87
+ return datasetLabel ? "".concat(datasetLabel, ": ").concat(customOptions.tooltipLabelPrefix).concat(content).concat(customOptions.tooltipLabelPostfix) : "".concat(customOptions.tooltipLabelPrefix).concat(content).concat(customOptions.tooltipLabelPostfix);
78
88
  },
79
89
  labelColor(context) {
80
90
  const {
@@ -134,12 +144,11 @@ const LineChart = _ref => {
134
144
  }
135
145
  };
136
146
  }, [customOptions, theme.fontOnPrimary]);
137
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Line, {
147
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactChartjs.Line, _objectSpread({
138
148
  height: height,
139
149
  data: data,
140
150
  options: defaultOptions,
141
- plugins: [_yAxisTopTitlePlugin.default],
142
- ...props
143
- });
151
+ plugins: [_yAxisTopTitlePlugin.default]
152
+ }, props));
144
153
  };
145
154
  var _default = exports.default = LineChart;
@@ -6,37 +6,20 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
8
8
  var _backgroundColor = _interopRequireDefault(require("../styles/mixin/backgroundColor"));
9
+ var _templateObject;
9
10
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
11
+ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
10
12
  const SingleBarChart = _styledComponents.default.div.attrs(() => ({
11
13
  primary: true
12
- }))`
13
- position: relative;
14
- width: 100%;
15
- height: 1rem;
16
- border-radius: var(--border-radius);
17
- background: var(--color-background3);
18
-
19
- &::before {
20
- position: absolute;
21
- content: '';
22
- width: ${_ref => {
14
+ }))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n height: 1rem;\n border-radius: var(--border-radius);\n background: var(--color-background3);\n\n &::before {\n position: absolute;\n content: '';\n width: ", "%;\n border-radius: var(--border-radius);\n top: 0;\n bottom: 0;\n\n ", "\n }\n\n ", "\n"])), _ref => {
23
15
  let {
24
16
  percentage
25
17
  } = _ref;
26
18
  return percentage;
27
- }}%;
28
- border-radius: var(--border-radius);
29
- top: 0;
30
- bottom: 0;
31
-
32
- ${_backgroundColor.default}
33
- }
34
-
35
- ${_ref2 => {
19
+ }, _backgroundColor.default, _ref2 => {
36
20
  let {
37
21
  marginTop
38
22
  } = _ref2;
39
23
  return marginTop && 'margin-top: var(--spacing-s)';
40
- }}
41
- `;
24
+ });
42
25
  var _default = exports.default = SingleBarChart;
@@ -48,13 +48,13 @@ const centerTextPlugin = {
48
48
  title
49
49
  } = config;
50
50
  if (title) {
51
- ctx.font = `bold ${size}px ${family}`;
51
+ ctx.font = "bold ".concat(size, "px ").concat(family);
52
52
  ctx.fillText(title, centerX, centerY - offset);
53
53
  }
54
54
  const total = data.datasets[0].data.reduce((total, current) => {
55
55
  return total + current;
56
56
  }, 0);
57
- ctx.font = `${size}px ${family}`;
57
+ ctx.font = "".concat(size, "px ").concat(family);
58
58
  ctx.fillText(total.toLocaleString(), centerX, centerY + (title ? offset : 0));
59
59
  ctx.restore();
60
60
  }
@@ -41,16 +41,16 @@ const customTooltip = theme => {
41
41
  });
42
42
  let innerHtml = '<thead>';
43
43
  titleLines.forEach(title => {
44
- innerHtml += `<tr><th>${title}</th></tr>`;
44
+ innerHtml += "<tr><th>".concat(title, "</th></tr>");
45
45
  });
46
46
  innerHtml += '</thead><tbody>';
47
47
  bodyLines.forEach(body => {
48
48
  if (Array.isArray(body)) {
49
49
  body.forEach(line => {
50
- innerHtml += `<tr><td>${line}</td></tr>`;
50
+ innerHtml += "<tr><td>".concat(line, "</td></tr>");
51
51
  });
52
52
  } else {
53
- innerHtml += `<tr><td>${body}</td></tr>`;
53
+ innerHtml += "<tr><td>".concat(body, "</td></tr>");
54
54
  }
55
55
  });
56
56
  innerHtml += '</tbody>';
@@ -71,23 +71,23 @@ const customTooltip = theme => {
71
71
  tooltipEl.style.background = tooltipModel.labelColors[0].backgroundColor;
72
72
  tooltipEl.style.borderRadius = theme.borderRadius;
73
73
  tooltipEl.style.textAlign = 'center';
74
- tooltipEl.style.padding = `${theme.spacerXS} ${theme.spacerS}`;
74
+ tooltipEl.style.padding = "".concat(theme.spacerXS, " ").concat(theme.spacerS);
75
75
  tooltipEl.style.pointerEvents = 'none';
76
76
 
77
77
  // determine position is left or right
78
78
  if (tooltipModel.caretX + tooltipEl.offsetWidth <= this._chart.width) {
79
79
  tooltipEl.style.borderTopLeftRadius = 0;
80
- tooltipEl.style.left = `${position.left + window.pageXOffset + tooltipModel.caretX + 8}px`;
80
+ tooltipEl.style.left = "".concat(position.left + window.pageXOffset + tooltipModel.caretX + 8, "px");
81
81
  } else {
82
82
  tooltipEl.style.borderTopRightRadius = 0;
83
- tooltipEl.style.left = `${position.left + window.pageXOffset + tooltipModel.caretX - tooltipModel.width - 16 * 2}px`;
83
+ tooltipEl.style.left = "".concat(position.left + window.pageXOffset + tooltipModel.caretX - tooltipModel.width - 16 * 2, "px");
84
84
  }
85
85
 
86
86
  // determine position is top or bottom
87
87
  if (tooltipModel.caretY + tooltipEl.offsetHeight <= this._chart.height) {
88
- tooltipEl.style.top = `${position.top + window.pageYOffset + tooltipModel.caretY + 8}px`;
88
+ tooltipEl.style.top = "".concat(position.top + window.pageYOffset + tooltipModel.caretY + 8, "px");
89
89
  } else {
90
- tooltipEl.style.top = `${position.top + window.pageYOffset + tooltipModel.caretY - tooltipModel.width - 16 * 2}px`;
90
+ tooltipEl.style.top = "".concat(position.top + window.pageYOffset + tooltipModel.caretY - tooltipModel.width - 16 * 2, "px");
91
91
  }
92
92
  };
93
93
  };
@@ -49,7 +49,7 @@ const htmlLegendPlugin = {
49
49
  const boxSpan = document.createElement('span');
50
50
  boxSpan.style.background = item.fillStyle;
51
51
  boxSpan.style.borderColor = item.strokeStyle;
52
- boxSpan.style.borderWidth = `${item.lineWidth}px`;
52
+ boxSpan.style.borderWidth = "".concat(item.lineWidth, "px");
53
53
  boxSpan.style.borderStyle = 'solid';
54
54
  boxSpan.style.display = 'inline-block';
55
55
  boxSpan.style.height = '16px';
@@ -36,7 +36,7 @@ const yAxisTopTitlePlugin = {
36
36
  family,
37
37
  size
38
38
  } = font;
39
- ctx.font = `bold ${size}px ${family}`;
39
+ ctx.font = "bold ".concat(size, "px ").concat(family);
40
40
  ctx.fillStyle = color;
41
41
  ctx.textAlign = 'left';
42
42
  ctx.textBaseline = 'middle';
@@ -5,36 +5,28 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ var _templateObject;
8
9
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
9
- const FlexContainer = _styledComponents.default.div`
10
- display: flex;
11
-
12
- ${_ref => {
10
+ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
11
+ const FlexContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n\n ", ";\n\n ", ";\n\n ", "\n\n ", "\n"])), _ref => {
13
12
  let {
14
13
  marginBottom
15
14
  } = _ref;
16
15
  return marginBottom && 'margin-bottom: var(--spacing-l)';
17
- }};
18
-
19
- ${_ref2 => {
16
+ }, _ref2 => {
20
17
  let {
21
18
  wrap
22
19
  } = _ref2;
23
20
  return wrap && 'flex-wrap: wrap';
24
- }};
25
-
26
- ${_ref3 => {
21
+ }, _ref3 => {
27
22
  let {
28
23
  alignCenter
29
24
  } = _ref3;
30
25
  return alignCenter && 'align-items: center;';
31
- }}
32
-
33
- ${_ref4 => {
26
+ }, _ref4 => {
34
27
  let {
35
28
  spaceBetween
36
29
  } = _ref4;
37
30
  return spaceBetween && 'justify-content: space-between;';
38
- }}
39
- `;
31
+ });
40
32
  var _default = exports.default = FlexContainer;
@@ -39,7 +39,8 @@ const CropperWrapper = _ref => {
39
39
  }
40
40
  }
41
41
  return () => {
42
- node?.cropper?.destroy();
42
+ var _node$cropper;
43
+ node === null || node === void 0 || (_node$cropper = node.cropper) === null || _node$cropper === void 0 || _node$cropper.destroy();
43
44
  };
44
45
  }, [onInitialized, dragMode, width, height, cropBoxResizable]);
45
46
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {