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

package/lib/components/PageTitle/PageTitle.js

@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TabSlot = exports.RightSlot = exports.PageTitle = exports.PageName = exports.PAGE_NAME_LIST = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _color = require("src/styles/variables/_color");
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _Button = require("src/components/Button");
-var _Icon = require("src/components/Icon");
-var _Text = require("src/components/Text");
-var _Tooltip = require("src/components/Tooltip");
-var _PageTitleModule = _interopRequireDefault(require("src/components/PageTitle/PageTitle.module.css"));
+var _color = require("../../styles/variables/_color");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _Tooltip = require("../Tooltip");
+var _PageTitleModule = _interopRequireDefault(require("./PageTitle.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); }
 // Define the expected props for page title children
 
 // Type for a page title child element that can be checked for displayName
@@ -145,9 +145,11 @@ const TabSlot = _ref => {
     className,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: (0, _classify.default)(_PageTitleModule.default.tabSlot, className)
-  }), children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
+    className: (0, _classify.default)(_PageTitleModule.default.tabSlot, className),
+    children: children
+  });
 };
 exports.TabSlot = TabSlot;
 TabSlot.displayName = 'TabSlot';
@@ -156,7 +158,10 @@ const RightSlot = _ref2 => {
     children,
     ...props
   } = _ref2;
-  return /*#__PURE__*/React.createElement("div", props, children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
+    children: children
+  });
 };
 exports.RightSlot = RightSlot;
 RightSlot.displayName = 'RightSlot';
@@ -165,9 +170,11 @@ const PageName = _ref3 => {
     children,
     ...props
   } = _ref3;
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _PageTitleModule.default.pageTitle
-  }), children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
+    className: _PageTitleModule.default.pageTitle,
+    children: children
+  });
 };
 exports.PageName = PageName;
 PageName.displayName = 'PageName';
@@ -198,35 +205,44 @@ const PageTitle = exports.PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref)
   const handleBack = () => {
     onBack?.();
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     "data-testid": "PageTitle",
     className: (0, _classify.default)(_PageTitleModule.default.pageTitleWrapper, classNames?.wrapper),
-    ref: ref
-  }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_PageTitleModule.default.leftSlot, classNames?.leftSlot)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _PageTitleModule.default.headerWithBackBtn
-  }, showBackButton && /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
-    title: "Navigate Back",
-    delayMotionDuration: "slow",
-    placement: "top-start"
-  }, /*#__PURE__*/React.createElement(_Button.Button, {
-    onClick: handleBack,
-    type: "tertiary",
-    iconLeftName: "chevron-left",
-    ariaLabel: "Navigate Back Button"
-  })), pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(PageName, null, /*#__PURE__*/React.createElement(_Text.TitleMedium, null, PAGE_NAME_LIST[pageNameKey].title, ' '), /*#__PURE__*/React.createElement(_Icon.Icon, {
-    type: PAGE_NAME_LIST[pageNameKey].iconType,
-    name: PAGE_NAME_LIST[pageNameKey].iconName,
-    size: "medium",
-    color: _Text.TEXT_COLORS.primary,
-    style: {
-      '--fa-primary-color': _color.colorIconPrimary,
-      '--fa-secondary-color': _color.colorIconSecondary,
-      '--fa-primary-opacity': '1.0',
-      '--fa-secondary-opacity': '1.0'
-    }
-  })) : getNamedComp('PageName')), getNamedComp('TabSlot')), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_PageTitleModule.default.rightSlot, classNames?.rightSlot)
-  }, getNamedComp('RightSlot')));
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classify.default)(_PageTitleModule.default.leftSlot, classNames?.leftSlot),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _PageTitleModule.default.headerWithBackBtn,
+        children: [showBackButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+          title: "Navigate Back",
+          delayMotionDuration: "slow",
+          placement: "top-start",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+            onClick: handleBack,
+            type: "tertiary",
+            iconLeftName: "chevron-left",
+            ariaLabel: "Navigate Back Button"
+          })
+        }), pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(PageName, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.TitleMedium, {
+            children: [PAGE_NAME_LIST[pageNameKey].title, ' ']
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            type: PAGE_NAME_LIST[pageNameKey].iconType,
+            name: PAGE_NAME_LIST[pageNameKey].iconName,
+            size: "medium",
+            color: _Text.TEXT_COLORS.primary,
+            style: {
+              '--fa-primary-color': _color.colorIconPrimary,
+              '--fa-secondary-color': _color.colorIconSecondary,
+              '--fa-primary-opacity': '1.0',
+              '--fa-secondary-opacity': '1.0'
+            }
+          })]
+        }) : getNamedComp('PageName')]
+      }), getNamedComp('TabSlot')]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_PageTitleModule.default.rightSlot, classNames?.rightSlot),
+      children: getNamedComp('RightSlot')
+    })]
+  });
 });

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

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

package/lib/components/PageTitle/index.js

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

package/lib/components/Pagination/Pagination.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Pagination = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _usePagination = require("src/hooks/usePagination");
-var _useWindowSize = require("src/hooks/useWindowSize");
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _helpers = require("src/utils/helpers");
-var _Dropdown = require("src/components/Dropdown");
-var _PaginationItem = require("src/components/Pagination/PaginationItem");
-var _Text = require("src/components/Text");
-var _PaginationModule = _interopRequireDefault(require("src/components/Pagination/Pagination.module.css"));
+var _usePagination = require("../../hooks/usePagination");
+var _useWindowSize = require("../../hooks/useWindowSize");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _helpers = require("../../utils/helpers");
+var _Dropdown = require("../Dropdown");
+var _PaginationItem = require("./PaginationItem");
+var _Text = require("../Text");
+var _PaginationModule = _interopRequireDefault(require("./Pagination.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 LARGE_LIST_DROPDOWN_OPTIONS = 50;
 const TABLET_SCREEN_SIZE = 640;
 const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -55,36 +55,43 @@ const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, re
     key: page.toString(),
     label: page.toString()
   }));
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
     "data-testid": "Pagination",
-    className: (0, _classify.default)(_PaginationModule.default.wrapper, classNames?.wrapper)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_PaginationModule.default.childrenSlot, classNames?.children)
-  }, children), /*#__PURE__*/React.createElement("div", {
-    className: _PaginationModule.default.paginatorSlots
-  }, style === 'secondary' && showPageSelectionDropDown && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
-    size: "small",
-    classNames: {
-      wrapper: _PaginationModule.default.dropdownWrapper
-    },
-    menu: {
-      options,
-      isFluid: true,
-      classNames: {
-        wrapper: _PaginationModule.default.menuWrapper
-      },
-      selectedKeys: currentPage ? [currentPage.toString()] : [],
-      virtualization: menuVirtualization
-    },
-    dropdownInputText: currentPage.toString(),
-    onChange: option => onChange?.(parseInt(option.key))
-  }), !!totalPages && !!currentPage && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
-    color: "tertiary",
-    className: _PaginationModule.default.secondaryLabel
-  }, staticPaginationLabel ? staticPaginationLabel : `of ${totalPages} ${totalPages > 1 ? 'Pages' : 'Page'}`)), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_PaginationModule.default.paginatorSlot, classNames?.paginator)
-  }, items?.map(item => /*#__PURE__*/React.createElement(_PaginationItem.PaginationItem, _extends({
-    key: item.id
-  }, item))))));
+    className: (0, _classify.default)(_PaginationModule.default.wrapper, classNames?.wrapper),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_PaginationModule.default.childrenSlot, classNames?.children),
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _PaginationModule.default.paginatorSlots,
+      children: [style === 'secondary' && showPageSelectionDropDown && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
+          size: "small",
+          classNames: {
+            wrapper: _PaginationModule.default.dropdownWrapper
+          },
+          menu: {
+            options,
+            isFluid: true,
+            classNames: {
+              wrapper: _PaginationModule.default.menuWrapper
+            },
+            selectedKeys: currentPage ? [currentPage.toString()] : [],
+            virtualization: menuVirtualization
+          },
+          dropdownInputText: currentPage.toString(),
+          onChange: option => onChange?.(parseInt(option.key))
+        }), !!totalPages && !!currentPage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleExtraSmall, {
+          color: "tertiary",
+          className: _PaginationModule.default.secondaryLabel,
+          children: staticPaginationLabel ? staticPaginationLabel : `of ${totalPages} ${totalPages > 1 ? 'Pages' : 'Page'}`
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_PaginationModule.default.paginatorSlot, classNames?.paginator),
+        children: items?.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PaginationItem.PaginationItem, {
+          ...item
+        }, item.id))
+      })]
+    })]
+  });
 });

package/lib/components/Pagination/PaginationItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PaginationItemProps } from 'src/components/Pagination/Pagination';
+import type { PaginationItemProps } from '../../components/Pagination/Pagination';
 export declare const PaginationButton: (props: PaginationItemProps) => React.JSX.Element | undefined;
 export declare const PaginationItem: (props: PaginationItemProps) => React.JSX.Element;
 //# sourceMappingURL=PaginationItem.d.ts.map

package/lib/components/Pagination/PaginationItem.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PaginationItem = exports.PaginationButton = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _Button = require("src/components/Button");
-var _Text = require("src/components/Text");
-var _PaginationModule = _interopRequireDefault(require("src/components/Pagination/Pagination.module.css"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Text = require("../Text");
+var _PaginationModule = _interopRequireDefault(require("./Pagination.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 PaginationButton = props => {
@@ -27,7 +28,7 @@ const PaginationButton = props => {
   }, [selected]);
   switch (type) {
     case 'first':
-      return /*#__PURE__*/React.createElement(_Button.Button, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
         classNames: {
           icon: (0, _classify.default)(_PaginationModule.default.icon, {
             [_PaginationModule.default.disabled]: disabled
@@ -45,7 +46,7 @@ const PaginationButton = props => {
         ariaLabel: "First page"
       });
     case 'previous':
-      return /*#__PURE__*/React.createElement(_Button.Button, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
         classNames: {
           icon: (0, _classify.default)(_PaginationModule.default.icon, {
             [_PaginationModule.default.disabled]: disabled
@@ -63,7 +64,7 @@ const PaginationButton = props => {
         ariaLabel: "Previous page"
       });
     case 'page':
-      return /*#__PURE__*/React.createElement(_Button.Button, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
         classNames: {
           wrapper: (0, _classify.default)(_PaginationModule.default.paginatorButton, {
             [_PaginationModule.default.selected]: selected
@@ -74,17 +75,20 @@ const PaginationButton = props => {
         onClick: onClick,
         disabled: disabled,
         ref: paginationBtnRef,
-        tabIndex: selected ? -1 : 0
-      }, page);
+        tabIndex: selected ? -1 : 0,
+        children: page
+      });
     case 'start-ellipsis':
     case 'end-ellipsis':
-      return /*#__PURE__*/React.createElement("div", {
-        className: (0, _classify.default)(_PaginationModule.default.separator)
-      }, /*#__PURE__*/React.createElement(_Text.ButtonTextSmall, {
-        color: "disabled"
-      }, "..."));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_PaginationModule.default.separator),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.ButtonTextSmall, {
+          color: "disabled",
+          children: "..."
+        })
+      });
     case 'next':
-      return /*#__PURE__*/React.createElement(_Button.Button, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
         classNames: {
           icon: (0, _classify.default)(_PaginationModule.default.icon, {
             [_PaginationModule.default.disabled]: disabled
@@ -102,7 +106,7 @@ const PaginationButton = props => {
         ariaLabel: "Next page"
       });
     case 'last':
-      return /*#__PURE__*/React.createElement(_Button.Button, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
         classNames: {
           icon: (0, _classify.default)(_PaginationModule.default.icon, {
             [_PaginationModule.default.disabled]: disabled
@@ -124,5 +128,7 @@ const PaginationButton = props => {
   }
 };
 exports.PaginationButton = PaginationButton;
-const PaginationItem = props => /*#__PURE__*/React.createElement(PaginationButton, props);
+const PaginationItem = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationButton, {
+  ...props
+});
 exports.PaginationItem = PaginationItem;

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

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

package/lib/components/Pagination/index.js

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

package/lib/components/Panel/Panel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Flow } from 'flow-to-typescript-codemod';
-import type { ModalProps } from 'src/components/Modal';
+import type { ModalProps } from '../../components/Modal';
 export type PanelSize = 'small' | 'medium' | 'large';
 export type PanelAnchor = 'left' | 'right';
 export interface PanelHeaderProps {

package/lib/components/Panel/Panel.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PanelHeader = exports.PanelFooter = exports.PanelBody = exports.Panel = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useMountTransition = _interopRequireDefault(require("src/hooks/useMountTransition"));
-var _motion = require("src/styles/variables/_motion");
-var _space = require("src/styles/variables/_space");
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _Button = require("src/components/Button");
-var _Modal = require("src/components/Modal");
-var _Truncate = require("src/components/Truncate");
-var _PanelModule = _interopRequireDefault(require("src/components/Panel/Panel.module.css"));
+var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTransition"));
+var _motion = require("../../styles/variables/_motion");
+var _space = require("../../styles/variables/_space");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Modal = require("../Modal");
+var _Truncate = require("../Truncate");
+var _PanelModule = _interopRequireDefault(require("./Panel.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 getDefaultPanelAnimation = anchor => ({
   // Configure both open and close durations:
   duration: {
@@ -40,17 +40,23 @@ const PanelHeader = _ref => {
     className,
     size
   } = _ref;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_PanelModule.default.panelHeader, className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _PanelModule.default.headerContent
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)), !hideCloseBtn && /*#__PURE__*/React.createElement(_Button.Button, {
-    iconLeftName: "xmark",
-    type: "ghost",
-    onClick: onCloseButtonClick,
-    ariaLabel: "Close Button",
-    size: size
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classify.default)(_PanelModule.default.panelHeader, className),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _PanelModule.default.headerContent,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+          children: children
+        })
+      }), !hideCloseBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+        iconLeftName: "xmark",
+        type: "ghost",
+        onClick: onCloseButtonClick,
+        ariaLabel: "Close Button",
+        size: size
+      })]
+    })
+  });
 };
 exports.PanelHeader = PanelHeader;
 const PanelBody = exports.PanelBody = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
@@ -58,21 +64,26 @@ const PanelBody = exports.PanelBody = /*#__PURE__*/React.forwardRef((_ref2, ref)
     children,
     className
   } = _ref2;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    className: (0, _classify.default)(_PanelModule.default.panelBody, className)
-  }, children);
+    className: (0, _classify.default)(_PanelModule.default.panelBody, className),
+    children: children
+  });
 });
 const PanelFooter = _ref3 => {
   let {
     children,
     classNames
   } = _ref3;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_PanelModule.default.panelFooter, classNames?.wrapper)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_PanelModule.default.panelFooterActions, classNames?.actions)
-  }, children)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_PanelModule.default.panelFooter, classNames?.wrapper),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_PanelModule.default.panelFooterActions, classNames?.actions),
+        children: children
+      })
+    })
+  });
 };
 exports.PanelFooter = PanelFooter;
 const Panel = _ref4 => {
@@ -91,13 +102,13 @@ const Panel = _ref4 => {
   } = _ref4;
   const isTransitioning = (0, _useMountTransition.default)(isOpen, parseInt(_motion.motionDurationNormal));
   const defaultPanelAnimation = getDefaultPanelAnimation(anchor);
-  return /*#__PURE__*/React.createElement(_Modal.Modal, _extends({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
     isOpen: isOpen,
     onClose: onClose,
     hideBackdrop: hideBackdrop,
     tapOutsideToClose: allowBackgroundInteraction ? false : tapOutsideToClose,
-    allowBackgroundInteraction: allowBackgroundInteraction
-  }, restPanelProps, {
+    allowBackgroundInteraction: allowBackgroundInteraction,
+    ...restPanelProps,
     classNames: {
       container: (0, _classify.default)(_PanelModule.default.panelContainer, {
         [_PanelModule.default.in]: isTransitioning,
@@ -110,7 +121,8 @@ const Panel = _ref4 => {
       }, classNames?.content),
       backdrop: (0, _classify.default)(classNames?.backdrop)
     },
-    customAnimation: customAnimation || defaultPanelAnimation
-  }), children);
+    customAnimation: customAnimation || defaultPanelAnimation,
+    children: children
+  });
 };
 exports.Panel = Panel;

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

@@ -1,3 +1,3 @@
-export type { PanelAnchor, PanelBodyProps, PanelFooterProps, PanelHeaderProps, PanelProps, PanelSize, } from 'src/components/Panel/Panel';
-export { Panel, PanelBody, PanelFooter, PanelHeader, } from 'src/components/Panel/Panel';
+export type { PanelAnchor, PanelBodyProps, PanelFooterProps, PanelHeaderProps, PanelProps, PanelSize, } from '../../components/Panel/Panel';
+export { Panel, PanelBody, PanelFooter, PanelHeader, } from '../../components/Panel/Panel';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Panel/index.js

@@ -27,4 +27,4 @@ Object.defineProperty(exports, "PanelHeader", {
     return _Panel.PanelHeader;
   }
 });
-var _Panel = require("src/components/Panel/Panel");
+var _Panel = require("./Panel");

package/lib/components/ProgressDonut/ProgressDonut.d.ts

@@ -1,5 +1,5 @@
 import type { Flow } from 'flow-to-typescript-codemod';
-import * as COLORS from 'src/styles/variables/_color';
+import * as COLORS from '../../styles/variables/_color';
 type ClassNames = Readonly<{
     wrapper?: string;
 }>;

package/lib/components/ProgressDonut/ProgressDonut.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProgressDonut = void 0;
 var React = _interopRequireWildcard(require("react"));
-var COLORS = _interopRequireWildcard(require("src/styles/variables/_color"));
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _Text = require("src/components/Text");
-var _ProgressDonutModule = _interopRequireDefault(require("src/components/ProgressDonut/ProgressDonut.module.css"));
+var COLORS = _interopRequireWildcard(require("../../styles/variables/_color"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Text = require("../Text");
+var _ProgressDonutModule = _interopRequireDefault(require("./ProgressDonut.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 STROKE_WIDTH = 8;
@@ -41,34 +42,38 @@ const ProgressDonut = exports.ProgressDonut = /*#__PURE__*/React.forwardRef((_re
   const radius = React.useMemo(() => (LARGE_DONUT_SIZE - STROKE_WIDTH) / DIVISOR_TWO, [LARGE_DONUT_SIZE]);
   const circumference = React.useMemo(() => DIVISOR_TWO * Math.PI * radius, [radius]);
   const offset = React.useMemo(() => circumference - donutPercentage / MAX_PERCENTAGE * circumference, [circumference, donutPercentage]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
     "data-testid": "ProgressDonut",
-    className: (0, _classify.default)(_ProgressDonutModule.default.wrapper, classNames?.wrapper)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _ProgressDonutModule.default.donutChart
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: LARGE_DONUT_SIZE,
-    height: LARGE_DONUT_SIZE,
-    viewBox: `0 0 ${LARGE_DONUT_SIZE} ${LARGE_DONUT_SIZE}`,
-    className: _ProgressDonutModule.default.donutChartSvg
-  }, /*#__PURE__*/React.createElement("circle", {
-    className: _ProgressDonutModule.default.donutChartBackground,
-    cx: LARGE_DONUT_SIZE / DIVISOR_TWO,
-    cy: LARGE_DONUT_SIZE / DIVISOR_TWO,
-    r: radius,
-    strokeWidth: STROKE_WIDTH
-  }), /*#__PURE__*/React.createElement("circle", {
-    className: _ProgressDonutModule.default.donutChartForeground,
-    cx: LARGE_DONUT_SIZE / DIVISOR_TWO,
-    cy: LARGE_DONUT_SIZE / DIVISOR_TWO,
-    r: radius,
-    strokeWidth: STROKE_WIDTH,
-    strokeDasharray: circumference,
-    strokeDashoffset: donutPercentage === MIN_PERCENTAGE ? circumference : offset,
-    stroke: COLORS[color || ''] || donutColor,
-    strokeLinecap: "round"
-  })), /*#__PURE__*/React.createElement(_Text.BodyLargeBold, {
-    className: _ProgressDonutModule.default.donutChartPercentage
-  }, `${donutPercentage}%`)));
+    className: (0, _classify.default)(_ProgressDonutModule.default.wrapper, classNames?.wrapper),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _ProgressDonutModule.default.donutChart,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+        width: LARGE_DONUT_SIZE,
+        height: LARGE_DONUT_SIZE,
+        viewBox: `0 0 ${LARGE_DONUT_SIZE} ${LARGE_DONUT_SIZE}`,
+        className: _ProgressDonutModule.default.donutChartSvg,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+          className: _ProgressDonutModule.default.donutChartBackground,
+          cx: LARGE_DONUT_SIZE / DIVISOR_TWO,
+          cy: LARGE_DONUT_SIZE / DIVISOR_TWO,
+          r: radius,
+          strokeWidth: STROKE_WIDTH
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+          className: _ProgressDonutModule.default.donutChartForeground,
+          cx: LARGE_DONUT_SIZE / DIVISOR_TWO,
+          cy: LARGE_DONUT_SIZE / DIVISOR_TWO,
+          r: radius,
+          strokeWidth: STROKE_WIDTH,
+          strokeDasharray: circumference,
+          strokeDashoffset: donutPercentage === MIN_PERCENTAGE ? circumference : offset,
+          stroke: COLORS[color || ''] || donutColor,
+          strokeLinecap: "round"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyLargeBold, {
+        className: _ProgressDonutModule.default.donutChartPercentage,
+        children: `${donutPercentage}%`
+      })]
+    })
+  });
 });

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

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