@vitality-ds/components 5.7.0-alpha.8 → 6.0.0-alpha.1

package/dist/esm/Table/components/Toolbar/index.js

@@ -6,6 +6,7 @@ import { SelectContext } from "../../contexts/SelectContext";
 import BatchActions from "../BatchActions";
 import useToolbar from "./hooks/useToolbar";
 import { BaseToolbar, LeftActionsContainer, LeftSideContainer, RightActionsContainer, TitleContainer } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function Toolbar(_ref) {
   var title = _ref.title,
     _ref$titleVariant = _ref.titleVariant,
@@ -28,14 +29,26 @@ function Toolbar(_ref) {
 
   // If no toolbar contents are passed, the batch actions should "float" when presented, as it will not have any visible space to inhabit
   var shouldFloat = !title && !leftContent && !rightActions.length;
-  return /*#__PURE__*/React.createElement(BaseToolbar, {
+  return /*#__PURE__*/_jsx(BaseToolbar, {
     floating: shouldFloat,
-    "data-animate": shouldFloat && isSelectableAndSelected
-  }, isSelectableAndSelected ? /*#__PURE__*/React.createElement(BatchActions, _extends({
-    floating: shouldFloat,
-    totalNumOfTableRows: totalNumOfTableRows
-  }, batchActions)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LeftSideContainer, null, title && /*#__PURE__*/React.createElement(TitleContainer, null, /*#__PURE__*/React.createElement(Typography, {
-    variant: titleVariant
-  }, title)), leftContent && /*#__PURE__*/React.createElement(LeftActionsContainer, null, leftContent)), rightActions.length > 0 && /*#__PURE__*/React.createElement(RightActionsContainer, null, ActionsComponents)));
+    "data-animate": shouldFloat && isSelectableAndSelected,
+    children: isSelectableAndSelected ? /*#__PURE__*/_jsx(BatchActions, _extends({
+      floating: shouldFloat,
+      totalNumOfTableRows: totalNumOfTableRows
+    }, batchActions)) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(LeftSideContainer, {
+        children: [title && /*#__PURE__*/_jsx(TitleContainer, {
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: titleVariant,
+            children: title
+          })
+        }), leftContent && /*#__PURE__*/_jsx(LeftActionsContainer, {
+          children: leftContent
+        })]
+      }), rightActions.length > 0 && /*#__PURE__*/_jsx(RightActionsContainer, {
+        children: ActionsComponents
+      })]
+    })
+  });
 }
 export default Toolbar;

package/dist/esm/Table/hooks/useCells.js

@@ -2,6 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["hasSelect", "label", "minWidth", "cellType"];
 import React, { useMemo } from "react";
 import MemoizedCell from "../components/MemoizedCell";
+import { jsx as _jsx } from "react/jsx-runtime";
 function useCells(columns, emptyPlaceholderText) {
   return useMemo(function () {
     return columns.map(function (_ref) {
@@ -12,7 +13,7 @@ function useCells(columns, emptyPlaceholderText) {
         restProps = _objectWithoutProperties(_ref, _excluded);
       return {
         renderCell: function renderCell(item) {
-          return /*#__PURE__*/React.createElement(MemoizedCell, {
+          return /*#__PURE__*/_jsx(MemoizedCell, {
             cellType: cellType,
             restProps: restProps,
             item: item,

package/dist/esm/Table/hooks/useCells.spec.js

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import useCells from "./useCells";
 describe("useColumns", function () {
   it("should return the correct table columns", function () {

package/dist/esm/Table/hooks/useColumnSort.spec.js

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import useColumnSort from "./useColumnSort";
 describe("useColumnSort", function () {
   beforeEach(function () {

package/dist/esm/Table/hooks/useSelectContext.js

@@ -1,5 +1,6 @@
-// eslint-disable-next-line import/no-unresolved
+/* eslint-disable import/no-unresolved */
 
+/* eslint-enable import/no-unresolved */
 import { createContext } from "react";
 var useSelectContext = function useSelectContext() {
   var SelectContext = /*#__PURE__*/createContext(null);

package/dist/esm/Table/hooks/useSelectRowLogic.spec.js

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import { useRowSelect } from "@table-library/react-table-library/select";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import useSelectRowLogic from "./useSelectRowLogic";
 var mockOnRemoveByIds = jest.fn();
 var mockSelectRowLogic = {
@@ -91,7 +91,9 @@ describe("useSelectRowLogic", function () {
       result = _renderHook3.result,
       rerender = _renderHook3.rerender;
     var resultAfterInitialRender = result.current;
-    rerender();
+    rerender({
+      tableData: initialTableData
+    });
     expect(result.current).toBe(resultAfterInitialRender);
   });
 });

package/dist/esm/Table/index.js

@@ -15,6 +15,7 @@ import Toolbar from "./components/Toolbar";
 import { SelectContext } from "./contexts/SelectContext";
 import { useCells, useColumnSort, useLayout, usePagination, useSelectRowLogic } from "./hooks";
 import baseTableStyles, { BaseTableWrapper } from "./styled";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var Table = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var _ref$id = _ref.id,
     id = _ref$id === void 0 ? "default" : _ref$id,
@@ -72,45 +73,55 @@ var Table = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       selectableRows: selectableRows
     };
   }, [selectLogic, selectableRows]);
-  return /*#__PURE__*/React.createElement(SelectContext.Provider, {
-    value: selectContextValue
-  }, /*#__PURE__*/React.createElement(BaseTableWrapper, null, (selectableRows || toolbarProps) && /*#__PURE__*/React.createElement(Toolbar, _extends({
-    totalNumOfTableRows: tableData === null || tableData === void 0 ? void 0 : tableData.length
-  }, toolbarProps)), /*#__PURE__*/React.createElement(ComposedTable, _extends({
-    data: data,
-    theme: theme,
-    pagination: tablePagination,
-    ref: forwardedRef,
-    layout: layout,
-    sort: sort,
-    select: selectLogic
-  }, props), function (tableList) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderRow, {
-      tablePagination: tablePagination,
-      columns: columns,
-      tableStatus: tableStatus,
-      data: data
-    })), /*#__PURE__*/React.createElement(Body, null, tableList === null || tableList === void 0 ? void 0 : tableList.map(function (row) {
-      return /*#__PURE__*/React.createElement(Row, {
-        row: row,
-        onRowClick: onRowClick,
-        cells: cells,
-        key: row.id
-      });
-    })));
-  }), tableStatus && /*#__PURE__*/React.createElement(TableStatus, {
-    status: tableStatus,
-    size: size,
-    errorButtonProps: errorButtonProps,
-    errorMessage: errorMessage,
-    emptyMessage: emptyMessage
-  }), !tableStatus && pagination && /*#__PURE__*/React.createElement(Pagination, {
-    rowsPerPageOptions: rowsPerPageOptions,
-    pagination: tablePagination,
-    data: _extends({}, data, {
-      id: id
+  return /*#__PURE__*/_jsx(SelectContext.Provider, {
+    value: selectContextValue,
+    children: /*#__PURE__*/_jsxs(BaseTableWrapper, {
+      children: [(selectableRows || toolbarProps) && /*#__PURE__*/_jsx(Toolbar, _extends({
+        totalNumOfTableRows: tableData === null || tableData === void 0 ? void 0 : tableData.length
+      }, toolbarProps)), /*#__PURE__*/_jsx(ComposedTable, _extends({
+        data: data,
+        theme: theme,
+        pagination: tablePagination,
+        ref: forwardedRef,
+        layout: layout,
+        sort: sort,
+        select: selectLogic
+      }, props, {
+        children: function children(tableList) {
+          return /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Header, {
+              children: /*#__PURE__*/_jsx(HeaderRow, {
+                tablePagination: tablePagination,
+                columns: columns,
+                tableStatus: tableStatus,
+                data: data
+              })
+            }), /*#__PURE__*/_jsx(Body, {
+              children: tableList === null || tableList === void 0 ? void 0 : tableList.map(function (row) {
+                return /*#__PURE__*/_jsx(Row, {
+                  row: row,
+                  onRowClick: onRowClick,
+                  cells: cells
+                }, row.id);
+              })
+            })]
+          });
+        }
+      })), tableStatus && /*#__PURE__*/_jsx(TableStatus, {
+        status: tableStatus,
+        size: size,
+        errorButtonProps: errorButtonProps,
+        errorMessage: errorMessage,
+        emptyMessage: emptyMessage
+      }), !tableStatus && pagination && /*#__PURE__*/_jsx(Pagination, {
+        rowsPerPageOptions: rowsPerPageOptions,
+        pagination: tablePagination,
+        data: _extends({}, data, {
+          id: id
+        })
+      })]
     })
-  })));
+  });
 });
 Table.displayName = "Table";
 export default Table;

package/dist/esm/Tabs/components/Tab/styles/BaseTab.styles.js

@@ -18,7 +18,7 @@ export default css({
   // for the bottom hairline border
   marginBottom: "-".concat(BORDER_WIDTH, "px"),
   path: {
-    fill: "currentColor"
+    stroke: "currentColor"
   },
   "&:hover": {
     cursor: "pointer",

package/dist/esm/Tabs/index.js

@@ -3,6 +3,7 @@ import Root from "./components/Root";
 import Tab from "./components/Tab";
 import TabContent from "./components/TabContent";
 import { BaseTabsList, BaseTabsListContainer } from "./components/TabsList";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Tabs(_ref) {
   var _tabsData$;
   var additionalActions = _ref.additionalActions,
@@ -15,32 +16,36 @@ function Tabs(_ref) {
     orientation = _ref.orientation,
     dir = _ref.dir,
     activationMode = _ref.activationMode;
-  return /*#__PURE__*/React.createElement(Root, {
+  return /*#__PURE__*/_jsxs(Root, {
     defaultValue: defaultValue || ((_tabsData$ = tabsData[0]) === null || _tabsData$ === void 0 ? void 0 : _tabsData$.value),
     value: value,
     onValueChange: onValueChange,
     orientation: orientation,
     dir: dir,
-    activationMode: activationMode
-  }, /*#__PURE__*/React.createElement(BaseTabsListContainer, null, /*#__PURE__*/React.createElement(BaseTabsList, {
-    tabAlignment: tabAlignment,
-    "aria-label": tabListAriaLabel
-  }, tabsData.map(function (_ref2) {
-    var tabValue = _ref2.value,
-      label = _ref2.label,
-      disabled = _ref2.disabled;
-    return /*#__PURE__*/React.createElement(Tab, {
-      key: tabValue,
-      value: tabValue,
-      disabled: disabled
-    }, label);
-  })), additionalActions), tabsData.map(function (_ref3) {
-    var tabValue = _ref3.value,
-      contentRenderer = _ref3.contentRenderer;
-    return /*#__PURE__*/React.createElement(TabContent, {
-      key: tabValue,
-      value: tabValue
-    }, contentRenderer(tabsData));
-  }));
+    activationMode: activationMode,
+    children: [/*#__PURE__*/_jsxs(BaseTabsListContainer, {
+      children: [/*#__PURE__*/_jsx(BaseTabsList, {
+        tabAlignment: tabAlignment,
+        "aria-label": tabListAriaLabel,
+        children: tabsData.map(function (_ref2) {
+          var tabValue = _ref2.value,
+            label = _ref2.label,
+            disabled = _ref2.disabled;
+          return /*#__PURE__*/_jsx(Tab, {
+            value: tabValue,
+            disabled: disabled,
+            children: label
+          }, tabValue);
+        })
+      }), additionalActions]
+    }), tabsData.map(function (_ref3) {
+      var tabValue = _ref3.value,
+        contentRenderer = _ref3.contentRenderer;
+      return /*#__PURE__*/_jsx(TabContent, {
+        value: tabValue,
+        children: contentRenderer(tabsData)
+      }, tabValue);
+    })]
+  });
 }
 export default Tabs;

package/dist/esm/TestingButton/index.js

@@ -1,6 +1,9 @@
 import React from "react";
 import { BaseTestingButton } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function TestingButton() {
-  return /*#__PURE__*/React.createElement(BaseTestingButton, null, "I am a TestingButton");
+  return /*#__PURE__*/_jsx(BaseTestingButton, {
+    children: "I am a TestingButton"
+  });
 }
 export default TestingButton;

package/dist/esm/ThemeProvider/index.js

@@ -1,6 +1,7 @@
 import React, { createContext } from "react";
 import { EMPTY_OBJ } from "../helpers/logic/empties";
 import useTheme from "./hooks/useTheme";
+import { jsx as _jsx } from "react/jsx-runtime";
 var ThemeContext = /*#__PURE__*/createContext({
   theme: "light",
   cycleTheme: function cycleTheme() {
@@ -13,8 +14,9 @@ function ThemeProvider(_ref) {
   var _ref2 = config || EMPTY_OBJ,
     themeOverride = _ref2.themeOverride;
   var themeContextValue = useTheme(themeOverride);
-  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-    value: themeContextValue
-  }, children);
+  return /*#__PURE__*/_jsx(ThemeContext.Provider, {
+    value: themeContextValue,
+    children: children
+  });
 }
 export { ThemeProvider, ThemeContext };

package/dist/esm/Toaster/ToastProvider/index.js

@@ -1,11 +1,13 @@
 import React, { createContext } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 // we explicitly don't provide a fallback default as toast type must be provided
 var ToastContext = /*#__PURE__*/createContext(null);
 function ToastProvider(_ref) {
   var toastType = _ref.toastType,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement(ToastContext.Provider, {
-    value: toastType
-  }, children);
+  return /*#__PURE__*/_jsx(ToastContext.Provider, {
+    value: toastType,
+    children: children
+  });
 }
 export { ToastProvider, ToastContext };

package/dist/esm/Toaster/components/AnimatedToast/index.js

@@ -4,6 +4,7 @@ import { ToastProvider } from "../../ToastProvider";
 import Toast from "../Toast";
 import useContainerAnimations from "./hooks/useContainerAnimations";
 import { getContainerAnimationStyles, getToastAnimationStyles } from "./logic";
+import { jsx as _jsx } from "react/jsx-runtime";
 function AnimatedToast(_ref) {
   var toast = _ref.toast,
     setHover = _ref.setHover,
@@ -21,24 +22,27 @@ function AnimatedToast(_ref) {
   var onClose = useCallback(function () {
     return removeToast(id);
   }, [id, removeToast]);
-  return /*#__PURE__*/React.createElement(ToastProvider, {
-    toastType: type
-  }, /*#__PURE__*/React.createElement("div", {
-    onMouseEnter: function onMouseEnter() {
-      return setHover(id, true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setHover(id, false);
-    },
-    style: containerStyles
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: toastRef,
-    style: toastStyles
-  }, /*#__PURE__*/React.createElement(Toast, {
-    title: title,
-    message: message,
-    hideIcon: hideIcon,
-    onClose: onClose
-  }))));
+  return /*#__PURE__*/_jsx(ToastProvider, {
+    toastType: type,
+    children: /*#__PURE__*/_jsx("div", {
+      onMouseEnter: function onMouseEnter() {
+        return setHover(id, true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHover(id, false);
+      },
+      style: containerStyles,
+      children: /*#__PURE__*/_jsx("div", {
+        ref: toastRef,
+        style: toastStyles,
+        children: /*#__PURE__*/_jsx(Toast, {
+          title: title,
+          message: message,
+          hideIcon: hideIcon,
+          onClose: onClose
+        })
+      })
+    })
+  });
 }
 export default AnimatedToast;

package/dist/esm/Toaster/components/CloseIconButton/index.js

@@ -3,17 +3,20 @@ import React, { useContext } from "react";
 import Tooltip from "../../../Tooltip";
 import { ToastContext } from "../../ToastProvider";
 import { BaseCloseIconButton } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function CloseIconButton(_ref) {
   var onClose = _ref.onClose;
   var type = useContext(ToastContext);
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    content: "Close"
-  }, /*#__PURE__*/React.createElement(BaseCloseIconButton, {
-    type: type,
-    onClick: onClose
-  }, /*#__PURE__*/React.createElement(X, {
-    size: "1rem",
-    color: "currentColor"
-  })));
+  return /*#__PURE__*/_jsx(Tooltip, {
+    content: "Close",
+    children: /*#__PURE__*/_jsx(BaseCloseIconButton, {
+      type: type,
+      onClick: onClose,
+      children: /*#__PURE__*/_jsx(X, {
+        size: "1rem",
+        color: "currentColor"
+      })
+    })
+  });
 }
 export default CloseIconButton;

package/dist/esm/Toaster/components/Toast/index.js

@@ -4,6 +4,7 @@ import { ToastContext } from "../../ToastProvider";
 import CloseIconButton from "../CloseIconButton";
 import useToast from "./hooks/useToast";
 import { BaseContent, BaseToast } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Toast(_ref) {
   var title = _ref.title,
     message = _ref.message,
@@ -12,14 +13,23 @@ function Toast(_ref) {
   var type = useContext(ToastContext);
   var _useToast = useToast(type),
     IconComponent = _useToast.IconComponent;
-  return /*#__PURE__*/React.createElement(BaseToast, {
-    type: type
-  }, !hideIcon && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconComponent, {
-    className: "icon"
-  })), /*#__PURE__*/React.createElement(BaseContent, null, title && /*#__PURE__*/React.createElement(Typography, {
-    variant: "display200"
-  }, title), message && /*#__PURE__*/React.createElement(Typography, null, message)), /*#__PURE__*/React.createElement(CloseIconButton, {
-    onClose: onClose
-  }));
+  return /*#__PURE__*/_jsxs(BaseToast, {
+    type: type,
+    children: [!hideIcon && /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(IconComponent, {
+        size: "1rem",
+        className: "icon"
+      })
+    }), /*#__PURE__*/_jsxs(BaseContent, {
+      children: [title && /*#__PURE__*/_jsx(Typography, {
+        variant: "display200",
+        children: title
+      }), message && /*#__PURE__*/_jsx(Typography, {
+        children: message
+      })]
+    }), /*#__PURE__*/_jsx(CloseIconButton, {
+      onClose: onClose
+    })]
+  });
 }
 export default Toast;

package/dist/esm/Toaster/index.js

@@ -3,6 +3,7 @@ import React, { memo } from "react";
 import AnimatedToast from "./components/AnimatedToast";
 import useToastLogic from "./hooks/useToastLogic";
 import { BaseToaster } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function Toaster(_ref) {
   var toasts = _ref.toasts,
     onClose = _ref.onClose;
@@ -10,14 +11,15 @@ function Toaster(_ref) {
     _useToastLogic2 = _slicedToArray(_useToastLogic, 2),
     internalToasts = _useToastLogic2[0],
     controls = _useToastLogic2[1];
-  return /*#__PURE__*/React.createElement(BaseToaster, null, internalToasts === null || internalToasts === void 0 ? void 0 : internalToasts.map(function (toast) {
-    return /*#__PURE__*/React.createElement(AnimatedToast, {
-      key: toast.id,
-      toast: toast,
-      setHover: controls === null || controls === void 0 ? void 0 : controls.setHover,
-      removeToast: controls === null || controls === void 0 ? void 0 : controls.removeToast
-    });
-  }));
+  return /*#__PURE__*/_jsx(BaseToaster, {
+    children: internalToasts === null || internalToasts === void 0 ? void 0 : internalToasts.map(function (toast) {
+      return /*#__PURE__*/_jsx(AnimatedToast, {
+        toast: toast,
+        setHover: controls === null || controls === void 0 ? void 0 : controls.setHover,
+        removeToast: controls === null || controls === void 0 ? void 0 : controls.removeToast
+      }, toast.id);
+    })
+  });
 }
 Toaster.displayName = "Toaster";
 export default /*#__PURE__*/memo(Toaster);

package/dist/esm/Tooltip/BaseTooltip.js

@@ -2,6 +2,7 @@ import { Portal, Root as TooltipPrimitiveRoot, Trigger as TooltipPrimitiveTrigge
 import React from "react";
 import { SIZES } from "./constants";
 import { BaseTooltipArrow, BaseTooltipContent } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // todo fix this type
 var BaseTooltip = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   var ariaLabel = props.ariaLabel,
@@ -17,21 +18,26 @@ var BaseTooltip = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     offsetWithArrow = SIZES.offsetWithArrow,
     offsetWhenArrowHidden = SIZES.offsetWhenArrowHidden;
   var sideOffset = showArrow ? offsetWithArrow : offsetWhenArrowHidden;
-  return /*#__PURE__*/React.createElement(TooltipPrimitiveRoot, {
+  return /*#__PURE__*/_jsxs(TooltipPrimitiveRoot, {
     open: isOpen,
-    onOpenChange: onOpenChange
-  }, /*#__PURE__*/React.createElement(TooltipPrimitiveTrigger, {
-    ref: forwardedRef,
-    asChild: true
-  }, children), /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(BaseTooltipContent, {
-    sideOffset: sideOffset,
-    "aria-label": ariaLabel,
-    side: preferredSide,
-    align: preferredAlignment
-  }, content, showArrow && /*#__PURE__*/React.createElement(BaseTooltipArrow, {
-    width: arrowWidth,
-    height: arrowHeight
-  }))));
+    onOpenChange: onOpenChange,
+    children: [/*#__PURE__*/_jsx(TooltipPrimitiveTrigger, {
+      ref: forwardedRef,
+      asChild: true,
+      children: children
+    }), /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsxs(BaseTooltipContent, {
+        sideOffset: sideOffset,
+        "aria-label": ariaLabel,
+        side: preferredSide,
+        align: preferredAlignment,
+        children: [content, showArrow && /*#__PURE__*/_jsx(BaseTooltipArrow, {
+          width: arrowWidth,
+          height: arrowHeight
+        })]
+      })
+    })]
+  });
 });
 BaseTooltip.displayName = "BaseTooltip";
 export default BaseTooltip;

package/dist/esm/Tooltip/contexts/index.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { TooltipProvider as RadixTooltipProvider } from "@radix-ui/react-tooltip";
 import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 function TooltipProvider(props) {
-  return /*#__PURE__*/React.createElement(RadixTooltipProvider, _extends({
+  return /*#__PURE__*/_jsx(RadixTooltipProvider, _extends({
     delayDuration: 350
   }, props));
 }

package/dist/esm/Tooltip/index.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["ariaLabel", "as", "children", "className", "content", "css", "onOpenChange", "showArrow", "isOpen", "preferredSide", "preferredAlignment", "style"];
 import React from "react";
 import BaseTooltip from "./BaseTooltip";
+import { jsx as _jsx } from "react/jsx-runtime";
 function Tooltip(_ref) {
   var ariaLabel = _ref.ariaLabel,
     as = _ref.as,
@@ -20,7 +21,7 @@ function Tooltip(_ref) {
     preferredAlignment = _ref$preferredAlignme === void 0 ? "center" : _ref$preferredAlignme,
     style = _ref.style,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(BaseTooltip, _extends({
+  return /*#__PURE__*/_jsx(BaseTooltip, _extends({
     showArrow: showArrow,
     content: content,
     ariaLabel: ariaLabel,
@@ -28,6 +29,8 @@ function Tooltip(_ref) {
     isOpen: isOpen,
     preferredSide: preferredSide,
     preferredAlignment: preferredAlignment
-  }, restProps), children);
+  }, restProps, {
+    children: children
+  }));
 }
 export default Tooltip;

package/dist/esm/TruncateContent/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import useDynamicStyle from "./hooks/useDynamicStyle";
 import useTruncateContent from "./hooks/useTruncateContent";
 import { BaseButton, BaseContainer, BaseInner } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function TruncateContent(_ref) {
   var children = _ref.children,
     _ref$gradientColor = _ref.gradientColor,
@@ -14,15 +15,19 @@ function TruncateContent(_ref) {
     isTruncated = _useTruncateContent.isTruncated,
     toggleTruncated = _useTruncateContent.toggleTruncated;
   var dynamicStyle = useDynamicStyle(gradientColor, initialHeight);
-  return /*#__PURE__*/React.createElement(BaseContainer, null, /*#__PURE__*/React.createElement(BaseInner, {
-    css: dynamicStyle,
-    truncated: isTruncated
-  }, children), /*#__PURE__*/React.createElement(BaseButton, {
-    type: "button",
-    css: {
-      color: buttonTextColor
-    },
-    onClick: toggleTruncated
-  }, isTruncated ? "Show more" : "Show less"));
+  return /*#__PURE__*/_jsxs(BaseContainer, {
+    children: [/*#__PURE__*/_jsx(BaseInner, {
+      css: dynamicStyle,
+      truncated: isTruncated,
+      children: children
+    }), /*#__PURE__*/_jsx(BaseButton, {
+      type: "button",
+      css: {
+        color: buttonTextColor
+      },
+      onClick: toggleTruncated,
+      children: isTruncated ? "Show more" : "Show less"
+    })]
+  });
 }
 export default TruncateContent;

package/dist/esm/Typography/index.js

@@ -5,6 +5,7 @@ import React from "react";
 import useTypographyColors from "./hooks/useTypographyColors";
 import useTypographyElementFromTagProp from "./hooks/useTypographyElementFromTagProp";
 import { BaseTypography } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function Typography(_ref) {
   var className = _ref.className,
     style = _ref.style,
@@ -19,7 +20,7 @@ function Typography(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var renderedComponent = useTypographyElementFromTagProp(htmlTag, variant);
   var colorProps = useTypographyColors(color);
-  return /*#__PURE__*/React.createElement(BaseTypography, _extends({}, rest, {
+  return /*#__PURE__*/_jsx(BaseTypography, _extends({}, rest, {
     as: renderedComponent,
     variant: variant,
     textAlign: textAlign