@spaced-out/ui-design-system 0.5.7-beta.2 → 0.5.7-beta.4

package/lib/components/ButtonTabs/ButtonTabDropdown.js

@@ -7,17 +7,17 @@ exports.ButtonTabDropdown = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var _lodash = require("lodash");
-var _space = require("src/styles/variables/_space");
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _clickAway = require("src/utils/click-away");
-var _mergeRefs = require("src/utils/merge-refs");
-var _ButtonTab = require("src/components/ButtonTabs/ButtonTab");
-var _Menu = require("src/components/Menu");
-var _Tooltip = require("src/components/Tooltip");
-var _ButtonTabDropdownModule = _interopRequireDefault(require("src/components/ButtonTabs/ButtonTabDropdown.module.css"));
+var _space = require("../../styles/variables/_space");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _clickAway = require("../../utils/click-away");
+var _mergeRefs = require("../../utils/merge-refs");
+var _ButtonTab = require("./ButtonTab");
+var _Menu = require("../Menu");
+var _Tooltip = require("../Tooltip");
+var _ButtonTabDropdownModule = _interopRequireDefault(require("./ButtonTabDropdown.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const ButtonTabDropdown = _ref => {
   let {
     title,
@@ -73,48 +73,57 @@ const ButtonTabDropdown = _ref => {
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
-  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, null, _ref3 => {
-    let {
-      isOpen,
-      onOpen,
-      clickAway,
-      boundaryRef,
-      triggerRef
-    } = _ref3;
-    return /*#__PURE__*/React.createElement("div", {
-      "data-testid": "ButtonTabDropdown",
-      className: (0, _classify.default)(_ButtonTabDropdownModule.default.buttonTabDropDownWrapper, dropdownClass)
-    }, /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, _extends({}, buttonTabProps, {
-      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
-      selectedButtonTabId: moreTabSelectedId,
-      onButtonTabSelect: (_id, e) => {
-        e?.stopPropagation();
-        onOpen();
-      }
-    }), title), isOpen && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
-      modal: false,
-      context: context,
-      initialFocus: refs.reference
-    }, /*#__PURE__*/React.createElement("div", {
-      className: _ButtonTabDropdownModule.default.menuWrapper,
-      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
-      style: {
-        display: 'flex',
-        position: strategy,
-        top: y ?? _space.spaceNone,
-        left: x ?? _space.spaceNone,
-        '--menu-elevation': (0, _Tooltip.getElevationValue)(elevation)
-      }
-    }, /*#__PURE__*/React.createElement(_Menu.Menu, {
-      onSelect: (option, e) => {
-        onTabSelect?.(option.key, e);
-        clickAway();
-      },
-      size: size,
-      options: menuOptions,
-      onTabOut: clickAway,
-      selectedKeys: [selectedButtonTabId ?? '']
-    })))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickAway.ClickAway, {
+    children: _ref3 => {
+      let {
+        isOpen,
+        onOpen,
+        clickAway,
+        boundaryRef,
+        triggerRef
+      } = _ref3;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        "data-testid": "ButtonTabDropdown",
+        className: (0, _classify.default)(_ButtonTabDropdownModule.default.buttonTabDropDownWrapper, dropdownClass),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonTab.ButtonTab, {
+          ...buttonTabProps,
+          ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
+          selectedButtonTabId: moreTabSelectedId,
+          onButtonTabSelect: (_id, e) => {
+            e?.stopPropagation();
+            onOpen();
+          },
+          children: title
+        }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingPortal, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingFocusManager, {
+            modal: false,
+            context: context,
+            initialFocus: refs.reference,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: _ButtonTabDropdownModule.default.menuWrapper,
+              ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
+              style: {
+                display: 'flex',
+                position: strategy,
+                top: y ?? _space.spaceNone,
+                left: x ?? _space.spaceNone,
+                '--menu-elevation': (0, _Tooltip.getElevationValue)(elevation)
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.Menu, {
+                onSelect: (option, e) => {
+                  onTabSelect?.(option.key, e);
+                  clickAway();
+                },
+                size: size,
+                options: menuOptions,
+                onTabOut: clickAway,
+                selectedKeys: [selectedButtonTabId ?? '']
+              })
+            })
+          })
+        })]
+      });
+    }
   });
 };
 exports.ButtonTabDropdown = ButtonTabDropdown;

package/lib/components/ButtonTabs/ButtonTabs.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Flow } from 'flow-to-typescript-codemod';
-import type { AnchorType } from 'src/components/ButtonDropdown';
-import type { ElevationType } from 'src/components/Tooltip';
+import type { AnchorType } from '../../components/ButtonDropdown';
+import type { ElevationType } from '../../components/Tooltip';
 type ClassNames = Readonly<{
     wrapper?: string;
     buttonTabDropdownWrapper?: string;

package/lib/components/ButtonTabs/ButtonTabs.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ButtonTabs = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _ButtonTabDropdown = require("src/components/ButtonTabs/ButtonTabDropdown");
-var _ButtonTabsModule = _interopRequireDefault(require("src/components/ButtonTabs/ButtonTabs.module.css"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ButtonTabDropdown = require("./ButtonTabDropdown");
+var _ButtonTabsModule = _interopRequireDefault(require("./ButtonTabs.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // Type definitions for child components
@@ -33,14 +34,15 @@ const ButtonTabs = exports.ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref
     unwrappedNodes = childrenArray.slice(0, wrapAfter);
     wrappedNodes = childrenArray.slice(wrapAfter);
     if (wrappedNodes.length) {
-      unwrappedNodes.push(/*#__PURE__*/React.createElement(_ButtonTabDropdown.ButtonTabDropdown, {
+      unwrappedNodes.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonTabDropdown.ButtonTabDropdown, {
         id: "more-tab",
         title: wrapTabTitle,
         iconName: "ellipsis-vertical",
         elevation: elevation,
         anchorPosition: anchorPosition,
-        dropdownClass: classNames?.buttonTabDropdownWrapper
-      }, wrappedNodes));
+        dropdownClass: classNames?.buttonTabDropdownWrapper,
+        children: wrappedNodes
+      }));
     }
   }
   const childrenWithProps = unwrappedNodes.map((child, index) => {
@@ -67,7 +69,7 @@ const ButtonTabs = exports.ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref
     }
     return child;
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     "data-testid": "ButtonTabs",
     ref: ref,
     className: (0, _classify.default)(_ButtonTabsModule.default.buttonTabsWrapper, {
@@ -75,6 +77,7 @@ const ButtonTabs = exports.ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref
       [_ButtonTabsModule.default.small]: size === 'small',
       [_ButtonTabsModule.default.isFluid]: isFluid,
       [_ButtonTabsModule.default.disabled]: disabled
-    }, classNames?.wrapper)
-  }, childrenWithProps);
+    }, classNames?.wrapper),
+    children: childrenWithProps
+  });
 });

package/lib/components/ButtonTabs/index.d.ts

@@ -1,3 +1,3 @@
-export * from 'src/components/ButtonTabs/ButtonTab';
-export * from 'src/components/ButtonTabs/ButtonTabs';
+export * from '../../components/ButtonTabs/ButtonTab';
+export * from '../../components/ButtonTabs/ButtonTabs';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/ButtonTabs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _ButtonTab = require("src/components/ButtonTabs/ButtonTab");
+var _ButtonTab = require("./ButtonTab");
 Object.keys(_ButtonTab).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _ButtonTab[key]) return;
@@ -14,7 +14,7 @@ Object.keys(_ButtonTab).forEach(function (key) {
     }
   });
 });
-var _ButtonTabs = require("src/components/ButtonTabs/ButtonTabs");
+var _ButtonTabs = require("./ButtonTabs");
 Object.keys(_ButtonTabs).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _ButtonTabs[key]) return;

package/lib/components/Card/Card.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PADDING_SIZES = exports.ClickableCard = exports.CardTitle = exports.CardHeader = exports.CardFooter = exports.CardContent = exports.CardActions = exports.Card = void 0;
 var React = _interopRequireWildcard(require("react"));
-var SPACES = _interopRequireWildcard(require("src/styles/variables/_space"));
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _string = require("src/utils/string");
-var _CardModule = _interopRequireDefault(require("src/components/Card/Card.module.css"));
+var SPACES = _interopRequireWildcard(require("../../styles/variables/_space"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _string = require("../../utils/string");
+var _CardModule = _interopRequireDefault(require("./Card.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const PADDING_SIZES = exports.PADDING_SIZES = Object.freeze({
   small: 'small',
   medium: 'medium',
@@ -28,9 +28,11 @@ const CardHeader = _ref => {
     children,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: (0, _classify.default)(_CardModule.default.cardHeader, className)
-  }), children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
+    className: (0, _classify.default)(_CardModule.default.cardHeader, className),
+    children: children
+  });
 };
 exports.CardHeader = CardHeader;
 const CardTitle = _ref2 => {
@@ -39,9 +41,11 @@ const CardTitle = _ref2 => {
     children,
     ...props
   } = _ref2;
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: (0, _classify.default)(_CardModule.default.cardTitle, className)
-  }), children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
+    className: (0, _classify.default)(_CardModule.default.cardTitle, className),
+    children: children
+  });
 };
 exports.CardTitle = CardTitle;
 const CardActions = _ref3 => {
@@ -50,9 +54,11 @@ const CardActions = _ref3 => {
     children,
     ...props
   } = _ref3;
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: (0, _classify.default)(_CardModule.default.cardActions, className)
-  }), children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
+    className: (0, _classify.default)(_CardModule.default.cardActions, className),
+    children: children
+  });
 };
 exports.CardActions = CardActions;
 const CardFooter = _ref4 => {
@@ -61,9 +67,11 @@ const CardFooter = _ref4 => {
     children,
     ...props
   } = _ref4;
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: (0, _classify.default)(_CardModule.default.cardFooter, className)
-  }), children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
+    className: (0, _classify.default)(_CardModule.default.cardFooter, className),
+    children: children
+  });
 };
 exports.CardFooter = CardFooter;
 const CardContent = _ref5 => {
@@ -72,9 +80,11 @@ const CardContent = _ref5 => {
     children,
     ...props
   } = _ref5;
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: (0, _classify.default)(_CardModule.default.cardContent, className)
-  }), children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
+    className: (0, _classify.default)(_CardModule.default.cardContent, className),
+    children: children
+  });
 };
 exports.CardContent = CardContent;
 const Card = exports.Card = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
@@ -87,7 +97,8 @@ const Card = exports.Card = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     paddingLeft = 'medium',
     ...props
   } = _ref6;
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
     style: {
       '--card-padding-top': getPaddingValue(paddingTop),
       '--card-padding-right': getPaddingValue(paddingRight),
@@ -96,8 +107,9 @@ const Card = exports.Card = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     },
     "data-testid": "Card",
     className: (0, _classify.default)(_CardModule.default.cardWrapper, classNames?.wrapper),
-    ref: ref
-  }), children);
+    ref: ref,
+    children: children
+  });
 });
 const ClickableCard = exports.ClickableCard = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
@@ -123,7 +135,8 @@ const ClickableCard = exports.ClickableCard = /*#__PURE__*/React.forwardRef((_re
       onClickHandler(e);
     }
   };
-  return /*#__PURE__*/React.createElement(Card, _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Card, {
+    ...props,
     classNames: {
       wrapper: (0, _classify.default)(_CardModule.default.clickableCard, {
         [_CardModule.default.disabled]: disabled
@@ -133,5 +146,5 @@ const ClickableCard = exports.ClickableCard = /*#__PURE__*/React.forwardRef((_re
     onClick: onClickHandler,
     onKeyDown: onKeyDownHandler,
     ref: ref
-  }));
+  });
 });

package/lib/components/Card/index.d.ts

@@ -1,2 +1,2 @@
-export * from 'src/components/Card/Card';
+export * from '../../components/Card/Card';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Card/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _Card = require("src/components/Card/Card");
+var _Card = require("./Card");
 Object.keys(_Card).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Card[key]) return;

package/lib/components/Charts/ChartTooltip/index.d.ts

@@ -1,3 +1,3 @@
-import type { ChartTooltip } from 'src/types/charts';
+import type { ChartTooltip } from '../../../types/charts';
 export declare const tooltipTheme: ChartTooltip;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Charts/ChartTooltip/index.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tooltipTheme = void 0;
-var _ChartTooltipModule = _interopRequireDefault(require("src/components/Charts/ChartTooltip/ChartTooltip.module.css"));
-var _typographyModule = _interopRequireDefault(require("src/styles/typography.module.css"));
+var _ChartTooltipModule = _interopRequireDefault(require("./ChartTooltip.module.css"));
+var _typographyModule = _interopRequireDefault(require("../../../styles/typography.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const tooltipTheme = exports.tooltipTheme = {
   headerFormat: `<span class="${_typographyModule.default.bodySmall} ${_ChartTooltipModule.default.tooltipHeader}">{point.key}</span>`,

package/lib/components/Charts/ChartWrapper/ChartWrapper.js

@@ -9,12 +9,13 @@ var _highcharts = _interopRequireDefault(require("highcharts"));
 var _accessibility = _interopRequireDefault(require("highcharts/modules/accessibility"));
 var _drilldown = _interopRequireDefault(require("highcharts/modules/drilldown"));
 var _exporting = _interopRequireDefault(require("highcharts/modules/exporting"));
-var _size = require("src/styles/variables/_size");
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _ButtonDropdown = require("src/components/ButtonDropdown");
-var _Card = require("src/components/Card");
-var _CircularLoader = require("src/components/CircularLoader");
-var _ChartWrapperModule = _interopRequireDefault(require("src/components/Charts/ChartWrapper/ChartWrapper.module.css"));
+var _size = require("../../../styles/variables/_size");
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
+var _ButtonDropdown = require("../../ButtonDropdown");
+var _Card = require("../../Card");
+var _CircularLoader = require("../../CircularLoader");
+var _ChartWrapperModule = _interopRequireDefault(require("./ChartWrapper.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // Type definitions for Highcharts chart ref
@@ -71,7 +72,7 @@ const CustomExportButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }, {});
     }
   };
-  return /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonDropdown.ButtonDropdown, {
     ariaLabel: "Export Chart Menu",
     menu: {
       isFluid: false,
@@ -98,25 +99,32 @@ const ChartWrapper = exports.ChartWrapper = /*#__PURE__*/React.forwardRef((_ref2
     hasEmptyData = false,
     emptyText
   } = _ref2;
-  return /*#__PURE__*/React.createElement(_Card.Card, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
     classNames: {
       wrapper: (0, _classify.default)(_ChartWrapperModule.default.wrapper, {
         [_ChartWrapperModule.default.justifyCenter]: isLoading
       }, classNames?.wrapper)
-    }
-  }, isLoading ? /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
-    size: "large",
-    className: (0, _classify.default)(_ChartWrapperModule.default.loader, classNames?.loader)
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Card.CardHeader, {
-    className: classNames?.header
-  }, /*#__PURE__*/React.createElement(_Card.CardTitle, {
-    className: classNames?.title
-  }, title), /*#__PURE__*/React.createElement(_Card.CardActions, {
-    className: (0, _classify.default)(_ChartWrapperModule.default.chartCardActions, classNames?.actions)
-  }, /*#__PURE__*/React.createElement(CustomExportButton, {
-    ref: ref,
-    customExportOptions: customExportOptions
-  }), headerActions ? headerActions : null)), /*#__PURE__*/React.createElement(_Card.CardContent, {
-    className: (0, _classify.default)(_ChartWrapperModule.default.chartContent, classNames?.content)
-  }, hasEmptyData && emptyText ? emptyText : children)));
+    },
+    children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularLoader.CircularLoader, {
+      size: "large",
+      className: (0, _classify.default)(_ChartWrapperModule.default.loader, classNames?.loader)
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardHeader, {
+        className: classNames?.header,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardTitle, {
+          className: classNames?.title,
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardActions, {
+          className: (0, _classify.default)(_ChartWrapperModule.default.chartCardActions, classNames?.actions),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomExportButton, {
+            ref: ref,
+            customExportOptions: customExportOptions
+          }), headerActions ? headerActions : null]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardContent, {
+        className: (0, _classify.default)(_ChartWrapperModule.default.chartContent, classNames?.content),
+        children: hasEmptyData && emptyText ? emptyText : children
+      })]
+    })
+  });
 });

package/lib/components/Charts/ChartWrapper/index.d.ts

@@ -1,2 +1,2 @@
-export * from 'src/components/Charts/ChartWrapper/ChartWrapper';
+export * from '../../../components/Charts/ChartWrapper/ChartWrapper';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Charts/ChartWrapper/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _ChartWrapper = require("src/components/Charts/ChartWrapper/ChartWrapper");
+var _ChartWrapper = require("./ChartWrapper");
 Object.keys(_ChartWrapper).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _ChartWrapper[key]) return;

package/lib/components/Charts/ColumnChart/ColumnChart.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { SeriesOptionsType } from 'highcharts';
-import type { ChartOptions, DataOptionsType, Drilldown } from 'src/types/charts';
-import type { ChartWrapperClassNames, ExportOptionType } from 'src/components/Charts/ChartWrapper';
+import type { ChartOptions, DataOptionsType, Drilldown } from '../../../types/charts';
+import type { ChartWrapperClassNames, ExportOptionType } from '../../../components/Charts/ChartWrapper';
 export interface SeriesWithData extends Omit<SeriesOptionsType, 'data'> {
     data?: DataOptionsType[];
 }

package/lib/components/Charts/ColumnChart/ColumnChart.js

@@ -7,10 +7,11 @@ exports.ColumnChart = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _highcharts = _interopRequireDefault(require("highcharts"));
 var _highchartsReactOfficial = _interopRequireDefault(require("highcharts-react-official"));
-var _charts = require("src/utils/charts");
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _ChartWrapper = require("src/components/Charts/ChartWrapper");
-var _ColumnChartModule = _interopRequireDefault(require("src/components/Charts/ColumnChart/ColumnChart.module.css"));
+var _charts = require("../../../utils/charts");
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
+var _ChartWrapper = require("../ChartWrapper");
+var _ColumnChartModule = _interopRequireDefault(require("./ColumnChart.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // Type guard to check if series has data property
@@ -67,7 +68,7 @@ const ColumnChart = _ref => {
     highChart,
     ...wrapperClassNames
   } = classNames || {};
-  return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartWrapper.ChartWrapper, {
     isLoading: isLoading,
     title: cardTitle,
     ref: chartRef,
@@ -75,14 +76,15 @@ const ColumnChart = _ref => {
     customExportOptions: customExportOptions,
     headerActions: headerActions,
     hasEmptyData: hasEmptyData,
-    emptyText: emptyText
-  }, /*#__PURE__*/React.createElement(_highchartsReactOfficial.default, {
-    highcharts: _highcharts.default,
-    containerProps: {
-      className: (0, _classify.default)(_ColumnChartModule.default.columnChartContainer, highChart)
-    },
-    ref: chartRef,
-    options: chartOptions
-  }));
+    emptyText: emptyText,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_highchartsReactOfficial.default, {
+      highcharts: _highcharts.default,
+      containerProps: {
+        className: (0, _classify.default)(_ColumnChartModule.default.columnChartContainer, highChart)
+      },
+      ref: chartRef,
+      options: chartOptions
+    })
+  });
 };
 exports.ColumnChart = ColumnChart;

package/lib/components/Charts/ColumnChart/index.d.ts

@@ -1,2 +1,2 @@
-export * from 'src/components/Charts/ColumnChart/ColumnChart';
+export * from '../../../components/Charts/ColumnChart/ColumnChart';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Charts/ColumnChart/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _ColumnChart = require("src/components/Charts/ColumnChart/ColumnChart");
+var _ColumnChart = require("./ColumnChart");
 Object.keys(_ColumnChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _ColumnChart[key]) return;

package/lib/components/Charts/DonutChart/DonutChart.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { ChartOptions, Drilldown, LegendOptionsType, SeriesOptionsType } from 'src/types/charts';
-import type { ChartWrapperClassNames, ExportOptionType } from 'src/components/Charts/ChartWrapper';
+import type { ChartOptions, Drilldown, LegendOptionsType, SeriesOptionsType } from '../../../types/charts';
+import type { ChartWrapperClassNames, ExportOptionType } from '../../../components/Charts/ChartWrapper';
 type ClassNames = Readonly<ChartWrapperClassNames & {
     highChart?: string;
     subtitleClassNames?: SubtitleClassNames;

package/lib/components/Charts/DonutChart/DonutChart.js

@@ -7,11 +7,12 @@ exports.DonutChart = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _highcharts = _interopRequireDefault(require("highcharts"));
 var _highchartsReactOfficial = _interopRequireDefault(require("highcharts-react-official"));
-var _charts = require("src/utils/charts");
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _ChartWrapper = require("src/components/Charts/ChartWrapper");
-var _DonutChartModule = _interopRequireDefault(require("src/components/Charts/DonutChart/DonutChart.module.css"));
-var _typographyModule = _interopRequireDefault(require("src/styles/typography.module.css"));
+var _charts = require("../../../utils/charts");
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
+var _ChartWrapper = require("../ChartWrapper");
+var _DonutChartModule = _interopRequireDefault(require("./DonutChart.module.css"));
+var _typographyModule = _interopRequireDefault(require("../../../styles/typography.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const DonutChart = _ref => {
@@ -74,7 +75,7 @@ const DonutChart = _ref => {
     drilldown: donutDrilldown,
     ...userOptions
   });
-  return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartWrapper.ChartWrapper, {
     isLoading: isLoading,
     title: cardTitle,
     ref: chartRef,
@@ -82,14 +83,15 @@ const DonutChart = _ref => {
     headerActions: headerActions,
     classNames: wrapperClassNames,
     hasEmptyData: hasEmptyData,
-    emptyText: emptyText
-  }, /*#__PURE__*/React.createElement(_highchartsReactOfficial.default, {
-    highcharts: _highcharts.default,
-    containerProps: {
-      className: (0, _classify.default)(_DonutChartModule.default.donutChartContainer, highChart)
-    },
-    ref: chartRef,
-    options: chartOptions
-  }));
+    emptyText: emptyText,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_highchartsReactOfficial.default, {
+      highcharts: _highcharts.default,
+      containerProps: {
+        className: (0, _classify.default)(_DonutChartModule.default.donutChartContainer, highChart)
+      },
+      ref: chartRef,
+      options: chartOptions
+    })
+  });
 };
 exports.DonutChart = DonutChart;

package/lib/components/Charts/DonutChart/index.d.ts

@@ -1,2 +1,2 @@
-export * from 'src/components/Charts/DonutChart/DonutChart';
+export * from '../../../components/Charts/DonutChart/DonutChart';
 //# sourceMappingURL=index.d.ts.map