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

package/dist/esm/Chip/index.js

@@ -8,6 +8,7 @@ import ChipIcon from "./components/ChipIcon";
 import MetaLabel from "./components/MetaLabel";
 import RemoveButton from "./components/RemoveButton";
 import { BaseChip, BaseChipLabelContainer } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Chip(_ref) {
   var label = _ref.label,
     metaLabelProps = _ref.metaLabelProps,
@@ -28,24 +29,28 @@ function Chip(_ref) {
     e.stopPropagation();
     onRemoveClick(e);
   };
-  return /*#__PURE__*/React.createElement(ConditionalTooltipWrapper, {
-    tooltipContent: tooltipContent
-  }, /*#__PURE__*/React.createElement(BaseChip, {
-    size: size,
-    isInteractive: Boolean(onClick) && !isDisabled,
-    onClick: !isDisabled && onClick,
-    includeRightPadding: !onRemoveClick,
-    reduceLeftPadding: Boolean(iconProps),
-    isDisabled: isDisabled
-  }, /*#__PURE__*/React.createElement(ChipIcon, iconProps), /*#__PURE__*/React.createElement(BaseChipLabelContainer, {
-    overflowBehavior: overflowBehavior
-  }, /*#__PURE__*/React.createElement(Typography, {
-    color: "inherit",
-    variant: "body",
-    htmlTag: "span"
-  }, label), metaLabelProps && /*#__PURE__*/React.createElement(MetaLabel, metaLabelProps)), chipCheckboxProps && /*#__PURE__*/React.createElement(ChipCheckbox, chipCheckboxProps), removeButtonProps && /*#__PURE__*/React.createElement(RemoveButton, _extends({}, removeButtonProps, {
-    onClick: handleRemove,
-    isDisabled: isDisabled
-  }))));
+  return /*#__PURE__*/_jsx(ConditionalTooltipWrapper, {
+    tooltipContent: tooltipContent,
+    children: /*#__PURE__*/_jsxs(BaseChip, {
+      size: size,
+      isInteractive: Boolean(onClick) && !isDisabled,
+      onClick: !isDisabled && onClick,
+      includeRightPadding: !onRemoveClick,
+      reduceLeftPadding: Boolean(iconProps),
+      isDisabled: isDisabled,
+      children: [/*#__PURE__*/_jsx(ChipIcon, _extends({}, iconProps)), /*#__PURE__*/_jsxs(BaseChipLabelContainer, {
+        overflowBehavior: overflowBehavior,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          color: "inherit",
+          variant: "body",
+          htmlTag: "span",
+          children: label
+        }), metaLabelProps && /*#__PURE__*/_jsx(MetaLabel, _extends({}, metaLabelProps))]
+      }), chipCheckboxProps && /*#__PURE__*/_jsx(ChipCheckbox, _extends({}, chipCheckboxProps)), removeButtonProps && /*#__PURE__*/_jsx(RemoveButton, _extends({}, removeButtonProps, {
+        onClick: handleRemove,
+        isDisabled: isDisabled
+      }))]
+    })
+  });
 }
 export default Chip;

package/dist/esm/ColorModeProvider/components/BaseColorModeProvider.js

@@ -1,8 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["mode", "children"];
 import { AVAILABLE_THEMES } from "@vitality-ds/system";
 import React from "react";
 import { ThemeProvider } from "../../ThemeProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
 function ColorModeProvider(_ref) {
   var mode = _ref.mode,
     children = _ref.children,
@@ -11,8 +13,11 @@ function ColorModeProvider(_ref) {
    * The string returned from Stitches and createTheme() is the className which maps to the relevant CSS variables of that theme
    */
   var colorModeClassName = AVAILABLE_THEMES[mode];
-  return /*#__PURE__*/React.createElement(ThemeProvider, restProps, /*#__PURE__*/React.createElement("div", {
-    className: colorModeClassName
-  }, children));
+  return /*#__PURE__*/_jsx(ThemeProvider, _extends({}, restProps, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: colorModeClassName,
+      children: children
+    })
+  }));
 }
 export default ColorModeProvider;

package/dist/esm/ColorModeProvider/index.js

@@ -1,14 +1,17 @@
 import React from "react";
 import ColorModeProvider from "./components/BaseColorModeProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
 export function LightModeProvider(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement(ColorModeProvider, {
-    mode: "light"
-  }, children);
+  return /*#__PURE__*/_jsx(ColorModeProvider, {
+    mode: "light",
+    children: children
+  });
 }
 export function DarkModeProvider(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement(ColorModeProvider, {
-    mode: "dark"
-  }, children);
+  return /*#__PURE__*/_jsx(ColorModeProvider, {
+    mode: "dark",
+    children: children
+  });
 }

package/dist/esm/ComboButton/index.js

@@ -4,29 +4,31 @@ import React from "react";
 import Button from "../Button";
 import DropdownMenu from "../DropdownMenu";
 import { BaseComboButton } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ComboButton(_ref) {
   var size = _ref.size,
     mainButtonProps = _ref.mainButtonProps,
     items = _ref.items;
-  return /*#__PURE__*/React.createElement(BaseComboButton, {
-    size: size
-  }, /*#__PURE__*/React.createElement(Button, _extends({
-    "data-vitality-component": "combo-button-main"
-  }, mainButtonProps, {
-    size: size
-  })), /*#__PURE__*/React.createElement(DropdownMenu, {
-    preferredAlignment: "end",
-    trigger: {
-      type: "button",
-      props: {
-        size: size,
-        "data-vitality-component": "combo-button-dropdown",
-        iconLeft: /*#__PURE__*/React.createElement(ChevronDown, null),
-        children: "",
-        appearance: mainButtonProps === null || mainButtonProps === void 0 ? void 0 : mainButtonProps.appearance
-      }
-    },
-    items: items
-  }));
+  return /*#__PURE__*/_jsxs(BaseComboButton, {
+    size: size,
+    children: [/*#__PURE__*/_jsx(Button, _extends({
+      "data-vitality-component": "combo-button-main"
+    }, mainButtonProps, {
+      size: size
+    })), /*#__PURE__*/_jsx(DropdownMenu, {
+      preferredAlignment: "end",
+      trigger: {
+        type: "button",
+        props: {
+          size: size,
+          "data-vitality-component": "combo-button-dropdown",
+          iconLeft: /*#__PURE__*/_jsx(ChevronDown, {}),
+          children: "",
+          appearance: mainButtonProps === null || mainButtonProps === void 0 ? void 0 : mainButtonProps.appearance
+        }
+      },
+      items: items
+    })]
+  });
 }
 export default ComboButton;

package/dist/esm/Dialog/components/DialogActions/index.js

@@ -4,6 +4,7 @@ import Button from "../../../Button";
 import { EMPTY_OBJ } from "../../../helpers/logic/empties";
 import VARIANT_OPTIONS from "../../constants";
 import { BaseDialogActions } from "./styled";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function DialogActions(_ref) {
   var primaryButtonProps = _ref.primaryButtonProps,
     secondaryButtonProps = _ref.secondaryButtonProps,
@@ -18,10 +19,22 @@ function DialogActions(_ref) {
     tertiaryLabel = _ref4.label;
   var _ref5 = cancelButtonProps || EMPTY_OBJ,
     cancelLabel = _ref5.label;
-  return /*#__PURE__*/React.createElement(BaseDialogActions, null, VARIANT_OPTIONS[variant].cancelActionAllowed && cancelButtonProps && /*#__PURE__*/React.createElement(Button, _extends({
-    appearance: "ghost"
-  }, cancelButtonProps), cancelLabel), VARIANT_OPTIONS[variant].secondaryActionsAllowed && /*#__PURE__*/React.createElement(React.Fragment, null, tertiaryButtonProps && /*#__PURE__*/React.createElement(Button, tertiaryButtonProps, tertiaryLabel), secondaryButtonProps && /*#__PURE__*/React.createElement(Button, secondaryButtonProps, secondaryLabel)), primaryButtonProps && /*#__PURE__*/React.createElement(Button, _extends({
-    appearance: VARIANT_OPTIONS[variant].primaryActionVariant
-  }, primaryButtonProps), primaryLabel || VARIANT_OPTIONS[variant].primaryActionText));
+  return /*#__PURE__*/_jsxs(BaseDialogActions, {
+    children: [VARIANT_OPTIONS[variant].cancelActionAllowed && cancelButtonProps && /*#__PURE__*/_jsx(Button, _extends({
+      appearance: "ghost"
+    }, cancelButtonProps, {
+      children: cancelLabel
+    })), VARIANT_OPTIONS[variant].secondaryActionsAllowed && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [tertiaryButtonProps && /*#__PURE__*/_jsx(Button, _extends({}, tertiaryButtonProps, {
+        children: tertiaryLabel
+      })), secondaryButtonProps && /*#__PURE__*/_jsx(Button, _extends({}, secondaryButtonProps, {
+        children: secondaryLabel
+      }))]
+    }), primaryButtonProps && /*#__PURE__*/_jsx(Button, _extends({
+      appearance: VARIANT_OPTIONS[variant].primaryActionVariant
+    }, primaryButtonProps, {
+      children: primaryLabel || VARIANT_OPTIONS[variant].primaryActionText
+    }))]
+  });
 }
 export default DialogActions;

package/dist/esm/Dialog/components/DialogContent/index.js

@@ -1,8 +1,13 @@
 import React from "react";
 import Typography from "../../../Typography";
 import { BaseDialogContent } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function DialogContent(_ref) {
   var content = _ref.content;
-  return /*#__PURE__*/React.createElement(BaseDialogContent, null, content && typeof content === "string" ? /*#__PURE__*/React.createElement(Typography, null, content) : content);
+  return /*#__PURE__*/_jsx(BaseDialogContent, {
+    children: content && typeof content === "string" ? /*#__PURE__*/_jsx(Typography, {
+      children: content
+    }) : content
+  });
 }
 export default DialogContent;

package/dist/esm/Dialog/components/DialogHeader/index.js

@@ -5,6 +5,7 @@ import Stack from "../../../Stack";
 import Typography from "../../../Typography";
 import VARIANT_OPTIONS from "../../constants";
 import { BaseDialogHeader, TitleContainer, UtilityIconContainer } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DialogHeader(_ref) {
   var title = _ref.title,
     subtitle = _ref.subtitle,
@@ -12,26 +13,32 @@ function DialogHeader(_ref) {
     closeButtonOnClick = _ref.closeButtonOnClick,
     variant = _ref.variant;
   var IconComponent = VARIANT_OPTIONS[variant].forcedIcon ? VARIANT_OPTIONS[variant].forcedIcon : icon;
-  return /*#__PURE__*/React.createElement(BaseDialogHeader, {
-    variant: variant
-  }, /*#__PURE__*/React.createElement(TitleContainer, null, VARIANT_OPTIONS[variant].titleIcon && IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
-    color: "currentColor",
-    size: "1.5rem"
-  }), /*#__PURE__*/React.createElement(Stack, {
-    spacing: "none"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    color: "inherit",
-    variant: "sectionTitle"
-  }, title), subtitle && /*#__PURE__*/React.createElement(Typography, {
-    color: "lowContrast",
-    variant: "sectionSubtitle"
-  }, subtitle))), VARIANT_OPTIONS[variant].headerCloseAllowed && closeButtonOnClick && /*#__PURE__*/React.createElement(UtilityIconContainer, null, /*#__PURE__*/React.createElement(IconButton, {
-    size: "compact",
-    onClick: closeButtonOnClick,
-    tooltipContent: "Close Dialog",
-    icon: /*#__PURE__*/React.createElement(X, {
-      color: "gray"
-    })
-  })));
+  return /*#__PURE__*/_jsxs(BaseDialogHeader, {
+    variant: variant,
+    children: [/*#__PURE__*/_jsxs(TitleContainer, {
+      children: [VARIANT_OPTIONS[variant].titleIcon && IconComponent && /*#__PURE__*/_jsx(IconComponent, {
+        color: "currentColor",
+        size: "1.5rem"
+      }), /*#__PURE__*/_jsxs(Stack, {
+        spacing: "none",
+        children: [/*#__PURE__*/_jsx(Typography, {
+          color: "inherit",
+          variant: "sectionTitle",
+          children: title
+        }), subtitle && /*#__PURE__*/_jsx(Typography, {
+          color: "lowContrast",
+          variant: "sectionSubtitle",
+          children: subtitle
+        })]
+      })]
+    }), VARIANT_OPTIONS[variant].headerCloseAllowed && closeButtonOnClick && /*#__PURE__*/_jsx(UtilityIconContainer, {
+      children: /*#__PURE__*/_jsx(IconButton, {
+        size: "compact",
+        onClick: closeButtonOnClick,
+        tooltipContent: "Close Dialog",
+        icon: /*#__PURE__*/_jsx(X, {})
+      })
+    })]
+  });
 }
 export default DialogHeader;

package/dist/esm/Dialog/index.js

@@ -5,6 +5,7 @@ import DialogContent from "./components/DialogContent";
 import DialogHeader from "./components/DialogHeader";
 import VARIANT_OPTIONS from "./constants";
 import { BaseDialogContainer } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Dialog(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "md" : _ref$width,
@@ -13,14 +14,15 @@ function Dialog(_ref) {
     headerProps = _ref.headerProps,
     content = _ref.content,
     actionsProps = _ref.actionsProps;
-  return /*#__PURE__*/React.createElement(BaseDialogContainer, {
-    width: width
-  }, /*#__PURE__*/React.createElement(DialogContent, {
-    content: content
-  }), VARIANT_OPTIONS[variant].actionsAllowed && actionsProps && /*#__PURE__*/React.createElement(DialogActions, _extends({
-    variant: variant
-  }, actionsProps)), /*#__PURE__*/React.createElement(DialogHeader, _extends({
-    variant: variant
-  }, headerProps)));
+  return /*#__PURE__*/_jsxs(BaseDialogContainer, {
+    width: width,
+    children: [/*#__PURE__*/_jsx(DialogContent, {
+      content: content
+    }), VARIANT_OPTIONS[variant].actionsAllowed && actionsProps && /*#__PURE__*/_jsx(DialogActions, _extends({
+      variant: variant
+    }, actionsProps)), /*#__PURE__*/_jsx(DialogHeader, _extends({
+      variant: variant
+    }, headerProps))]
+  });
 }
 export default Dialog;

package/dist/esm/Divider/index.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["as", "style", "css", "direction", "color", "size", "spacing", "isFirstItem", "indentContent"];
 import React from "react";
 import { BaseDivider } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function Divider(_ref) {
   var as = _ref.as,
     style = _ref.style,
@@ -18,7 +19,7 @@ function Divider(_ref) {
     isFirstItem = _ref.isFirstItem,
     indentContent = _ref.indentContent,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(BaseDivider, _extends({
+  return /*#__PURE__*/_jsx(BaseDivider, _extends({
     direction: direction,
     color: color,
     size: size,

package/dist/esm/Divider/index.spec.js

@@ -1,9 +1,10 @@
 import { render } from "@testing-library/react";
 import React from "react";
 import Divider from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe("<Divider />", function () {
   it("Renders the correct HTML tag when it is passed in", function () {
-    var _render = render(/*#__PURE__*/React.createElement(Divider, null)),
+    var _render = render(/*#__PURE__*/_jsx(Divider, {})),
       container = _render.container;
     expect(container.children[0].tagName).toEqual("HR");
   });

package/dist/esm/DropdownMenu/components/CheckableDropdownMenuItem/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Content from "../Content";
 import { BaseCheckableItem } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function CheckableDropdownMenuItem(_ref) {
   var checked = _ref.checked,
     onClick = _ref.onClick,
@@ -9,16 +10,17 @@ function CheckableDropdownMenuItem(_ref) {
     label = _ref.label,
     disabled = _ref.disabled,
     indentContent = _ref.indentContent;
-  return /*#__PURE__*/React.createElement(BaseCheckableItem, {
+  return /*#__PURE__*/_jsx(BaseCheckableItem, {
     checked: checked,
     onCheckedChange: onClick,
     disabled: disabled,
-    indentContent: indentContent
-  }, /*#__PURE__*/React.createElement(Content, {
-    icon: icon,
-    label: label,
-    checked: checked,
-    shortcut: shortcut
-  }));
+    indentContent: indentContent,
+    children: /*#__PURE__*/_jsx(Content, {
+      icon: icon,
+      label: label,
+      checked: checked,
+      shortcut: shortcut
+    })
+  });
 }
 export default CheckableDropdownMenuItem;

package/dist/esm/DropdownMenu/components/Content/index.js

@@ -4,24 +4,32 @@ import Shortcuts from "../../../Shortcuts";
 import Stack from "../../../Stack";
 import { CheckedIndicator } from "../CheckableDropdownMenuItem/styled";
 import DropdownMenuItemIconContainer from "../IconContainer";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function Content(_ref) {
   var icon = _ref.icon,
     label = _ref.label,
     checked = _ref.checked,
     shortcut = _ref.shortcut,
     showSubmenuIndicator = _ref.showSubmenuIndicator;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
-    direction: "horizontal",
-    spacing: "sm",
-    align: "center"
-  }, checked && /*#__PURE__*/React.createElement(CheckedIndicator, null, /*#__PURE__*/React.createElement(Check, {
-    color: "currentColor"
-  })), icon && /*#__PURE__*/React.createElement(DropdownMenuItemIconContainer, {
-    icon: icon
-  }), label), /*#__PURE__*/React.createElement(Stack, null, shortcut && /*#__PURE__*/React.createElement(Shortcuts, {
-    keys: shortcut
-  }), showSubmenuIndicator && /*#__PURE__*/React.createElement(ChevronRight, {
-    color: "currentColor"
-  })));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Stack, {
+      direction: "horizontal",
+      spacing: "sm",
+      align: "center",
+      children: [checked && /*#__PURE__*/_jsx(CheckedIndicator, {
+        children: /*#__PURE__*/_jsx(Check, {
+          color: "currentColor"
+        })
+      }), icon && /*#__PURE__*/_jsx(DropdownMenuItemIconContainer, {
+        icon: icon
+      }), label]
+    }), /*#__PURE__*/_jsxs(Stack, {
+      children: [shortcut && /*#__PURE__*/_jsx(Shortcuts, {
+        keys: shortcut
+      }), showSubmenuIndicator && /*#__PURE__*/_jsx(ChevronRight, {
+        color: "currentColor"
+      })]
+    })]
+  });
 }
 export default Content;

package/dist/esm/DropdownMenu/components/DropdownMenuItem/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Content from "../Content";
 import { BaseDropdownMenuItem } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function DropdownMenuItem(_ref) {
   var label = _ref.label,
     onClick = _ref.onClick,
@@ -8,14 +9,15 @@ function DropdownMenuItem(_ref) {
     icon = _ref.icon,
     disabled = _ref.disabled,
     indentContent = _ref.indentContent;
-  return /*#__PURE__*/React.createElement(BaseDropdownMenuItem, {
+  return /*#__PURE__*/_jsx(BaseDropdownMenuItem, {
     onClick: onClick,
     disabled: disabled,
-    indentContent: indentContent
-  }, /*#__PURE__*/React.createElement(Content, {
-    icon: icon,
-    label: label,
-    shortcut: shortcut
-  }));
+    indentContent: indentContent,
+    children: /*#__PURE__*/_jsx(Content, {
+      icon: icon,
+      label: label,
+      shortcut: shortcut
+    })
+  });
 }
 export default DropdownMenuItem;

package/dist/esm/DropdownMenu/components/DropdownMenuLinkItem/index.js

@@ -4,6 +4,7 @@ var _excluded = ["label", "shortcut", "icon", "disabled", "isFirstItem", "indent
 import React from "react";
 import Content from "../Content";
 import { BaseDropdownMenuItem } from "../DropdownMenuItem/styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function DropdownMenuLinkItem(_ref) {
   var label = _ref.label,
     shortcut = _ref.shortcut,
@@ -12,17 +13,20 @@ function DropdownMenuLinkItem(_ref) {
     isFirstItem = _ref.isFirstItem,
     indentContent = _ref.indentContent,
     linkProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(BaseDropdownMenuItem, {
+  return /*#__PURE__*/_jsx(BaseDropdownMenuItem, {
     asChild: true,
     disabled: disabled,
     indentContent: indentContent,
-    htmlTag: "a"
-  }, /*#__PURE__*/React.createElement("a", _extends({
-    role: "menuitem"
-  }, linkProps), /*#__PURE__*/React.createElement(Content, {
-    icon: icon,
-    label: label,
-    shortcut: shortcut
-  })));
+    htmlTag: "a",
+    children: /*#__PURE__*/_jsx("a", _extends({
+      role: "menuitem"
+    }, linkProps, {
+      children: /*#__PURE__*/_jsx(Content, {
+        icon: icon,
+        label: label,
+        shortcut: shortcut
+      })
+    }))
+  });
 }
 export default DropdownMenuLinkItem;

package/dist/esm/DropdownMenu/components/GroupLabel/index.js

@@ -1,9 +1,14 @@
 import React from "react";
 import Divider from "../../../Divider";
 import { BaseGroupLabel } from "./styled";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function GroupLabel(_ref) {
   var label = _ref.label,
     isFirstItem = _ref.isFirstItem;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !isFirstItem && /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(BaseGroupLabel, null, label));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!isFirstItem && /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(BaseGroupLabel, {
+      children: label
+    })]
+  });
 }
 export default GroupLabel;

package/dist/esm/DropdownMenu/components/IconContainer/index.js

@@ -1,9 +1,12 @@
 import React from "react";
 import { BaseDropdownMenuItemIcon } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function DropdownMenuItemIconContainer(_ref) {
   var icon = _ref.icon;
   var Component = icon && icon.type;
-  return /*#__PURE__*/React.createElement(BaseDropdownMenuItemIcon, null, /*#__PURE__*/React.createElement(Component, {
-    color: "currentColor"
-  }));
+  return /*#__PURE__*/_jsx(BaseDropdownMenuItemIcon, {
+    children: /*#__PURE__*/_jsx(Component, {
+      color: "currentColor"
+    })
+  });
 }

package/dist/esm/DropdownMenu/components/Submenu/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import Content from "../Content";
 import useDropdownSubmenuItems from "./hooks/useDropdownSubmenuItems";
 import { BaseSubContent, BaseSubmenu, BaseSubTrigger } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Submenu(_ref) {
   var label = _ref.label,
     icon = _ref.icon,
@@ -9,13 +10,18 @@ function Submenu(_ref) {
     subMenu = _ref.subMenu,
     indentContent = _ref.indentContent;
   var dropdownSubMenuComponents = useDropdownSubmenuItems(subMenu);
-  return /*#__PURE__*/React.createElement(BaseSubmenu, null, /*#__PURE__*/React.createElement(BaseSubTrigger, {
-    indentContent: indentContent
-  }, /*#__PURE__*/React.createElement(Content, {
-    icon: icon,
-    label: label,
-    showSubmenuIndicator: true,
-    shortcut: shortcut
-  })), /*#__PURE__*/React.createElement(BaseSubContent, null, dropdownSubMenuComponents));
+  return /*#__PURE__*/_jsxs(BaseSubmenu, {
+    children: [/*#__PURE__*/_jsx(BaseSubTrigger, {
+      indentContent: indentContent,
+      children: /*#__PURE__*/_jsx(Content, {
+        icon: icon,
+        label: label,
+        showSubmenuIndicator: true,
+        shortcut: shortcut
+      })
+    }), /*#__PURE__*/_jsx(BaseSubContent, {
+      children: dropdownSubMenuComponents
+    })]
+  });
 }
 export default Submenu;

package/dist/esm/DropdownMenu/index.js

@@ -4,6 +4,7 @@ import { FLOATING_ELEMENT_SIDE_OFFSET } from "./constants";
 import useDropdownMenuItems from "./hooks/useDropdownMenuItems";
 import useTrigger from "./hooks/useTrigger";
 import { BaseDropdown, Content, Trigger } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DropdownMenu(_ref) {
   var items = _ref.items,
     trigger = _ref.trigger,
@@ -16,15 +17,18 @@ function DropdownMenu(_ref) {
     props = _ref2.props;
   var triggerComponent = useTrigger(type, props, disabled);
   var dropdownMenuComponents = useDropdownMenuItems(items);
-  return /*#__PURE__*/React.createElement(BaseDropdown, {
-    modal: false
-  }, /*#__PURE__*/React.createElement(Trigger, {
-    disabled: disabled,
-    asChild: true
-  }, triggerComponent), /*#__PURE__*/React.createElement(Content, {
-    align: preferredAlignment,
-    sideOffset: FLOATING_ELEMENT_SIDE_OFFSET
-  }, dropdownMenuComponents));
+  return /*#__PURE__*/_jsxs(BaseDropdown, {
+    modal: false,
+    children: [/*#__PURE__*/_jsx(Trigger, {
+      disabled: disabled,
+      asChild: true,
+      children: triggerComponent
+    }), /*#__PURE__*/_jsx(Content, {
+      align: preferredAlignment,
+      sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
+      children: dropdownMenuComponents
+    })]
+  });
 }
 DropdownMenu.displayName = "DropdownMenu";
 export default DropdownMenu;