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

package/dist/esm/Badge/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { BaseBadge } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Badge(_ref) {
   var variant = _ref.variant,
     _ref$color = _ref.color,
@@ -10,21 +11,23 @@ function Badge(_ref) {
     children = _ref.children;
   var isInline = !children || !children && !variant;
   var renderBadge = function renderBadge() {
-    return /*#__PURE__*/React.createElement(BaseBadge, {
+    return /*#__PURE__*/_jsx(BaseBadge, {
       "aria-label": "Badge showing ".concat(content, " count"),
       inline: isInline,
       variant: variant,
       color: color,
-      position: isInline ? null : position
-    }, variant === "dot" ? null : content);
+      position: isInline ? null : position,
+      children: variant === "dot" ? null : content
+    });
   };
   if (!children) {
     return renderBadge();
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     style: {
       position: "relative"
-    }
-  }, children, renderBadge());
+    },
+    children: [children, renderBadge()]
+  });
 }
 export default Badge;

package/dist/esm/Box/index.js

@@ -4,6 +4,7 @@ var _excluded = ["width", "height", "position", "maxWidth", "minWidth", "maxHeig
 import React from "react";
 import { EMPTY_OBJ } from "../helpers/logic/empties";
 import { BaseBox } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function Box(_ref) {
   var width = _ref.width,
     height = _ref.height,
@@ -29,7 +30,7 @@ function Box(_ref) {
   var _ref2 = gridSpans || EMPTY_OBJ,
     cols = _ref2.cols,
     rows = _ref2.rows;
-  return /*#__PURE__*/React.createElement(BaseBox, _extends({
+  return /*#__PURE__*/_jsx(BaseBox, _extends({
     shouldShrink: shouldShrink,
     shouldGrow: shouldGrow,
     as: htmlTag,
@@ -49,6 +50,8 @@ function Box(_ref) {
       left: left,
       inset: inset
     }
-  }, restProps), children);
+  }, restProps, {
+    children: children
+  }));
 }
 export default Box;

package/dist/esm/Breadcrumbs/components/Breadcrumb/index.js

@@ -3,6 +3,7 @@ import React from "react";
 import Tooltip from "../../../Tooltip";
 import { useIsOverflowing } from "./hooks";
 import { BaseBreadcrumbConstrainedWidthContainerStyles, BaseBreadcrumbLink, BaseBreadcrumbListItem, BaseBreadcrumbText } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Breadcrumb(_ref) {
   var href = _ref.href,
     target = _ref.target,
@@ -12,21 +13,30 @@ function Breadcrumb(_ref) {
   var _useIsOverflowing = useIsOverflowing(),
     overflowContainerRef = _useIsOverflowing.overflowContainerRef,
     isOverflowing = _useIsOverflowing.isOverflowing;
-  return /*#__PURE__*/React.createElement(BaseBreadcrumbListItem, null, isLastItem ? /*#__PURE__*/React.createElement(BaseBreadcrumbConstrainedWidthContainerStyles, {
-    ref: overflowContainerRef
-  }, isOverflowing ? /*#__PURE__*/React.createElement(Tooltip, {
-    preferredSide: "top",
-    preferredAlignment: "start",
-    content: text
-  }, /*#__PURE__*/React.createElement(BaseBreadcrumbText, {
-    "aria-current": "page"
-  }, text)) : /*#__PURE__*/React.createElement(BaseBreadcrumbText, null, text)) : linkComponent && /*#__PURE__*/React.createElement(BaseBreadcrumbLink, {
-    as: "span"
-  }, linkComponent) || /*#__PURE__*/React.createElement(BaseBreadcrumbLink, {
-    href: href,
-    target: target
-  }, text), isLastItem ? null : /*#__PURE__*/React.createElement(ChevronRight, {
-    size: "0.875rem"
-  }));
+  return /*#__PURE__*/_jsxs(BaseBreadcrumbListItem, {
+    children: [isLastItem ? /*#__PURE__*/_jsx(BaseBreadcrumbConstrainedWidthContainerStyles, {
+      ref: overflowContainerRef,
+      children: isOverflowing ? /*#__PURE__*/_jsx(Tooltip, {
+        preferredSide: "top",
+        preferredAlignment: "start",
+        content: text,
+        children: /*#__PURE__*/_jsx(BaseBreadcrumbText, {
+          "aria-current": "page",
+          children: text
+        })
+      }) : /*#__PURE__*/_jsx(BaseBreadcrumbText, {
+        children: text
+      })
+    }) : linkComponent && /*#__PURE__*/_jsx(BaseBreadcrumbLink, {
+      as: "span",
+      children: linkComponent
+    }) || /*#__PURE__*/_jsx(BaseBreadcrumbLink, {
+      href: href,
+      target: target,
+      children: text
+    }), isLastItem ? null : /*#__PURE__*/_jsx(ChevronRight, {
+      size: "0.875rem"
+    })]
+  });
 }
 export default Breadcrumb;

package/dist/esm/Breadcrumbs/index.js

@@ -2,17 +2,19 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from "react";
 import Breadcrumb from "./components/Breadcrumb";
 import { BaseBreadcrumbsContainer } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function Breadcrumbs(_ref) {
   var items = _ref.items;
-  return /*#__PURE__*/React.createElement("nav", {
-    "aria-label": "breadcrumb"
-  }, /*#__PURE__*/React.createElement(BaseBreadcrumbsContainer, null, items.map(function (item, key) {
-    var isLastItem = key === items.length - 1;
-    return /*#__PURE__*/React.createElement(Breadcrumb, _extends({
-      key: "".concat(item.href, "-").concat(item.text)
-    }, item, {
-      isLastItem: isLastItem
-    }));
-  })));
+  return /*#__PURE__*/_jsx("nav", {
+    "aria-label": "breadcrumb",
+    children: /*#__PURE__*/_jsx(BaseBreadcrumbsContainer, {
+      children: items.map(function (item, key) {
+        var isLastItem = key === items.length - 1;
+        return /*#__PURE__*/_jsx(Breadcrumb, _extends({}, item, {
+          isLastItem: isLastItem
+        }), "".concat(item.href, "-").concat(item.text));
+      })
+    })
+  });
 }
 export default Breadcrumbs;

package/dist/esm/Button/index.js

@@ -4,6 +4,7 @@ var _excluded = ["appearance", "as", "children", "className", "css", "iconLeft",
 import React from "react";
 import { getAppearance } from "./logic";
 import ButtonPrimitive from "./primitives";
+import { jsx as _jsx } from "react/jsx-runtime";
 var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? "standard" : _ref$appearance,
@@ -25,7 +26,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     variant = _getAppearance.variant,
     spinnerColor = _getAppearance.spinnerColor,
     shortcutsVariant = _getAppearance.shortcutsVariant;
-  return /*#__PURE__*/React.createElement(ButtonPrimitive, _extends({
+  return /*#__PURE__*/_jsx(ButtonPrimitive, _extends({
     color: color,
     variant: variant,
     spinnerColor: spinnerColor,
@@ -36,7 +37,9 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isLoading: isLoading,
     shortcut: shortcut,
     shortcutsVariant: shortcutsVariant
-  }, restProps), children);
+  }, restProps, {
+    children: children
+  }));
 });
 Button.displayName = "Button";
 export default Button;

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

@@ -1,21 +1,24 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import Button from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe("<Button />", function () {
   it("should trigger onClick when clicked", function () {
     var onClickHandler = jest.fn();
-    render(/*#__PURE__*/React.createElement(Button, {
-      onClick: onClickHandler
-    }, "My Test Button"));
+    render(/*#__PURE__*/_jsx(Button, {
+      onClick: onClickHandler,
+      children: "My Test Button"
+    }));
     fireEvent.click(screen.getByText("My Test Button"));
     expect(onClickHandler).toHaveBeenCalled();
   });
   it("should not trigger onClick when clicked if it is disabled", function () {
     var onClickHandler = jest.fn();
-    render(/*#__PURE__*/React.createElement(Button, {
+    render(/*#__PURE__*/_jsx(Button, {
       onClick: onClickHandler,
-      disabled: true
-    }, "My Test Button"));
+      disabled: true,
+      children: "My Test Button"
+    }));
     fireEvent.click(screen.getByText("My Test Button"));
     expect(onClickHandler).not.toHaveBeenCalled();
   });

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

@@ -6,6 +6,7 @@ import Shortcuts from "../../Shortcuts";
 import Spinner from "../../Spinner";
 import { ButtonIcon } from "../components/ButtonIcon";
 import { BaseButton, BaseContentContainer, BaseLoadingContainer } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var ButtonPrimitive = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var as = _ref.as,
     children = _ref.children,
@@ -23,34 +24,40 @@ var ButtonPrimitive = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     shortcut = _ref.shortcut,
     shortcutsVariant = _ref.shortcutsVariant,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(BaseButton, _extends({
+  return /*#__PURE__*/_jsxs(BaseButton, _extends({
     ref: ref,
     size: size,
     isLoading: isLoading,
     color: color,
     variant: variant,
     hasShortcut: !!shortcut
-  }, restProps), /*#__PURE__*/React.createElement(BaseContentContainer, {
-    isLoading: isLoading
-  }, iconLeft && /*#__PURE__*/React.createElement(ButtonIcon, {
-    spacing: "end",
-    size: size
-  }, iconLeft), children, shortcut && /*#__PURE__*/React.createElement(Shortcuts, {
-    keys: shortcut,
-    variant: shortcutsVariant,
-    color: color,
-    combineKeys: true
-  }), iconRight && /*#__PURE__*/React.createElement(ButtonIcon, {
-    spacing: "start",
-    size: size
-  }, iconRight)), isLoading && /*#__PURE__*/React.createElement(BaseLoadingContainer, {
-    css: {
-      lineHeight: 1
-    }
-  }, /*#__PURE__*/React.createElement(Spinner, {
-    size: size === "compact" ? "sm" : "md",
-    onBackgroundColor: spinnerColor
-  })));
+  }, restProps, {
+    children: [/*#__PURE__*/_jsxs(BaseContentContainer, {
+      isLoading: isLoading,
+      children: [iconLeft && /*#__PURE__*/_jsx(ButtonIcon, {
+        spacing: "end",
+        size: size,
+        children: iconLeft
+      }), children, shortcut && /*#__PURE__*/_jsx(Shortcuts, {
+        keys: shortcut,
+        variant: shortcutsVariant,
+        color: color,
+        combineKeys: true
+      }), iconRight && /*#__PURE__*/_jsx(ButtonIcon, {
+        spacing: "start",
+        size: size,
+        children: iconRight
+      })]
+    }), isLoading && /*#__PURE__*/_jsx(BaseLoadingContainer, {
+      css: {
+        lineHeight: 1
+      },
+      children: /*#__PURE__*/_jsx(Spinner, {
+        size: size === "compact" ? "sm" : "md",
+        onBackgroundColor: spinnerColor
+      })
+    })]
+  }));
 });
 ButtonPrimitive.displayName = "ButtonPrimitive";
 export default ButtonPrimitive;

package/dist/esm/Callout/components/CalloutDescription/index.js

@@ -1,14 +1,16 @@
 import React from "react";
 import { BaseCalloutDescription } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function CalloutDescription(_ref) {
   var content = _ref.content,
     severity = _ref.severity,
     size = _ref.size,
     hideTitle = _ref.hideTitle;
-  return /*#__PURE__*/React.createElement(BaseCalloutDescription, {
+  return /*#__PURE__*/_jsx(BaseCalloutDescription, {
     size: size,
     severity: severity,
-    hideTitle: hideTitle
-  }, content);
+    hideTitle: hideTitle,
+    children: content
+  });
 }
 export default CalloutDescription;

package/dist/esm/Callout/index.js

@@ -6,6 +6,7 @@ import Typography from "../Typography";
 import CalloutDescription from "./components/CalloutDescription";
 import useCalloutContent from "./hooks/useCalloutContent";
 import { BaseCallout, BaseCalloutActions, BaseCalloutIconContainer, BaseCalloutTitleContainer } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Callout(_ref) {
   var title = _ref.title,
     icon = _ref.icon,
@@ -40,7 +41,7 @@ function Callout(_ref) {
   };
   var getTitleContent = function getTitleContent() {
     if (hideTitle) {
-      return /*#__PURE__*/React.createElement(CalloutDescription, {
+      return /*#__PURE__*/_jsx(CalloutDescription, {
         hideTitle: hideTitle,
         size: size,
         severity: severity,
@@ -48,7 +49,7 @@ function Callout(_ref) {
       });
     }
     if (size === "compact") {
-      return /*#__PURE__*/React.createElement(CalloutDescription, {
+      return /*#__PURE__*/_jsx(CalloutDescription, {
         hideTitle: hideTitle,
         size: size,
         severity: severity,
@@ -56,50 +57,62 @@ function Callout(_ref) {
       });
     }
     if (size === "blockCompact") {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
-        color: titleColor,
-        variant: "display200"
-      }, titleToDisplay), /*#__PURE__*/React.createElement(CalloutDescription, {
-        hideTitle: hideTitle,
-        size: size,
-        severity: severity,
-        content: description
-      }));
+      return /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          color: titleColor,
+          variant: "display200",
+          children: titleToDisplay
+        }), /*#__PURE__*/_jsx(CalloutDescription, {
+          hideTitle: hideTitle,
+          size: size,
+          severity: severity,
+          content: description
+        })]
+      });
     }
-    return /*#__PURE__*/React.createElement(Typography, {
+    return /*#__PURE__*/_jsx(Typography, {
       color: titleColor,
-      variant: "display300"
-    }, titleToDisplay);
+      variant: "display300",
+      children: titleToDisplay
+    });
   };
-  return /*#__PURE__*/React.createElement(BaseCallout, {
+  return /*#__PURE__*/_jsxs(BaseCallout, {
     role: "alert",
     size: size,
-    severity: severity
-  }, /*#__PURE__*/React.createElement(BaseCalloutTitleContainer, {
-    size: size,
-    css: {
-      color: iconColor
-    }
-  }, /*#__PURE__*/React.createElement(BaseCalloutIconContainer, {
-    topNudge: size
-  }, /*#__PURE__*/React.createElement(IconComponent, {
-    size: iconSize,
-    color: "currentColor"
-  })), getTitleContent()), !isCompactLayout && !hideTitle && /*#__PURE__*/React.createElement(CalloutDescription, {
     severity: severity,
-    content: description
-  }), actions && size !== "compact" && /*#__PURE__*/React.createElement(BaseCalloutActions, {
-    size: size
-  }, secondary && /*#__PURE__*/React.createElement(ButtonPrimitive, _extends({
-    onClick: secondary.onClick,
-    variant: "ghost",
-    iconRight: secondary.icon,
-    isLoading: secondary.isLoading
-  }, commonButtonProps), secondary.label), primary && /*#__PURE__*/React.createElement(ButtonPrimitive, _extends({
-    onClick: primary.onClick,
-    variant: "solid",
-    iconRight: primary.icon,
-    isLoading: primary.isLoading
-  }, commonButtonProps), primary.label)));
+    children: [/*#__PURE__*/_jsxs(BaseCalloutTitleContainer, {
+      size: size,
+      css: {
+        color: iconColor
+      },
+      children: [/*#__PURE__*/_jsx(BaseCalloutIconContainer, {
+        topNudge: size,
+        children: /*#__PURE__*/_jsx(IconComponent, {
+          size: iconSize,
+          color: "currentColor"
+        })
+      }), getTitleContent()]
+    }), !isCompactLayout && !hideTitle && /*#__PURE__*/_jsx(CalloutDescription, {
+      severity: severity,
+      content: description
+    }), actions && size !== "compact" && /*#__PURE__*/_jsxs(BaseCalloutActions, {
+      size: size,
+      children: [secondary && /*#__PURE__*/_jsx(ButtonPrimitive, _extends({
+        onClick: secondary.onClick,
+        variant: "ghost",
+        iconRight: secondary.icon,
+        isLoading: secondary.isLoading
+      }, commonButtonProps, {
+        children: secondary.label
+      })), primary && /*#__PURE__*/_jsx(ButtonPrimitive, _extends({
+        onClick: primary.onClick,
+        variant: "solid",
+        iconRight: primary.icon,
+        isLoading: primary.isLoading
+      }, commonButtonProps, {
+        children: primary.label
+      }))]
+    })]
+  });
 }
 export default Callout;

package/dist/esm/Chip/components/Checkbox/constants.js

@@ -2,14 +2,15 @@ import { Check } from "lucide-react";
 import React from "react";
 import Spinner from "../../../Spinner";
 import { BaseChipCheckboxBox } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable-next-line import/prefer-default-export */
 export var COMPONENTS = {
-  LOADING: /*#__PURE__*/React.createElement(Spinner, {
+  LOADING: /*#__PURE__*/_jsx(Spinner, {
     size: "xs"
   }),
-  CHECKED: /*#__PURE__*/React.createElement(Check, {
+  CHECKED: /*#__PURE__*/_jsx(Check, {
     size: "1rem",
     color: "var(--vitality-colors-success11)"
   }),
-  UNCHECKED: /*#__PURE__*/React.createElement(BaseChipCheckboxBox, null)
+  UNCHECKED: /*#__PURE__*/_jsx(BaseChipCheckboxBox, {})
 };

package/dist/esm/Chip/components/Checkbox/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import ConditionalTooltipWrapper from "../../../helpers/components/ConditionalTooltipWrapper";
 import useChipCheckbox from "./hooks/useChipCheckbox";
 import { BaseChipCheckbox, BaseChipCheckboxIcon } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ChipCheckbox(_ref) {
   var _ref$label = _ref.label,
     label = _ref$label === void 0 ? "Ack" : _ref$label,
@@ -18,14 +19,17 @@ function ChipCheckbox(_ref) {
     handleClick = _useChipCheckbox.handleClick,
     icon = _useChipCheckbox.icon,
     state = _useChipCheckbox.state;
-  return /*#__PURE__*/React.createElement(ConditionalTooltipWrapper, {
-    tooltipContent: tooltipContent
-  }, /*#__PURE__*/React.createElement(BaseChipCheckbox, {
-    state: state,
-    onClick: !isDisabled && handleClick,
-    disabled: isDisabled
-  }, /*#__PURE__*/React.createElement(BaseChipCheckboxIcon, {
-    state: state
-  }, icon), label));
+  return /*#__PURE__*/_jsx(ConditionalTooltipWrapper, {
+    tooltipContent: tooltipContent,
+    children: /*#__PURE__*/_jsxs(BaseChipCheckbox, {
+      state: state,
+      onClick: !isDisabled && handleClick,
+      disabled: isDisabled,
+      children: [/*#__PURE__*/_jsx(BaseChipCheckboxIcon, {
+        state: state,
+        children: icon
+      }), label]
+    })
+  });
 }
 export default ChipCheckbox;

package/dist/esm/Chip/components/ChipIcon/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import ConditionalTooltipWrapper from "../../../helpers/components/ConditionalTooltipWrapper";
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function ChipIcon(_ref) {
   var icon = _ref.icon,
     tooltipContent = _ref.tooltipContent;
@@ -7,10 +8,11 @@ export default function ChipIcon(_ref) {
     return null;
   }
   var Icon = icon;
-  return /*#__PURE__*/React.createElement(ConditionalTooltipWrapper, {
-    tooltipContent: tooltipContent
-  }, /*#__PURE__*/React.createElement(Icon, {
-    size: "1rem",
-    color: "currentColor"
-  }));
+  return /*#__PURE__*/_jsx(ConditionalTooltipWrapper, {
+    tooltipContent: tooltipContent,
+    children: /*#__PURE__*/_jsx(Icon, {
+      size: "1rem",
+      color: "currentColor"
+    })
+  });
 }

package/dist/esm/Chip/components/MetaLabel/index.js

@@ -2,14 +2,21 @@ import React from "react";
 import ConditionalTooltipWrapper from "../../../helpers/components/ConditionalTooltipWrapper";
 import Typography from "../../../Typography";
 import { BaseMetaLabel } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function MetaLabel(_ref) {
   var label = _ref.label,
     tooltipContent = _ref.tooltipContent;
-  return /*#__PURE__*/React.createElement(BaseMetaLabel, null, /*#__PURE__*/React.createElement("span", null, "\xB7"), /*#__PURE__*/React.createElement(ConditionalTooltipWrapper, {
-    tooltipContent: tooltipContent
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    color: "lowContrast"
-  }, label)));
+  return /*#__PURE__*/_jsxs(BaseMetaLabel, {
+    children: [/*#__PURE__*/_jsx("span", {
+      children: "\xB7"
+    }), /*#__PURE__*/_jsx(ConditionalTooltipWrapper, {
+      tooltipContent: tooltipContent,
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        color: "lowContrast",
+        children: label
+      })
+    })]
+  });
 }
 export default MetaLabel;

package/dist/esm/Chip/components/RemoveButton/index.js

@@ -2,25 +2,31 @@ import { X } from "lucide-react";
 import React from "react";
 import ConditionalTooltipWrapper from "../../../helpers/components/ConditionalTooltipWrapper";
 import { BaseRemoveButtonButton, BaseRemoveButtonContainer } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 export function RemoveButtonContainer(_ref) {
   var tooltipContent = _ref.tooltipContent,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement(ConditionalTooltipWrapper, {
-    tooltipContent: tooltipContent
-  }, /*#__PURE__*/React.createElement(BaseRemoveButtonContainer, null, children));
+  return /*#__PURE__*/_jsx(ConditionalTooltipWrapper, {
+    tooltipContent: tooltipContent,
+    children: /*#__PURE__*/_jsx(BaseRemoveButtonContainer, {
+      children: children
+    })
+  });
 }
 function RemoveButton(_ref2) {
   var onClick = _ref2.onClick,
     tooltipContent = _ref2.tooltipContent,
     isDisabled = _ref2.isDisabled;
-  return /*#__PURE__*/React.createElement(RemoveButtonContainer, {
-    tooltipContent: tooltipContent
-  }, /*#__PURE__*/React.createElement(BaseRemoveButtonButton, {
-    onClick: onClick,
-    disabled: isDisabled
-  }, /*#__PURE__*/React.createElement(X, {
-    color: "currentColor",
-    size: "1em"
-  })));
+  return /*#__PURE__*/_jsx(RemoveButtonContainer, {
+    tooltipContent: tooltipContent,
+    children: /*#__PURE__*/_jsx(BaseRemoveButtonButton, {
+      onClick: onClick,
+      disabled: isDisabled,
+      children: /*#__PURE__*/_jsx(X, {
+        color: "currentColor",
+        size: "1em"
+      })
+    })
+  });
 }
 export default RemoveButton;

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;