@cashub/ui 0.4.2 → 0.5.0

package/table/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ImageBox", {
+  enumerable: true,
+  get: function get() {
+    return _ImageBox.default;
+  }
+});
+Object.defineProperty(exports, "PermissionTable", {
+  enumerable: true,
+  get: function get() {
+    return _PermissionTable.default;
+  }
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function get() {
+    return _Table.default;
+  }
+});
+
+var _Table = _interopRequireDefault(require("./Table"));
+
+var _PermissionTable = _interopRequireDefault(require("./PermissionTable"));
+
+var _ImageBox = _interopRequireDefault(require("./ImageBox"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/tagify/Tags.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _react2 = _interopRequireDefault(require("@yaireo/tagify/dist/react.tagify"));
+
+require("@yaireo/tagify/dist/tagify.css");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+var _excluded = ["onChange", "settings", "tagifyProps"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Tags = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var onChange = _ref.onChange,
+      settings = _ref.settings,
+      tagifyProps = _ref.tagifyProps,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.default, _objectSpread(_objectSpread({
+      tagifyRef: ref,
+      settings: settings
+    }, tagifyProps), {}, {
+      onChange: onChange
+    }, props))
+  });
+});
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .tagify {\n    --tags-disabled-bg: var(--font-on-mute);\n    --tags-border-color: var(--border-color);\n    --tags-hover-border-color: var(--border-color);\n    --tags-focus-border-color: var(--color-primary);\n    --tag-invalid-color: var(--color-danger);\n    --tag-remove-btn-bg--hover: var(--color-danger);\n    --input-color: var(--font-on-background);\n\n    border-radius: var(--border-radius-l);\n\n    .tagify__tag {\n      > div::before {\n        border-radius: var(--border-radius-l);\n      }\n    }\n  }\n"])));
+
+var _default = Tags;
+exports.default = _default;

package/tagify/index.js

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

package/text/Paragraph.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Paragraph = _styledComponents.default.p(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: var(--font-body1);\n  margin-bottom: var(--spacing-s);\n  word-break: break-word;\n  overflow-wrap: break-word;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var flex = _ref.flex;
+  return flex && "display: flex;";
+}, function (_ref2) {
+  var justifyContentBetween = _ref2.justifyContentBetween;
+  return justifyContentBetween && "justify-content: space-between;";
+}, function (_ref3) {
+  var inline = _ref3.inline;
+  return inline && "\n      display: inline;\n      margin-right: var(--spacing-s);\n    ";
+}, function (_ref4) {
+  var fontH3 = _ref4.fontH3;
+  return fontH3 && "font-size: var(--font-h3);";
+}, function (_ref5) {
+  var fontWeightBold = _ref5.fontWeightBold;
+  return fontWeightBold && "font-weight: bold;";
+});
+
+var _default = Paragraph;
+exports.default = _default;

package/text/index.js

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

package/timeline/Timeline.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Timeline = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    left: 7.8rem;\n    width: 0.214rem;\n    top: 5px;\n    bottom: 5px;\n    height: calc(100% - 5px);\n    background-color: #e7e9f5;\n  }\n"])));
+
+var Items = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+
+var Item = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: table;\n  position: relative;\n  margin-bottom: 1.5rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])));
+
+var ItemTag = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: table-cell;\n  font-size: var(--font-body1);\n  font-weight: 500;\n  vertical-align: top;\n  position: absolute;\n  padding-top: 0.5rem;\n  color: #fff;\n  width: 6.5rem;\n  text-align: center;\n"])));
+
+var ItemCircle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: 50%;\n  border: 0.89rem solid #2d2c4c;\n  z-index: 1;\n  top: 0.2rem;\n  left: 7rem;\n  position: relative;\n\n  > svg {\n    font-size: 1.5rem;\n    top: 0;\n    left: 0;\n    transform: translate(-50%, -50%);\n    position: absolute;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var success = _ref.success;
+  return success && "color: var(--color-success);";
+}, function (_ref2) {
+  var danger = _ref2.danger;
+  return danger && "color: var(--color-danger);";
+}, function (_ref3) {
+  var warning = _ref3.warning;
+  return warning && "color: var(--color-warning);";
+});
+
+var ItemDescription = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: table-cell;\n  vertical-align: top;\n  font-size: 1rem;\n  padding: 0 0 0 8rem;\n  color: #fff;\n"])));
+
+var ItemTitle = _styledComponents.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: block;\n  font-weight: 400;\n\n  &:last-child {\n    margin-top: 8px;\n  }\n"])));
+
+var ItemText = _styledComponents.default.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: block;\n  color: var(--font-on-mute);\n  margin-top: 8px;\n  line-height: 1.25;\n  word-break: break-all;\n"])));
+
+var _default = Object.assign(Timeline, {
+  Items: Items,
+  Item: Item,
+  ItemTag: ItemTag,
+  ItemCircle: ItemCircle,
+  ItemDescription: ItemDescription,
+  ItemTitle: ItemTitle,
+  ItemText: ItemText
+});
+
+exports.default = _default;

package/timeline/index.js

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

package/toast/CustomToastContainer.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactToastify = require("react-toastify");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var CustomToastContainer = (0, _styledComponents.default)(_reactToastify.ToastContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 360px;\n\n  .Toastify__toast {\n    padding: 15px 15px 15px 50px;\n    box-shadow: 0 0 8px #999999;\n    background-repeat: no-repeat;\n    background-position: 15px center;\n  }\n\n  .Toastify__toast--error {\n    background-color: var(--color-danger);\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=\");\n  }\n\n  .Toastify__toast--success {\n    background-color: var(--color-success);\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==\");\n  }\n\n  .Toastify__toast--warning {\n    background-color: var(--color-warning);\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==\");\n  }\n"])));
+var _default = CustomToastContainer;
+exports.default = _default;

package/toast/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CustomToastContainer", {
+  enumerable: true,
+  get: function get() {
+    return _CustomToastContainer.default;
+  }
+});
+Object.defineProperty(exports, "MessageContainer", {
+  enumerable: true,
+  get: function get() {
+    return _MessageContainer.default;
+  }
+});
+
+var _CustomToastContainer = _interopRequireDefault(require("./CustomToastContainer"));
+
+var _MessageContainer = _interopRequireDefault(require("./MessageContainer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/tooltip/Tooltip.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
+
+var _useForkRef = _interopRequireDefault(require("../utils/hooks/useForkRef"));
+
+var _useCustomPopper2 = _interopRequireDefault(require("../utils/hooks/useCustomPopper"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+      id = _ref.id,
+      title = _ref.title,
+      _ref$showArrow = _ref.showArrow,
+      showArrow = _ref$showArrow === void 0 ? false : _ref$showArrow,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? 'hover' : _ref$mode,
+      fixed = _ref.fixed,
+      inline = _ref.inline,
+      disabled = _ref.disabled;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      display = _useState2[0],
+      setDisplay = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      targetElement = _useState4[0],
+      setTargetElement = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      tooltipElement = _useState6[0],
+      setTooltipElement = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      arrowElement = _useState8[0],
+      setArrowElement = _useState8[1];
+
+  var ownRef = (0, _useForkRef.default)(setTargetElement, ref);
+
+  var _useCustomPopper = (0, _useCustomPopper2.default)(targetElement, tooltipElement, {
+    strategy: fixed ? 'fixed' : 'absolute',
+    arrowElement: arrowElement
+  }),
+      styles = _useCustomPopper.styles,
+      attributes = _useCustomPopper.attributes,
+      state = _useCustomPopper.state,
+      update = _useCustomPopper.update;
+
+  var handleOpen = (0, _react.useCallback)(function () {
+    setDisplay(true);
+    update();
+  }, [update]);
+  var handleClose = (0, _react.useCallback)(function () {
+    setDisplay(false);
+    update();
+  }, [update]);
+  var toggle = (0, _react.useCallback)(function () {
+    setDisplay(function (display) {
+      return !display;
+    });
+    update();
+  }, [update]);
+  var wraperProps = (0, _react.useMemo)(function () {
+    if (disabled) return;
+
+    if (mode === 'click') {
+      return {
+        onClick: toggle
+      };
+    } else {
+      return {
+        // mode ==="hover"
+        onClick: handleClose,
+        onMouseOver: handleOpen,
+        onMouseLeave: handleClose
+      };
+    }
+  }, [mode, handleClose, handleOpen, toggle, disabled]);
+
+  var childrenProps = _objectSpread(_objectSpread({}, children.props), {}, {
+    ref: ownRef
+  });
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
+    onOutsideClick: handleClose,
+    display: inline ? 'inline-block' : 'block',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, wraperProps), {}, {
+      children: [/*#__PURE__*/(0, _react.cloneElement)(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipTooltip, _objectSpread(_objectSpread({
+        id: id,
+        $display: display,
+        ref: setTooltipElement,
+        style: styles.popper
+      }, attributes.popper), {}, {
+        placement: state && state.placement,
+        children: [title, /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipArrow, {
+          ref: setArrowElement,
+          style: styles.arrow,
+          $display: showArrow
+        })]
+      }))]
+    }))
+  });
+});
+
+var TooltipTooltip = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  white-space: pre-line;\n  visibility: ", ";\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  z-index: 80;\n  text-align: left;\n  font-size: var(--font-body1);\n  font-weight: var(--font-normal);\n  line-height: 1.5;\n  word-break: break-word;\n  max-width: 50vw;\n"])), function (_ref2) {
+  var $display = _ref2.$display;
+  return $display ? 'visible' : 'hidden';
+});
+
+var TooltipArrow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: ", ";\n  top: -0.5rem;\n  left: 0;\n  width: 1rem;\n  height: 1rem;\n\n  &::before {\n    position: absolute;\n    display: block;\n    content: '';\n    border-color: transparent;\n    border-style: solid;\n    top: 0;\n    border-width: 0 0.5rem 0.5rem 0.5rem;\n    border-bottom-color: var(--border-color);\n  }\n"])), function (_ref3) {
+  var $display = _ref3.$display;
+  return $display ? 'block' : 'none';
+});
+
+var _default = Tooltip;
+exports.default = _default;

package/tooltip/index.js

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

package/utils/array/generateRange.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var range = function range(start, end) {
+  var arr = [];
+
+  for (var i = start; i <= end; i += 1) {
+    arr.push(i);
+  }
+
+  return arr;
+};
+
+var _default = range;
+exports.default = _default;

package/utils/chart/customTooltip.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var customTooltip = function customTooltip(theme) {
+  // optimize: render in react way
+  return function (context) {
+    // Tooltip Element
+    var tooltipEl = document.getElementById("chartjs-tooltip"); // Create element on first render
+
+    if (!tooltipEl) {
+      tooltipEl = document.createElement("div");
+      tooltipEl.id = "chartjs-tooltip";
+      tooltipEl.innerHTML = "<table></table>";
+      document.body.appendChild(tooltipEl);
+    } // Hide tooltip, if no tooltip or no data
+
+
+    var tooltipModel = context.tooltip;
+
+    if (!tooltipModel || !tooltipModel.dataPoints || !tooltipModel.dataPoints[0] || tooltipModel.opacity === 0) {
+      tooltipEl.style.display = "none";
+      return;
+    } // Set caret Position
+
+
+    tooltipEl.classList.remove("above", "below", "no-transform");
+
+    if (tooltipModel.yAlign) {
+      tooltipEl.classList.add(tooltipModel.yAlign);
+    } else {
+      tooltipEl.classList.add("no-transform");
+    } // Set Text
+
+
+    if (tooltipModel.body) {
+      var titleLines = tooltipModel.title || [];
+      var bodyLines = tooltipModel.body.map(function (bodyItem) {
+        return bodyItem.lines;
+      });
+      var innerHtml = "<thead>";
+      titleLines.forEach(function (title) {
+        innerHtml += "<tr><th>" + title + "</th></tr>";
+      });
+      innerHtml += "</thead><tbody>";
+      bodyLines.forEach(function (body) {
+        innerHtml += "<tr><td>" + body + "</td></tr>";
+      });
+      innerHtml += "</tbody>";
+      var tableRoot = tooltipEl.querySelector("table");
+      tableRoot.innerHTML = innerHtml;
+    } // `this` will be the overall tooltip
+
+
+    var position = context.chart.canvas.getBoundingClientRect(); // Display, position, and set styles for font
+
+    tooltipEl.style.fontFamily = theme.fontFamily;
+    tooltipEl.style.fontSize = theme.fontBody1;
+    tooltipEl.style.display = "block";
+    tooltipEl.style.position = "absolute";
+    tooltipEl.style.color = tooltipModel.labelTextColors[0];
+    tooltipEl.style.background = tooltipModel.labelColors[0].backgroundColor;
+    tooltipEl.style.borderRadius = theme.borderRadius;
+    tooltipEl.style.textAlign = "center";
+    tooltipEl.style.padding = "".concat(theme.spacerXS, " ").concat(theme.spacerS);
+    tooltipEl.style.pointerEvents = "none"; // determine position is left or right
+
+    if (tooltipModel.caretX + tooltipEl.offsetWidth <= this._chart.width) {
+      tooltipEl.style.borderTopLeftRadius = 0;
+      tooltipEl.style.left = "".concat(position.left + window.pageXOffset + tooltipModel.caretX + 8, "px");
+    } else {
+      tooltipEl.style.borderTopRightRadius = 0;
+      tooltipEl.style.left = "".concat(position.left + window.pageXOffset + tooltipModel.caretX - tooltipModel.width - 16 * 2, "px");
+    } // determine position is top or bottom
+
+
+    if (tooltipModel.caretY + tooltipEl.offsetHeight <= this._chart.height) {
+      tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 8 + "px";
+    } else {
+      tooltipEl.style.top = "".concat(position.top + window.pageYOffset + tooltipModel.caretY - tooltipModel.width - 16 * 2, "px");
+    }
+  };
+};
+
+var _default = customTooltip;
+exports.default = _default;

package/utils/chart/padEmptyChartBar.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// make chart bar seem like align left by pad empty bar at the end
+var padEmptyChartBar = {
+  id: "padEmptyChartBar",
+  length: -1,
+  // pad empty chart bar when data less than max bar number
+  beforeUpdate: function beforeUpdate(chart) {
+    this.length = -1;
+    var _chart$config$_config = chart.config._config,
+        data = _chart$config$_config.data,
+        options = _chart$config$_config.options;
+    var validLabels = data.labels.filter(function (label) {
+      return label !== null;
+    });
+    var maxBarNumber = options.plugins.padEmptyChartBar.maxBarNumber;
+
+    for (var i = validLabels.length; i < maxBarNumber; i++) {
+      this.length = this.length === -1 ? i : this.length;
+      data.labels[i] = null;
+      data.datasets[0].data[i] = 0;
+    }
+  },
+  // prevent padded empty chart bar to be drawn
+  afterUpdate: function afterUpdate(chart) {
+    var _chart$config$_config2 = chart.config._config,
+        data = _chart$config$_config2.data,
+        options = _chart$config$_config2.options;
+    var maxBarNumber = options.plugins.padEmptyChartBar.maxBarNumber;
+
+    if (this.length === -1) {
+      // restore draw function
+      for (var i = 0; i < maxBarNumber; i++) {// delete data.datasets[0]._meta[data.index].data[i].draw;
+      }
+    } else {
+      // prevents new charts to be drawn
+      for (var _i = this.length; _i < data.maxBarNumber; _i++) {
+        data.datasets[0]._meta[data.index].data[_i].draw = function () {};
+      }
+    }
+  }
+};
+var _default = padEmptyChartBar;
+exports.default = _default;