@kaizen/components 3.3.1 → 3.3.3

package/dist/esm/src/Loading/LoadingSpinner/subcomponents/SpinnerIcon.mjs

@@ -1,20 +1,20 @@
-import React from 'react';
+import React__default from 'react';
 import modules_be1485f9 from '../LoadingSpinner.module.css.mjs';
 var SmallSpinnerIcon = function () {
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React__default.createElement("svg", {
     className: modules_be1485f9.spinner,
     "aria-hidden": "true",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("circle", {
+  }, /*#__PURE__*/React__default.createElement("circle", {
     cx: "12",
     cy: "12",
     r: "9",
     stroke: "currentColor",
     strokeWidth: "2",
     strokeOpacity: "0.3"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     fill: "currentColor",
@@ -22,20 +22,20 @@ var SmallSpinnerIcon = function () {
   }));
 };
 var MediumSpinnerIcon = function () {
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React__default.createElement("svg", {
     className: modules_be1485f9.spinner,
     "aria-hidden": "true",
     viewBox: "0 0 48 48",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("circle", {
+  }, /*#__PURE__*/React__default.createElement("circle", {
     cx: "24",
     cy: "24",
     r: "22.5",
     stroke: "currentColor",
     strokeWidth: "3",
     strokeOpacity: "0.3"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     fill: "currentColor",
@@ -43,19 +43,19 @@ var MediumSpinnerIcon = function () {
   }));
 };
 var ExtraSmallSpinnerIcon = function () {
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React__default.createElement("svg", {
     className: modules_be1485f9.spinner,
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("circle", {
+  }, /*#__PURE__*/React__default.createElement("circle", {
     opacity: "0.3",
     cx: "8",
     cy: "8",
     r: "6",
     stroke: "currentColor",
     strokeWidth: "2"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React__default.createElement("path", {
     d: "M14 8C14 4.68629 11.3137 2 8 2",
     stroke: "currentColor",
     strokeWidth: "2",
@@ -65,8 +65,8 @@ var ExtraSmallSpinnerIcon = function () {
 };
 var SpinnerIcon = function (_a) {
   var size = _a.size;
-  if (size === 'xs') return /*#__PURE__*/React.createElement(ExtraSmallSpinnerIcon, null);
-  if (size === 'sm') return /*#__PURE__*/React.createElement(SmallSpinnerIcon, null);
-  return /*#__PURE__*/React.createElement(MediumSpinnerIcon, null);
+  if (size === 'xs') return /*#__PURE__*/React__default.createElement(ExtraSmallSpinnerIcon, null);
+  if (size === 'sm') return /*#__PURE__*/React__default.createElement(SmallSpinnerIcon, null);
+  return /*#__PURE__*/React__default.createElement(MediumSpinnerIcon, null);
 };
 export { SpinnerIcon };

package/dist/esm/src/Menu/Menu.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef } from 'react';
 import { Menu as Menu$1 } from 'react-aria-components';
 import { mergeClassNames } from '../utils/mergeClassNames.mjs';
 import modules_f8dc2fc6 from './Menu.module.css.mjs';
@@ -7,16 +7,13 @@ import modules_f8dc2fc6 from './Menu.module.css.mjs';
 /**
  * A menu displays a list of actions or options that a user can choose.
  */
-const Menu = /*#__PURE__*/function () {
-  const Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
-    var className = _a.className,
-      props = __rest(_a, ["className"]);
-    return /*#__PURE__*/React.createElement(Menu$1, __assign({
-      className: mergeClassNames(modules_f8dc2fc6.menu, className),
-      ref: ref
-    }, props));
-  });
-  Menu.displayName = 'Menu';
-  return Menu;
-}();
+var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var className = _a.className,
+    props = __rest(_a, ["className"]);
+  return /*#__PURE__*/React__default.createElement(Menu$1, __assign({
+    className: mergeClassNames(modules_f8dc2fc6.menu, className),
+    ref: ref
+  }, props));
+});
+Menu.displayName = 'Menu';
 export { Menu };

package/dist/esm/src/Menu/MenuHeader.mjs

@@ -1,17 +1,14 @@
 import { __assign } from 'tslib';
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef } from 'react';
 import { Header } from 'react-aria-components';
 
 /**
  * A <header> element, used to title a MenuSection
  */
-const MenuHeader = /*#__PURE__*/function () {
-  const MenuHeader = /*#__PURE__*/forwardRef(function (props, ref) {
-    return /*#__PURE__*/React.createElement(Header, __assign({
-      ref: ref
-    }, props));
-  });
-  MenuHeader.displayName = 'MenuHeader';
-  return MenuHeader;
-}();
+var MenuHeader = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(Header, __assign({
+    ref: ref
+  }, props));
+});
+MenuHeader.displayName = 'MenuHeader';
 export { MenuHeader };

package/dist/esm/src/Menu/MenuItem.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef } from 'react';
 import { MenuItem as MenuItem$1 } from 'react-aria-components';
 import { mergeClassNames } from '../utils/mergeClassNames.mjs';
 import modules_8e83d36b from './MenuItem.module.css.mjs';
@@ -7,25 +7,22 @@ import modules_8e83d36b from './MenuItem.module.css.mjs';
 /**
  * A MenuItem represents an individual action in a Menu.
  */
-const MenuItem = /*#__PURE__*/function () {
-  const MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
-    var className = _a.className,
-      icon = _a.icon,
-      children = _a.children,
-      textValue = _a.textValue,
-      props = __rest(_a, ["className", "icon", "children", "textValue"]);
-    var determinedTextValue = textValue !== null && textValue !== void 0 ? textValue : typeof children === 'string' ? children : undefined;
-    return /*#__PURE__*/React.createElement(MenuItem$1, __assign({
-      ref: ref,
-      className: mergeClassNames(modules_8e83d36b.item, className),
-      textValue: determinedTextValue
-    }, props), typeof children === 'string' && icon ? (/*#__PURE__*/React.createElement("div", {
-      className: modules_8e83d36b.flexWrapper
-    }, /*#__PURE__*/React.createElement("span", {
-      className: modules_8e83d36b.iconWrapper
-    }, icon), children)) : children);
-  });
-  MenuItem.displayName = 'MenuItem';
-  return MenuItem;
-}();
+var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var className = _a.className,
+    icon = _a.icon,
+    children = _a.children,
+    textValue = _a.textValue,
+    props = __rest(_a, ["className", "icon", "children", "textValue"]);
+  var determinedTextValue = textValue !== null && textValue !== void 0 ? textValue : typeof children === 'string' ? children : undefined;
+  return /*#__PURE__*/React__default.createElement(MenuItem$1, __assign({
+    ref: ref,
+    className: mergeClassNames(modules_8e83d36b.item, className),
+    textValue: determinedTextValue
+  }, props), typeof children === 'string' && icon ? (/*#__PURE__*/React__default.createElement("div", {
+    className: modules_8e83d36b.flexWrapper
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: modules_8e83d36b.iconWrapper
+  }, icon), children)) : children);
+});
+MenuItem.displayName = 'MenuItem';
 export { MenuItem };

package/dist/esm/src/Menu/MenuPopover.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef } from 'react';
 import { Popover } from 'react-aria-components';
 import { mergeClassNames } from '../utils/mergeClassNames.mjs';
 import modules_c6d8ab28 from './MenuPopover.module.css.mjs';
@@ -7,16 +7,13 @@ import modules_c6d8ab28 from './MenuPopover.module.css.mjs';
 /**
  * Overlay element for holding a <Menu>
  */
-const MenuPopover = /*#__PURE__*/function () {
-  const MenuPopover = /*#__PURE__*/forwardRef(function (_a, ref) {
-    var className = _a.className,
-      props = __rest(_a, ["className"]);
-    return /*#__PURE__*/React.createElement(Popover, __assign({
-      ref: ref,
-      className: mergeClassNames(modules_c6d8ab28.menuPopover, className)
-    }, props));
-  });
-  MenuPopover.displayName = 'MenuPopover';
-  return MenuPopover;
-}();
+var MenuPopover = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var className = _a.className,
+    props = __rest(_a, ["className"]);
+  return /*#__PURE__*/React__default.createElement(Popover, __assign({
+    ref: ref,
+    className: mergeClassNames(modules_c6d8ab28.menuPopover, className)
+  }, props));
+});
+MenuPopover.displayName = 'MenuPopover';
 export { MenuPopover };

package/dist/esm/src/Menu/MenuSection.mjs

@@ -1,17 +1,14 @@
 import { __assign } from 'tslib';
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef } from 'react';
 import { MenuSection as MenuSection$1 } from 'react-aria-components';
 
 /**
  * A <section> element used to separate <MenuItem>s
  */
-const MenuSection = /*#__PURE__*/function () {
-  const MenuSection = /*#__PURE__*/forwardRef(function (props, ref) {
-    return /*#__PURE__*/React.createElement(MenuSection$1, __assign({
-      ref: ref
-    }, props));
-  });
-  MenuSection.displayName = 'MenuSection';
-  return MenuSection;
-}();
+var MenuSection = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(MenuSection$1, __assign({
+    ref: ref
+  }, props));
+});
+MenuSection.displayName = 'MenuSection';
 export { MenuSection };

package/dist/esm/src/Menu/MenuTrigger.mjs

@@ -1,11 +1,11 @@
 import { __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import { MenuTrigger as MenuTrigger$1 } from 'react-aria-components';
 
 /**
  * A MenuTrigger adds open/close functionality when wrapping a Button and a Popover (with a Menu inside of the MenuPopover)
  */
 var MenuTrigger = function (props) {
-  return /*#__PURE__*/React.createElement(MenuTrigger$1, __assign({}, props));
+  return /*#__PURE__*/React__default.createElement(MenuTrigger$1, __assign({}, props));
 };
 export { MenuTrigger };

package/dist/esm/src/MenuV1/Menu.mjs

@@ -1,53 +1,50 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 import { StatelessMenu } from './subcomponents/StatelessMenu/StatelessMenu.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082059782/Menu Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-menu--docs Storybook}
  */
-const Menu = /*#__PURE__*/function () {
-  const Menu = function (_a) {
-    var button = _a.button,
-      _b = _a.menuVisible,
-      menuVisible = _b === void 0 ? false : _b,
-      rest = __rest(_a, ["button", "menuVisible"]);
-    var _c = useState(menuVisible),
-      isMenuVisible = _c[0],
-      setIsMenuVisible = _c[1];
-    var toggleMenuDropdown = function () {
-      setIsMenuVisible(!isMenuVisible);
-    };
-    var hideMenuDropdown = function () {
-      setIsMenuVisible(false);
-    };
-    return /*#__PURE__*/React.createElement(StatelessMenu, __assign({}, rest, {
-      isMenuVisible: isMenuVisible,
-      toggleMenuDropdown: toggleMenuDropdown,
-      hideMenuDropdown: hideMenuDropdown,
-      // `StatelessMenu` is one of the newer components, so it uses a render function,
-      // as opposed to `React.cloneElement`.
-      // `cloneElement` has its problems, mainly because it's somewhat magical, can lead
-      // to unexpected behaviour, and it doesn't self document. Hence, the switch
-      // to the render function. It would be nice if the `Menu` component also
-      // used this pattern, but it's probably not worth the time and effort.
-      renderButton: function (props) {
-        return /*#__PURE__*/React.cloneElement(button, __assign(__assign({}, props), {
-          onClick: function (e) {
-            var _a, _b;
-            props.onClick(e);
-            (_b = (_a = button.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-          },
-          onMouseDown: function (e) {
-            var _a, _b;
-            props.onMouseDown(e);
-            (_b = (_a = button.props).onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-          }
-        }));
-      }
-    }));
+var Menu = function (_a) {
+  var button = _a.button,
+    _b = _a.menuVisible,
+    menuVisible = _b === void 0 ? false : _b,
+    rest = __rest(_a, ["button", "menuVisible"]);
+  var _c = useState(menuVisible),
+    isMenuVisible = _c[0],
+    setIsMenuVisible = _c[1];
+  var toggleMenuDropdown = function () {
+    setIsMenuVisible(!isMenuVisible);
   };
-  Menu.displayName = 'Menu';
-  return Menu;
-}();
+  var hideMenuDropdown = function () {
+    setIsMenuVisible(false);
+  };
+  return /*#__PURE__*/React__default.createElement(StatelessMenu, __assign({}, rest, {
+    isMenuVisible: isMenuVisible,
+    toggleMenuDropdown: toggleMenuDropdown,
+    hideMenuDropdown: hideMenuDropdown,
+    // `StatelessMenu` is one of the newer components, so it uses a render function,
+    // as opposed to `React.cloneElement`.
+    // `cloneElement` has its problems, mainly because it's somewhat magical, can lead
+    // to unexpected behaviour, and it doesn't self document. Hence, the switch
+    // to the render function. It would be nice if the `Menu` component also
+    // used this pattern, but it's probably not worth the time and effort.
+    renderButton: function (props) {
+      return /*#__PURE__*/React__default.cloneElement(button, __assign(__assign({}, props), {
+        onClick: function (e) {
+          var _a, _b;
+          props.onClick(e);
+          (_b = (_a = button.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        },
+        onMouseDown: function (e) {
+          var _a, _b;
+          props.onMouseDown(e);
+          (_b = (_a = button.props).onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        }
+      }));
+    }
+  }));
+};
+Menu.displayName = 'Menu';
 export { Menu };

package/dist/esm/src/MenuV1/subcomponents/MenuDropdown/MenuDropdown.mjs

@@ -1,92 +1,89 @@
 import { __assign } from 'tslib';
-import React, { useState, useCallback, useEffect } from 'react';
+import React__default, { useState, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
 import { FocusOn } from 'react-focus-on';
 import { usePopper } from 'react-popper';
 import modules_bd945eb7 from './MenuDropdown.module.scss.mjs';
-const MenuDropdown = /*#__PURE__*/function () {
-  const MenuDropdown = function (_a) {
-    var children = _a.children,
-      referenceElement = _a.referenceElement,
-      id = _a.id,
-      hideMenuDropdown = _a.hideMenuDropdown,
-      _b = _a.autoHide,
-      autoHide = _b === void 0 ? 'on' : _b,
-      _c = _a.align,
-      align = _c === void 0 ? 'left' : _c,
-      _d = _a.width,
-      width = _d === void 0 ? 'default' : _d;
-    var _e = useState(null),
-      popperElement = _e[0],
-      setPopperElement = _e[1];
-    var _f = usePopper(referenceElement, popperElement, {
-        modifiers: [{
-          name: 'offset',
-          options: {
-            offset: [0, 6] // value used from the $spacing-xs scss variable,
-          }
-        }, {
-          name: 'preventOverflow',
-          options: {
-            // Gives some room so the menu shadow doesn't get clipped if near the edge of the viewport.
-            padding: 8
-          }
-        }],
-        placement: align === 'left' ? 'bottom-start' : 'bottom-end'
-      }),
-      popperStyles = _f.styles,
-      attributes = _f.attributes;
-    // This callback handler will not run when autoHide === "off"
-    var handleDocumentClickForAutoHide = useCallback(function (e) {
-      if (popperElement && e.target instanceof Node && !popperElement.contains(e.target) && referenceElement !== e.target && !(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.contains(e.target))) {
-        hideMenuDropdown();
-      }
-    }, [popperElement, referenceElement, hideMenuDropdown]);
-    var handleDocumentResize = useCallback(function () {
+var MenuDropdown = function (_a) {
+  var children = _a.children,
+    referenceElement = _a.referenceElement,
+    id = _a.id,
+    hideMenuDropdown = _a.hideMenuDropdown,
+    _b = _a.autoHide,
+    autoHide = _b === void 0 ? 'on' : _b,
+    _c = _a.align,
+    align = _c === void 0 ? 'left' : _c,
+    _d = _a.width,
+    width = _d === void 0 ? 'default' : _d;
+  var _e = useState(null),
+    popperElement = _e[0],
+    setPopperElement = _e[1];
+  var _f = usePopper(referenceElement, popperElement, {
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, 6] // value used from the $spacing-xs scss variable,
+        }
+      }, {
+        name: 'preventOverflow',
+        options: {
+          // Gives some room so the menu shadow doesn't get clipped if near the edge of the viewport.
+          padding: 8
+        }
+      }],
+      placement: align === 'left' ? 'bottom-start' : 'bottom-end'
+    }),
+    popperStyles = _f.styles,
+    attributes = _f.attributes;
+  // This callback handler will not run when autoHide === "off"
+  var handleDocumentClickForAutoHide = useCallback(function (e) {
+    if (popperElement && e.target instanceof Node && !popperElement.contains(e.target) && referenceElement !== e.target && !(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.contains(e.target))) {
       hideMenuDropdown();
-    }, [hideMenuDropdown]);
-    var handleRootClick = function () {
-      if (autoHide === 'on') {
-        // ie. is not equal to "off" | "outside-click-only"
-        hideMenuDropdown();
-      }
+    }
+  }, [popperElement, referenceElement, hideMenuDropdown]);
+  var handleDocumentResize = useCallback(function () {
+    hideMenuDropdown();
+  }, [hideMenuDropdown]);
+  var handleRootClick = function () {
+    if (autoHide === 'on') {
+      // ie. is not equal to "off" | "outside-click-only"
+      hideMenuDropdown();
+    }
+  };
+  useEffect(function () {
+    window.addEventListener('resize', handleDocumentResize, false);
+    return function () {
+      window.removeEventListener('resize', handleDocumentResize, false);
     };
-    useEffect(function () {
-      window.addEventListener('resize', handleDocumentResize, false);
-      return function () {
-        window.removeEventListener('resize', handleDocumentResize, false);
-      };
-    }, [handleDocumentResize]);
-    useEffect(function () {
+  }, [handleDocumentResize]);
+  useEffect(function () {
+    if (autoHide !== 'off') {
+      document.addEventListener('click', handleDocumentClickForAutoHide, true);
+    }
+    return function () {
       if (autoHide !== 'off') {
-        document.addEventListener('click', handleDocumentClickForAutoHide, true);
-      }
-      return function () {
-        if (autoHide !== 'off') {
-          document.removeEventListener('click', handleDocumentClickForAutoHide, true);
-        }
-      };
-    }, [autoHide, handleDocumentClickForAutoHide]);
-    return /*#__PURE__*/React.createElement(FocusOn, {
-      enabled: !!referenceElement,
-      scrollLock: false,
-      noIsolation: true,
-      shards: referenceElement ? [referenceElement] : undefined,
-      onEscapeKey: hideMenuDropdown,
-      returnFocus: function () {
-        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.focus();
-        return false;
+        document.removeEventListener('click', handleDocumentClickForAutoHide, true);
       }
-    }, /*#__PURE__*/React.createElement("div", __assign({
-      id: id,
-      ref: setPopperElement
-    }, attributes.popper, {
-      style: popperStyles.popper,
-      className: classnames(modules_bd945eb7.menuContainer, width == 'default' && modules_bd945eb7.defaultWidth),
-      onClick: handleRootClick
-    }), children));
-  };
-  MenuDropdown.displayName = 'MenuDropdown';
-  return MenuDropdown;
-}();
+    };
+  }, [autoHide, handleDocumentClickForAutoHide]);
+  return /*#__PURE__*/React__default.createElement(FocusOn, {
+    enabled: !!referenceElement,
+    scrollLock: false,
+    noIsolation: true,
+    shards: referenceElement ? [referenceElement] : undefined,
+    onEscapeKey: hideMenuDropdown,
+    returnFocus: function () {
+      referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.focus();
+      return false;
+    }
+  }, /*#__PURE__*/React__default.createElement("div", __assign({
+    id: id,
+    ref: setPopperElement
+  }, attributes.popper, {
+    style: popperStyles.popper,
+    className: classnames(modules_bd945eb7.menuContainer, width == 'default' && modules_bd945eb7.defaultWidth),
+    onClick: handleRootClick
+  }), children));
+};
+MenuDropdown.displayName = 'MenuDropdown';
 export { MenuDropdown };

package/dist/esm/src/MenuV1/subcomponents/MenuItem/MenuItem.mjs

@@ -1,60 +1,57 @@
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 import modules_f3e5eb91 from './MenuItem.module.scss.mjs';
-const MenuItem = /*#__PURE__*/function () {
-  const MenuItem = function (_a) {
-    var label = _a.label,
-      icon = _a.icon,
-      destructive = _a.destructive,
-      disabled = _a.disabled,
-      onClick = _a.onClick,
-      href = _a.href,
-      target = _a.target,
-      isActive = _a.isActive,
-      dataTestId = _a["data-testid"],
-      id = _a.id;
-    var wrappedLabel = /*#__PURE__*/React.createElement("span", {
-      className: modules_f3e5eb91.menuItem__Label
-    }, label);
-    var iconNode = icon && /*#__PURE__*/React.createElement("span", {
-      className: modules_f3e5eb91.menuItem__Icon
-    }, icon);
-    var className = classnames(modules_f3e5eb91.menuItem, destructive && modules_f3e5eb91['menuItem--destructive'], disabled && modules_f3e5eb91['menuItem--disabled'], isActive && modules_f3e5eb91['menuItem--active']);
-    if (disabled) {
-      return /*#__PURE__*/React.createElement("li", {
-        className: modules_f3e5eb91.menuListItem
-      }, /*#__PURE__*/React.createElement("button", {
-        id: id,
-        type: "button",
-        disabled: true,
-        className: className,
-        "data-testid": dataTestId
-      }, iconNode, wrappedLabel));
-    }
-    if (href) {
-      return /*#__PURE__*/React.createElement("li", {
-        className: modules_f3e5eb91.menuListItem
-      }, /*#__PURE__*/React.createElement("a", {
-        id: id,
-        href: href,
-        onClick: onClick,
-        className: className,
-        target: target,
-        "aria-current": isActive ? 'page' : undefined,
-        "data-testid": dataTestId
-      }, iconNode, wrappedLabel));
-    }
-    return /*#__PURE__*/React.createElement("li", {
+var MenuItem = function (_a) {
+  var label = _a.label,
+    icon = _a.icon,
+    destructive = _a.destructive,
+    disabled = _a.disabled,
+    onClick = _a.onClick,
+    href = _a.href,
+    target = _a.target,
+    isActive = _a.isActive,
+    dataTestId = _a["data-testid"],
+    id = _a.id;
+  var wrappedLabel = /*#__PURE__*/React__default.createElement("span", {
+    className: modules_f3e5eb91.menuItem__Label
+  }, label);
+  var iconNode = icon && /*#__PURE__*/React__default.createElement("span", {
+    className: modules_f3e5eb91.menuItem__Icon
+  }, icon);
+  var className = classnames(modules_f3e5eb91.menuItem, destructive && modules_f3e5eb91['menuItem--destructive'], disabled && modules_f3e5eb91['menuItem--disabled'], isActive && modules_f3e5eb91['menuItem--active']);
+  if (disabled) {
+    return /*#__PURE__*/React__default.createElement("li", {
       className: modules_f3e5eb91.menuListItem
-    }, /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/React__default.createElement("button", {
       id: id,
       type: "button",
+      disabled: true,
+      className: className,
+      "data-testid": dataTestId
+    }, iconNode, wrappedLabel));
+  }
+  if (href) {
+    return /*#__PURE__*/React__default.createElement("li", {
+      className: modules_f3e5eb91.menuListItem
+    }, /*#__PURE__*/React__default.createElement("a", {
+      id: id,
+      href: href,
       onClick: onClick,
       className: className,
+      target: target,
+      "aria-current": isActive ? 'page' : undefined,
       "data-testid": dataTestId
     }, iconNode, wrappedLabel));
-  };
-  MenuItem.displayName = 'MenuItem';
-  return MenuItem;
-}();
+  }
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: modules_f3e5eb91.menuListItem
+  }, /*#__PURE__*/React__default.createElement("button", {
+    id: id,
+    type: "button",
+    onClick: onClick,
+    className: className,
+    "data-testid": dataTestId
+  }, iconNode, wrappedLabel));
+};
+MenuItem.displayName = 'MenuItem';
 export { MenuItem };