@vitality-ds/components 5.7.0 → 6.0.0-alpha.3

package/dist/esm/Input/Textarea/index.spec.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import Textarea from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe("<Textarea />", function () {
   beforeEach(function () {
     jest.clearAllMocks();
@@ -13,13 +14,13 @@ describe("<Textarea />", function () {
   };
   var mockChange = jest.fn();
   it("Should not call onChange on load", function () {
-    render(/*#__PURE__*/React.createElement(Textarea, _extends({
+    render(/*#__PURE__*/_jsx(Textarea, _extends({
       onChange: mockChange
     }, mockData)));
     expect(mockChange).not.toBeCalled();
   });
   it("Should call on change when change occurs", function () {
-    render(/*#__PURE__*/React.createElement(Textarea, _extends({
+    render(/*#__PURE__*/_jsx(Textarea, _extends({
       onChange: mockChange
     }, mockData)));
     var textarea = screen.getByRole("textbox");
@@ -31,7 +32,7 @@ describe("<Textarea />", function () {
     expect(mockChange).toBeCalledTimes(1);
   });
   it("Shouldn't call onChange when disabled", function () {
-    render(/*#__PURE__*/React.createElement(Textarea, _extends({
+    render(/*#__PURE__*/_jsx(Textarea, _extends({
       onChange: mockChange
     }, mockData, {
       disabled: true

package/dist/esm/Input/TimePicker/components/NoOptionsMessage/index.js

@@ -1,9 +1,11 @@
 import React from "react";
 import Typography from "../../../../Typography";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function NoOptionsMessage(_ref) {
   var value = _ref.value;
-  return /*#__PURE__*/React.createElement(Typography, {
-    variant: "display300"
-  }, "Selected time: ", value);
+  return /*#__PURE__*/_jsxs(Typography, {
+    variant: "display300",
+    children: ["Selected time: ", value]
+  });
 }
 export default NoOptionsMessage;

package/dist/esm/Input/TimePicker/index.js

@@ -6,6 +6,7 @@ import { EMPTY_ARR } from "../../helpers/logic/empties";
 import SelectPrimitive from "../Select/Select/primitives";
 import NoOptionsMessage from "./components/NoOptionsMessage";
 import { createEventObject, formatTimeString, timeIntervals } from "./logic";
+import { jsx as _jsx } from "react/jsx-runtime";
 var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var _ref$interval = _ref.interval,
     interval = _ref$interval === void 0 ? 30 : _ref$interval,
@@ -36,7 +37,7 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       }
     }
   };
-  return /*#__PURE__*/React.createElement(SelectPrimitive, _extends({
+  return /*#__PURE__*/_jsx(SelectPrimitive, _extends({
     isMulti: false,
     valueRenderType: "typeahead",
     ref: forwardedRef,

package/dist/esm/LegacyPaper/index.js

@@ -1,14 +1,16 @@
 import React from "react";
 import { BaseLegacyPaper } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function LegacyPaper(_ref) {
   var children = _ref.children,
     _ref$elevation = _ref.elevation,
     elevation = _ref$elevation === void 0 ? "md" : _ref$elevation,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "lg" : _ref$padding;
-  return /*#__PURE__*/React.createElement(BaseLegacyPaper, {
+  return /*#__PURE__*/_jsx(BaseLegacyPaper, {
     elevation: elevation,
-    padding: padding
-  }, children);
+    padding: padding,
+    children: children
+  });
 }
 export default LegacyPaper;

package/dist/esm/LinearProgress/index.js

@@ -1,13 +1,16 @@
 import React from "react";
 import useLinearProgress from "./hooks/useLinearProgress";
 import { BaseLinearProgress, BaseLinearProgressIndicator } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function LinearProgress(_ref) {
   var value = _ref.value,
     indeterminate = _ref.indeterminate;
   var style = useLinearProgress(value);
-  return /*#__PURE__*/React.createElement(BaseLinearProgress, null, /*#__PURE__*/React.createElement(BaseLinearProgressIndicator, {
-    indeterminate: !value && value !== 0 || indeterminate,
-    style: style
-  }));
+  return /*#__PURE__*/_jsx(BaseLinearProgress, {
+    children: /*#__PURE__*/_jsx(BaseLinearProgressIndicator, {
+      indeterminate: !value && value !== 0 || indeterminate,
+      style: style
+    })
+  });
 }
 export default LinearProgress;

package/dist/esm/Link/Link.js

@@ -3,12 +3,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["as", "style", "css"];
 import React from "react";
 import { BaseLink } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 var Link = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var as = _ref.as,
     style = _ref.style,
     css = _ref.css,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(BaseLink, _extends({
+  return /*#__PURE__*/_jsx(BaseLink, _extends({
     ref: forwardedRef
   }, restProps));
 });

package/dist/esm/Link/LinkButton.js

@@ -4,6 +4,7 @@ var _excluded = ["appearance", "size", "as", "style", "css"];
 import React from "react";
 import { getAppearance } from "../Button/logic";
 import { BaseLinkButton } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 var LinkButton = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var appearance = _ref.appearance,
     _ref$size = _ref.size,
@@ -15,7 +16,7 @@ var LinkButton = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var _getAppearance = getAppearance(appearance),
     color = _getAppearance.color,
     variant = _getAppearance.variant;
-  return /*#__PURE__*/React.createElement(BaseLinkButton, _extends({
+  return /*#__PURE__*/_jsx(BaseLinkButton, _extends({
     ref: forwardedRef,
     color: color,
     variant: variant,

package/dist/esm/LucideProvider/index.js

@@ -1,11 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
 import { LucideProvider as BaseLucideProvider } from "lucide-react";
 import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 function LucideProvider(_ref) {
   var _ref$config = _ref.config,
     config = _ref$config === void 0 ? {
       size: 16
     } : _ref$config,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement(BaseLucideProvider, config, children);
+  return /*#__PURE__*/_jsx(BaseLucideProvider, _extends({}, config, {
+    children: children
+  }));
 }
 export default LucideProvider;

package/dist/esm/Modal/index.js

@@ -1,6 +1,7 @@
 import * as RadixModal from "@radix-ui/react-dialog";
 import React from "react";
 import { BaseModalBlanket, BaseModalContent } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Modal(_ref) {
   var open = _ref.open,
     onEscapeKeyDown = _ref.onEscapeKeyDown,
@@ -10,17 +11,21 @@ function Modal(_ref) {
     onCloseAutoFocus = _ref.onCloseAutoFocus,
     children = _ref.children,
     isLayeredModal = _ref.isLayeredModal;
-  return /*#__PURE__*/React.createElement(RadixModal.Root, {
-    open: open
-  }, /*#__PURE__*/React.createElement(RadixModal.Portal, null, /*#__PURE__*/React.createElement(BaseModalBlanket, {
-    isLayeredModal: isLayeredModal
-  }), /*#__PURE__*/React.createElement(BaseModalContent, {
-    onEscapeKeyDown: onEscapeKeyDown,
-    onPointerDownOutside: onPointerDownOutside,
-    onInteractOutside: onInteractOutside,
-    onOpenAutoFocus: onOpenAutoFocus,
-    onCloseAutoFocus: onCloseAutoFocus,
-    isLayeredModal: isLayeredModal
-  }, children)));
+  return /*#__PURE__*/_jsx(RadixModal.Root, {
+    open: open,
+    children: /*#__PURE__*/_jsxs(RadixModal.Portal, {
+      children: [/*#__PURE__*/_jsx(BaseModalBlanket, {
+        isLayeredModal: isLayeredModal
+      }), /*#__PURE__*/_jsx(BaseModalContent, {
+        onEscapeKeyDown: onEscapeKeyDown,
+        onPointerDownOutside: onPointerDownOutside,
+        onInteractOutside: onInteractOutside,
+        onOpenAutoFocus: onOpenAutoFocus,
+        onCloseAutoFocus: onCloseAutoFocus,
+        isLayeredModal: isLayeredModal,
+        children: children
+      })]
+    })
+  });
 }
 export default Modal;

package/dist/esm/ModalDialog/index.js

@@ -1,9 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from "react";
 import Dialog from "../Dialog";
 import Modal from "../Modal";
+import { jsx as _jsx } from "react/jsx-runtime";
 function ModalDialog(_ref) {
   var modalProps = _ref.modalProps,
     dialogProps = _ref.dialogProps;
-  return /*#__PURE__*/React.createElement(Modal, modalProps, /*#__PURE__*/React.createElement(Dialog, dialogProps));
+  return /*#__PURE__*/_jsx(Modal, _extends({}, modalProps, {
+    children: /*#__PURE__*/_jsx(Dialog, _extends({}, dialogProps))
+  }));
 }
 export default ModalDialog;

package/dist/esm/Popover/index.js

@@ -4,6 +4,7 @@ var _excluded = ["triggerElement", "content", "isOpen", "onInteractOutside", "si
 import React from "react";
 import { FLOATING_ELEMENT_SIDE_OFFSET } from "../DropdownMenu/constants";
 import { PopoverContent, PopoverRoot, PopoverTrigger } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Popover(_ref) {
   var triggerElement = _ref.triggerElement,
     content = _ref.content,
@@ -13,19 +14,25 @@ function Popover(_ref) {
     align = _ref.align,
     onEscapeKeyDown = _ref.onEscapeKeyDown,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(PopoverRoot, _extends({
+  return /*#__PURE__*/_jsxs(PopoverRoot, _extends({
     open: isOpen
-  }, restProps), /*#__PURE__*/React.createElement(PopoverTrigger, {
-    asChild: true
-  }, /*#__PURE__*/React.createElement("span", null, triggerElement)), /*#__PURE__*/React.createElement(PopoverContent, {
-    sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
-    side: side,
-    align: align,
-    onInteractOutside: onInteractOutside,
-    onOpenAutoFocus: function onOpenAutoFocus(event) {
-      return event.preventDefault();
-    },
-    onEscapeKeyDown: onEscapeKeyDown
-  }, content));
+  }, restProps, {
+    children: [/*#__PURE__*/_jsx(PopoverTrigger, {
+      asChild: true,
+      children: /*#__PURE__*/_jsx("span", {
+        children: triggerElement
+      })
+    }), /*#__PURE__*/_jsx(PopoverContent, {
+      sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
+      side: side,
+      align: align,
+      onInteractOutside: onInteractOutside,
+      onOpenAutoFocus: function onOpenAutoFocus(event) {
+        return event.preventDefault();
+      },
+      onEscapeKeyDown: onEscapeKeyDown,
+      children: content
+    })]
+  }));
 }
 export default Popover;

package/dist/esm/Provider/index.js

@@ -4,6 +4,7 @@ import LucideProvider from "../LucideProvider";
 import { SidebarProvider } from "../Sidebar";
 import { ThemeProvider } from "../ThemeProvider";
 import TooltipProvider from "../Tooltip/contexts";
+import { jsx as _jsx } from "react/jsx-runtime";
 function Provider(_ref) {
   var children = _ref.children,
     _ref$config = _ref.config,
@@ -22,9 +23,10 @@ function Provider(_ref) {
       SubProvider = _ref3[1];
     var isDisabled = disableProviders === null || disableProviders === void 0 ? void 0 : disableProviders[providerName];
     if (!isDisabled) {
-      childrenWithProviders = /*#__PURE__*/React.createElement(SubProvider, {
-        config: config[providerName]
-      }, childrenWithProviders);
+      childrenWithProviders = /*#__PURE__*/_jsx(SubProvider, {
+        config: config[providerName],
+        children: childrenWithProviders
+      });
     }
   });
   return childrenWithProviders;

package/dist/esm/Shortcuts/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import useOS from "./hooks/useOS";
 import { transformKeys } from "./logic";
 import { BaseShortcut, BaseShortcutGroup } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function Shortcuts(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "uiElement" : _ref$variant,
@@ -13,25 +14,30 @@ export default function Shortcuts(_ref) {
   var transformedKeys = transformKeys(keys !== null && keys !== void 0 ? keys : [], os);
   if (combineKeys) {
     var keyOccurrences = {};
-    return /*#__PURE__*/React.createElement(BaseShortcut, {
+    return /*#__PURE__*/_jsx(BaseShortcut, {
       separateCombinedKeys: true,
       as: "span",
       variant: variant,
-      color: color
-    }, transformedKeys === null || transformedKeys === void 0 ? void 0 : transformedKeys.map(function (key) {
-      var _keyOccurrences$key;
-      keyOccurrences[key] = ((_keyOccurrences$key = keyOccurrences[key]) !== null && _keyOccurrences$key !== void 0 ? _keyOccurrences$key : 0) + 1;
-      var reactKey = "".concat(key, "-").concat(keyOccurrences[key]);
-      return /*#__PURE__*/React.createElement(React.Fragment, {
-        key: reactKey
-      }, /*#__PURE__*/React.createElement("kbd", null, key));
-    }));
+      color: color,
+      children: transformedKeys === null || transformedKeys === void 0 ? void 0 : transformedKeys.map(function (key) {
+        var _keyOccurrences$key;
+        keyOccurrences[key] = ((_keyOccurrences$key = keyOccurrences[key]) !== null && _keyOccurrences$key !== void 0 ? _keyOccurrences$key : 0) + 1;
+        var reactKey = "".concat(key, "-").concat(keyOccurrences[key]);
+        return /*#__PURE__*/_jsx(React.Fragment, {
+          children: /*#__PURE__*/_jsx("kbd", {
+            children: key
+          })
+        }, reactKey);
+      })
+    });
   }
-  return /*#__PURE__*/React.createElement(BaseShortcutGroup, null, transformedKeys === null || transformedKeys === void 0 ? void 0 : transformedKeys.map(function (key) {
-    return /*#__PURE__*/React.createElement(BaseShortcut, {
-      key: key,
-      variant: variant,
-      color: color
-    }, key);
-  }));
+  return /*#__PURE__*/_jsx(BaseShortcutGroup, {
+    children: transformedKeys === null || transformedKeys === void 0 ? void 0 : transformedKeys.map(function (key) {
+      return /*#__PURE__*/_jsx(BaseShortcut, {
+        variant: variant,
+        color: color,
+        children: key
+      }, key);
+    })
+  });
 }

package/dist/esm/Shortcuts/logic.js

@@ -1,8 +1,8 @@
 import { MAC_KEY_MAP, WINDOWS_KEY_MAP } from "./constants";
 export var getOS = function getOS() {
-  var _navigator$userAgentD, _navigator$userAgentD2, _navigator$userAgentD3;
+  var _navigator$userAgentD, _navigator$userAgentD2;
   if (typeof navigator === "undefined") return null;
-  var platform = (_navigator$userAgentD = (_navigator$userAgentD2 = navigator.userAgentData) === null || _navigator$userAgentD2 === void 0 ? void 0 : (_navigator$userAgentD3 = _navigator$userAgentD2.platform) === null || _navigator$userAgentD3 === void 0 ? void 0 : _navigator$userAgentD3.toLowerCase()) !== null && _navigator$userAgentD !== void 0 ? _navigator$userAgentD : null;
+  var platform = (_navigator$userAgentD = (_navigator$userAgentD2 = navigator.userAgentData) === null || _navigator$userAgentD2 === void 0 || (_navigator$userAgentD2 = _navigator$userAgentD2.platform) === null || _navigator$userAgentD2 === void 0 ? void 0 : _navigator$userAgentD2.toLowerCase()) !== null && _navigator$userAgentD !== void 0 ? _navigator$userAgentD : null;
   if (platform !== null && platform !== void 0 && platform.includes("mac")) return "mac";
   if (platform !== null && platform !== void 0 && platform.includes("win")) return "windows";
   if (platform !== null && platform !== void 0 && platform.includes("linux")) return "linux";

package/dist/esm/Sidebar/components/SidebarBar/hooks/useSidebarBar.spec.js

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import useSidebarBar from "./useSidebarBar";
 describe("useSidebarBar", function () {
   var mount = function mount() {

package/dist/esm/Sidebar/components/SidebarBar/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import SidebarCloseButton from "../SidebarCloseButton";
 import useSidebarBar from "./hooks/useSidebarBar";
 import { BaseSidebarBar, BaseSidebarContent } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function SidebarBar(_ref) {
   var isOpen = _ref.isOpen,
     children = _ref.children,
@@ -9,12 +10,15 @@ function SidebarBar(_ref) {
     topOffset = _ref.topOffset;
   var _useSidebarBar = useSidebarBar(topOffset),
     style = _useSidebarBar.style;
-  return /*#__PURE__*/React.createElement(BaseSidebarBar, {
+  return /*#__PURE__*/_jsx(BaseSidebarBar, {
     isOpen: isOpen,
-    css: style
-  }, /*#__PURE__*/React.createElement(BaseSidebarContent, null, /*#__PURE__*/React.createElement(SidebarCloseButton, {
-    tooltipContent: "Close Sidebar",
-    onClick: closeSidebar
-  }), children));
+    css: style,
+    children: /*#__PURE__*/_jsxs(BaseSidebarContent, {
+      children: [/*#__PURE__*/_jsx(SidebarCloseButton, {
+        tooltipContent: "Close Sidebar",
+        onClick: closeSidebar
+      }), children]
+    })
+  });
 }
 export default SidebarBar;

package/dist/esm/Sidebar/components/SidebarCloseButton/index.js

@@ -2,14 +2,17 @@ import { X } from "lucide-react";
 import React from "react";
 import IconButton from "../../../IconButton";
 import { BaseSidebarCloseButton } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function SidebarCloseButton(_ref) {
   var onClick = _ref.onClick,
     tooltipContent = _ref.tooltipContent;
-  return /*#__PURE__*/React.createElement(BaseSidebarCloseButton, null, /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(X, null),
-    size: "compact",
-    tooltipContent: tooltipContent,
-    onClick: onClick
-  }));
+  return /*#__PURE__*/_jsx(BaseSidebarCloseButton, {
+    children: /*#__PURE__*/_jsx(IconButton, {
+      icon: /*#__PURE__*/_jsx(X, {}),
+      size: "compact",
+      tooltipContent: tooltipContent,
+      onClick: onClick
+    })
+  });
 }
 export default SidebarCloseButton;

package/dist/esm/Sidebar/components/SidebarWrapper/index.js

@@ -1,10 +1,12 @@
 import React from "react";
 import { BaseSidebarWrapper } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function SidebarWrapper(_ref) {
   var isOpen = _ref.isOpen,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement(BaseSidebarWrapper, {
-    isOpen: isOpen
-  }, children);
+  return /*#__PURE__*/_jsx(BaseSidebarWrapper, {
+    isOpen: isOpen,
+    children: children
+  });
 }
 export default SidebarWrapper;

package/dist/esm/Sidebar/contexts/SidebarContext/index.js

@@ -5,6 +5,7 @@ import { SIDEBAR_TOTAL_WIDTH } from "../../components/SidebarBar/constants";
 import SidebarWrapper from "../../components/SidebarWrapper";
 import { TRANSITION_DURATION } from "./constants";
 import useSidebar from "./hooks/useSidebar";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var SidebarContext = /*#__PURE__*/createContext({
   isSidebarOpen: false,
   openSidebar: function openSidebar(_content) {
@@ -30,15 +31,18 @@ function SidebarProvider(_ref) {
     sidebarContent = value.sidebarContent,
     closeSidebar = value.closeSidebar,
     openSidebar = value.openSidebar;
-  return /*#__PURE__*/React.createElement(SidebarContext.Provider, {
-    value: value
-  }, /*#__PURE__*/React.createElement(SidebarWrapper, {
-    isOpen: isSidebarOpen
-  }, children, /*#__PURE__*/React.createElement(SidebarBar, {
-    topOffset: topOffset,
-    isOpen: isSidebarOpen,
-    closeSidebar: closeSidebar,
-    openSidebar: openSidebar
-  }, sidebarContent)));
+  return /*#__PURE__*/_jsx(SidebarContext.Provider, {
+    value: value,
+    children: /*#__PURE__*/_jsxs(SidebarWrapper, {
+      isOpen: isSidebarOpen,
+      children: [children, /*#__PURE__*/_jsx(SidebarBar, {
+        topOffset: topOffset,
+        isOpen: isSidebarOpen,
+        closeSidebar: closeSidebar,
+        openSidebar: openSidebar,
+        children: sidebarContent
+      })]
+    })
+  });
 }
 export { SidebarProvider, SidebarContext };

package/dist/esm/SkeletonBox/Presets/Button.skeleton.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["size", "shouldFitContainer", "width"];
 import React from "react";
 import PrimitiveSkeletonBox from "../primitives";
+import { jsx as _jsx } from "react/jsx-runtime";
 function ButtonSkeleton(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "default" : _ref$size,
@@ -12,7 +13,7 @@ function ButtonSkeleton(_ref) {
     boxProps = _objectWithoutProperties(_ref, _excluded);
   var height = size === "compact" ? 27.9 : 33.9;
   var calculatedWidth = shouldFitContainer ? "100%" : width;
-  return /*#__PURE__*/React.createElement(PrimitiveSkeletonBox, _extends({}, boxProps, {
+  return /*#__PURE__*/_jsx(PrimitiveSkeletonBox, _extends({}, boxProps, {
     height: height,
     width: calculatedWidth
   }));

package/dist/esm/SkeletonBox/Presets/FormField.skeleton.js

@@ -1,28 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["type", "helperMessage"];
 import React from "react";
 import Box from "../../Box";
 import Stack from "../../Stack";
 import PrimitiveSkeletonBox from "../primitives";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function FormFieldSkeleton(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? "default" : _ref$type,
     helperMessage = _ref.helperMessage,
     boxProps = _objectWithoutProperties(_ref, _excluded);
   var inputHeight = type === "textarea" ? 95.99 : 32;
-  return /*#__PURE__*/React.createElement(Box, boxProps, /*#__PURE__*/React.createElement(Stack, {
-    spacing: "sm"
-  }, /*#__PURE__*/React.createElement(PrimitiveSkeletonBox, {
-    height: 12,
-    width: 100,
-    maxWidth: "100%"
-  }), /*#__PURE__*/React.createElement(PrimitiveSkeletonBox, {
-    height: inputHeight,
-    width: "100%"
-  }), helperMessage && /*#__PURE__*/React.createElement(PrimitiveSkeletonBox, {
-    height: 12,
-    width: 200,
-    maxWidth: "100%"
-  })));
+  return /*#__PURE__*/_jsx(Box, _extends({}, boxProps, {
+    children: /*#__PURE__*/_jsxs(Stack, {
+      spacing: "sm",
+      children: [/*#__PURE__*/_jsx(PrimitiveSkeletonBox, {
+        height: 12,
+        width: 100,
+        maxWidth: "100%"
+      }), /*#__PURE__*/_jsx(PrimitiveSkeletonBox, {
+        height: inputHeight,
+        width: "100%"
+      }), helperMessage && /*#__PURE__*/_jsx(PrimitiveSkeletonBox, {
+        height: 12,
+        width: 200,
+        maxWidth: "100%"
+      })]
+    })
+  }));
 }
 export default FormFieldSkeleton;

package/dist/esm/SkeletonBox/Presets/Input.skeleton.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["type"];
 import React from "react";
 import PrimitiveSkeletonBox from "../primitives";
+import { jsx as _jsx } from "react/jsx-runtime";
 function InputSkeleton(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? "default" : _ref$type,
@@ -10,7 +11,7 @@ function InputSkeleton(_ref) {
   var height = type === "textarea" ? 95.99 : 32;
 
   // let boxProps override width but not override height
-  return /*#__PURE__*/React.createElement(PrimitiveSkeletonBox, _extends({
+  return /*#__PURE__*/_jsx(PrimitiveSkeletonBox, _extends({
     width: "100%"
   }, boxProps, {
     height: height

package/dist/esm/SkeletonBox/index.js

@@ -1,12 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["preset"];
 import React from "react";
 import * as Presets from "./Presets";
 import PrimitiveSkeletonBox from "./primitives";
+import { jsx as _jsx } from "react/jsx-runtime";
 function SkeletonBox(_ref) {
   var preset = _ref.preset,
     props = _objectWithoutProperties(_ref, _excluded);
   var SkeletonComponent = preset ? Presets[preset] : PrimitiveSkeletonBox;
-  return /*#__PURE__*/React.createElement(SkeletonComponent, props);
+  return /*#__PURE__*/_jsx(SkeletonComponent, _extends({}, props));
 }
 export default SkeletonBox;

package/dist/esm/SkeletonBox/primitives/index.js

@@ -3,8 +3,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from "react";
 import Box from "../../Box";
 import { BasePrimitiveSkeletonBox } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function PrimitiveSkeletonBox(_ref) {
   var restProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(Box, restProps, /*#__PURE__*/React.createElement(BasePrimitiveSkeletonBox, null));
+  return /*#__PURE__*/_jsx(Box, _extends({}, restProps, {
+    children: /*#__PURE__*/_jsx(BasePrimitiveSkeletonBox, {})
+  }));
 }
 export default PrimitiveSkeletonBox;