@kaizen/components 0.0.0-canary-typescript-transform-paths-3.5.2-20241113035843 → 0.0.0-canary-package-bundler-v2-20241113071536

package/dist/types/IconButton-AN3AP9ja.js

@@ -1,855 +0,0 @@
-import { __assign, __rest } from 'tslib';
-import React, { useState, useCallback, useEffect, useRef, useId, cloneElement, forwardRef, useImperativeHandle } from 'react';
-import ReactDOM from 'react-dom';
-import classnames from 'classnames';
-import { FocusOn } from 'react-focus-on';
-import { usePopper } from 'react-popper';
-import { H as Heading, a as BadgeAnimated, B as Badge } from './Heading-Bq3fifM0.js';
-import { useLink, useFocusable } from 'react-aria';
-import { useContextProps, LinkContext } from 'react-aria-components';
-var styles$b = {
-  "menuContainer": "MenuDropdown-module_menuContainer__X4272",
-  "defaultWidth": "MenuDropdown-module_defaultWidth__8jWqB"
-};
-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 () {
-      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);
-      };
-    }, [handleDocumentResize]);
-    useEffect(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;
-      }
-    }, /*#__PURE__*/React.createElement("div", __assign({
-      id: id,
-      ref: setPopperElement
-    }, attributes.popper, {
-      style: popperStyles.popper,
-      className: classnames(styles$b.menuContainer, width == "default" && styles$b.defaultWidth),
-      onClick: handleRootClick
-    }), children));
-  };
-  MenuDropdown.displayName = "MenuDropdown";
-  return MenuDropdown;
-}();
-var styles$a = {
-  "buttonWrapper": "StatelessMenu-module_buttonWrapper__ov51l"
-};
-const StatelessMenu = /*#__PURE__*/function () {
-  const StatelessMenu = function (_a) {
-    var _b = _a.align,
-      align = _b === void 0 ? "left" : _b,
-      _c = _a.dropdownWidth,
-      dropdownWidth = _c === void 0 ? "default" : _c,
-      _d = _a.autoHide,
-      autoHide = _d === void 0 ? "on" : _d,
-      dataTestId = _a["data-testid"],
-      dropdownId = _a.dropdownId,
-      children = _a.children,
-      portalSelector = _a.portalSelector,
-      isMenuVisible = _a.isMenuVisible,
-      toggleMenuDropdown = _a.toggleMenuDropdown,
-      hideMenuDropdown = _a.hideMenuDropdown,
-      renderButton = _a.renderButton,
-      onClick = _a.onClick;
-    var _e = useState(null),
-      referenceElement = _e[0],
-      setReferenceElement = _e[1];
-    var portalSelectorElementRef = useRef(null);
-    var menuButton = renderButton({
-      onClick: function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        toggleMenuDropdown();
-      },
-      onMouseDown: function (e) {
-        return e.preventDefault();
-      },
-      "aria-haspopup": true,
-      "aria-expanded": isMenuVisible
-    });
-    useEffect(function () {
-      portalSelectorElementRef.current = portalSelector ? document.querySelector(portalSelector) : null;
-    }, [portalSelector]);
-    useEffect(function () {
-      if (portalSelector && !portalSelectorElementRef.current) {
-        // eslint-disable-next-line no-console
-        console.warn("The portal could not be created using the selector: " + portalSelector);
-      }
-    }, [portalSelectorElementRef, portalSelector]);
-    var menu = isMenuVisible ? ( /*#__PURE__*/React.createElement(MenuDropdown, {
-      referenceElement: referenceElement,
-      align: align,
-      hideMenuDropdown: hideMenuDropdown,
-      width: dropdownWidth,
-      id: dropdownId,
-      autoHide: autoHide
-    }, children)) : null;
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      React.createElement("div", {
-        "data-testid": dataTestId,
-        onClick: onClick
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles$a.buttonWrapper,
-        ref: setReferenceElement
-      }, menuButton), portalSelector && portalSelectorElementRef.current ? /*#__PURE__*/ReactDOM.createPortal(menu, portalSelectorElementRef.current) : menu)
-    );
-  };
-  StatelessMenu.displayName = "StatelessMenu";
-
-  /**
-   * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082059782/Menu Guidance} |
-   * {@link https://cultureamp.design/?path=/docs/components-menu--docs Storybook}
-   */
-  return StatelessMenu;
-}();
-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);
-          }
-        }));
-      }
-    }));
-  };
-  Menu.displayName = "Menu";
-  return Menu;
-}();
-var styles$9 = {
-  "menuSection": "MenuList-module_menuSection__FBeC8"
-};
-const MenuList = /*#__PURE__*/function () {
-  const MenuList = function (props) {
-    var _a;
-    var heading = props.heading,
-      children = props.children,
-      restProps = __rest(props, ["heading", "children"]);
-    var reactId = useId();
-    var listHeadingID = (_a = heading === null || heading === void 0 ? void 0 : heading.props.id) !== null && _a !== void 0 ? _a : reactId;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, heading && /*#__PURE__*/cloneElement(heading, {
-      id: listHeadingID
-    }), /*#__PURE__*/React.createElement("ul", __assign({
-      className: styles$9.menuSection,
-      "aria-labelledby": heading ? listHeadingID : undefined
-    }, restProps), children));
-  };
-  MenuList.displayName = "MenuList";
-  return MenuList;
-}();
-var styles$8 = {
-  "menuListItem": "MenuItem-module_menuListItem__zWJSG",
-  "menuItem": "MenuItem-module_menuItem__3gZEN",
-  "menuItem--disabled": "MenuItem-module_menuItem--disabled__V3N8q",
-  "menuItem__Icon": "MenuItem-module_menuItem__Icon__ckzae",
-  "menuItem--destructive": "MenuItem-module_menuItem--destructive__z-9Ds",
-  "menuItem--active": "MenuItem-module_menuItem--active__tIKBp",
-  "menuItem__Label": "MenuItem-module_menuItem__Label__r9ZbQ"
-};
-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: styles$8.menuItem__Label
-    }, label);
-    var iconNode = icon && /*#__PURE__*/React.createElement("span", {
-      className: styles$8.menuItem__Icon
-    }, icon);
-    var className = classnames(styles$8.menuItem, destructive && styles$8["menuItem--destructive"], disabled && styles$8["menuItem--disabled"], isActive && styles$8["menuItem--active"]);
-    if (disabled) {
-      return /*#__PURE__*/React.createElement("li", {
-        className: styles$8.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: styles$8.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", {
-      className: styles$8.menuListItem
-    }, /*#__PURE__*/React.createElement("button", {
-      id: id,
-      type: "button",
-      onClick: onClick,
-      className: className,
-      "data-testid": dataTestId
-    }, iconNode, wrappedLabel));
-  };
-  MenuItem.displayName = "MenuItem";
-  return MenuItem;
-}();
-var styles$7 = {
-  "heading": "MenuHeading-module_heading__WISMF"
-};
-const MenuHeading = /*#__PURE__*/function () {
-  const MenuHeading = function (_a) {
-    var id = _a.id,
-      classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["id", "classNameOverride"]);
-    return /*#__PURE__*/React.createElement(Heading, __assign({
-      id: id,
-      variant: "heading-6",
-      tag: "span",
-      classNameOverride: classnames(styles$7.heading, classNameOverride)
-    }, restProps));
-  };
-  MenuHeading.displayName = "MenuHeading";
-  return MenuHeading;
-}();
-var styles$6 = {
-  "loadingGraphic": "LoadingGraphic-module_loadingGraphic__lg-gH",
-  "isAnimated": "LoadingGraphic-module_isAnimated__tyskp",
-  "fade-in-out": "LoadingGraphic-module_fade-in-out__VFBMB",
-  "isReversed": "LoadingGraphic-module_isReversed__HmZ4H"
-};
-var loadingGraphicSizeMap = new Map([["small", 1.25], ["medium", 3], ["large", 4.5], ["xlarge", 6], ["xxlarge", 7.5], ["scene", 18.75]]);
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060062/Loading+Skeleton Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-loading-states-loadinggraphic--docs Storybook}
- */
-const LoadingGraphic = /*#__PURE__*/function () {
-  const LoadingGraphic = function (_a) {
-    var isAnimated = _a.isAnimated,
-      isReversed = _a.isReversed,
-      size = _a.size,
-      classNameOverride = _a.classNameOverride,
-      props = __rest(_a, ["isAnimated", "isReversed", "size", "classNameOverride"]);
-    var sizeValue = "".concat(loadingGraphicSizeMap.get(size), "rem");
-    return /*#__PURE__*/React.createElement("div", __assign({
-      className: classnames(styles$6.loadingGraphic, isAnimated && styles$6.isAnimated, isReversed && styles$6.isReversed, classNameOverride),
-      style: {
-        width: sizeValue,
-        height: sizeValue
-      }
-    }, props));
-  };
-  LoadingGraphic.displayName = "LoadingGraphic";
-  return LoadingGraphic;
-}();
-var styles$5 = {
-  "loadingHeading": "LoadingHeading-module_loadingHeading__tb9a-",
-  "isAnimated": "LoadingHeading-module_isAnimated__cbstI",
-  "fade-in-out": "LoadingHeading-module_fade-in-out__4e-Ds",
-  "display-0": "LoadingHeading-module_display-0__SXmNU",
-  "heading-1": "LoadingHeading-module_heading-1__09eOy",
-  "heading-2": "LoadingHeading-module_heading-2__bxtDS",
-  "heading-3": "LoadingHeading-module_heading-3__h8MXB",
-  "heading-4": "LoadingHeading-module_heading-4__VsC1Y",
-  "heading-5": "LoadingHeading-module_heading-5__5arKU",
-  "heading-6": "LoadingHeading-module_heading-6__sLipd",
-  "isReversed": "LoadingHeading-module_isReversed__vz6G1",
-  "link": "LoadingHeading-module_link__E7uU1"
-};
-
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060062/Loading+Skeleton Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-loading-states-loadingheading--docs Storybook}
- */
-const LoadingHeading = /*#__PURE__*/function () {
-  const LoadingHeading = function (_a) {
-    var isAnimated = _a.isAnimated,
-      isReversed = _a.isReversed,
-      width = _a.width,
-      isLink = _a.isLink,
-      classNameOverride = _a.classNameOverride,
-      variant = _a.variant,
-      props = __rest(_a, ["isAnimated", "isReversed", "width", "isLink", "classNameOverride", "variant"]);
-    return /*#__PURE__*/React.createElement("div", __assign({
-      className: classnames(styles$5.loadingHeading, classNameOverride, styles$5[variant], isAnimated && styles$5.isAnimated, isReversed && styles$5.isReversed, isLink && styles$5.link),
-      style: {
-        width: "".concat(width, "%")
-      }
-    }, props));
-  };
-  LoadingHeading.displayName = "LoadingHeading";
-  return LoadingHeading;
-}();
-var styles$4 = {
-  "loadingInput": "LoadingInput-module_loadingInput__65Cpe",
-  "isAnimated": "LoadingInput-module_isAnimated__hJtl-",
-  "fade-in-out": "LoadingInput-module_fade-in-out__XW4tT",
-  "isReversed": "LoadingInput-module_isReversed__wyVkD"
-};
-
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060062/Loading+Skeleton Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-loading-states-loadinginput--docs Storybook}
- */
-const LoadingInput = /*#__PURE__*/function () {
-  const LoadingInput = function (_a) {
-    var isAnimated = _a.isAnimated,
-      isReversed = _a.isReversed,
-      width = _a.width,
-      classNameOverride = _a.classNameOverride,
-      _b = _a.height,
-      height = _b === void 0 ? 48 : _b,
-      props = __rest(_a, ["isAnimated", "isReversed", "width", "classNameOverride", "height"]);
-    return /*#__PURE__*/React.createElement("div", __assign({
-      className: classnames(styles$4.loadingInput, isAnimated && styles$4.isAnimated, isReversed && styles$4.isReversed, classNameOverride),
-      style: {
-        width: "".concat(width, "%"),
-        height: "".concat(height, "px")
-      }
-    }, props));
-  };
-  LoadingInput.displayName = "LoadingInput";
-  return LoadingInput;
-}();
-var styles$3 = {
-  "loadingParagraph": "LoadingParagraph-module_loadingParagraph__-riGM",
-  "isAnimated": "LoadingParagraph-module_isAnimated__FWmuv",
-  "fade-in-out": "LoadingParagraph-module_fade-in-out__wzszr",
-  "isReversed": "LoadingParagraph-module_isReversed__hD0mn",
-  "isLink": "LoadingParagraph-module_isLink__gVurw",
-  "isCentered": "LoadingParagraph-module_isCentered__Pkyts",
-  "isInline": "LoadingParagraph-module_isInline__-mSTd",
-  "noBottomMargin": "LoadingParagraph-module_noBottomMargin__9Qt0n",
-  "inheritBaseline": "LoadingParagraph-module_inheritBaseline__RU-tb"
-};
-
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060062/Loading+Skeleton Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-loading-states-loadingparagraph--docs Storybook}
- */
-const LoadingParagraph = /*#__PURE__*/function () {
-  const LoadingParagraph = function (_a) {
-    var isAnimated = _a.isAnimated,
-      isCentred = _a.isCentred,
-      isReversed = _a.isReversed,
-      isInline = _a.isInline,
-      noBottomMargin = _a.noBottomMargin,
-      width = _a.width,
-      isLink = _a.isLink,
-      inheritBaseline = _a.inheritBaseline,
-      classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["isAnimated", "isCentred", "isReversed", "isInline", "noBottomMargin", "width", "isLink", "inheritBaseline", "classNameOverride"]);
-    return /*#__PURE__*/React.createElement("div", __assign({
-      className: classnames(styles$3.loadingParagraph, classNameOverride, isAnimated && styles$3.isAnimated, isCentred && styles$3.isCentered, isReversed && styles$3.isReversed, isLink && styles$3.isLink, inheritBaseline && styles$3.inheritBaseline, isInline && styles$3.isInline, noBottomMargin && styles$3.noBottomMargin),
-      style: {
-        width: "".concat(width, "%")
-      }
-    }, restProps));
-  };
-  LoadingParagraph.displayName = "LoadingParagraph";
-  return LoadingParagraph;
-}();
-var styles$2 = {
-  "srOnly": "VisuallyHidden-module_srOnly__tTjOK"
-};
-const VisuallyHidden = /*#__PURE__*/function () {
-  const VisuallyHidden = function (_a) {
-    var children = _a.children,
-      classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["children", "classNameOverride"]);
-    return /*#__PURE__*/React.createElement("span", __assign({
-      className: classnames(styles$2.srOnly, classNameOverride)
-    }, restProps), children);
-  };
-  VisuallyHidden.displayName = "VisuallyHidden";
-  return VisuallyHidden;
-}();
-var styles$1 = {
-  "loadingSpinner": "LoadingSpinner-module_loadingSpinner__Zc2mJ",
-  "xs": "LoadingSpinner-module_xs__y46OT",
-  "sm": "LoadingSpinner-module_sm__nkmIa",
-  "md": "LoadingSpinner-module_md__OWP2-",
-  "spinner": "LoadingSpinner-module_spinner__BKrX0"
-};
-var SmallSpinnerIcon = function () {
-  return /*#__PURE__*/React.createElement("svg", {
-    className: styles$1.spinner,
-    "aria-hidden": "true",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "9",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeOpacity: "0.3"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    fill: "currentColor",
-    d: "M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
-  }));
-};
-var MediumSpinnerIcon = function () {
-  return /*#__PURE__*/React.createElement("svg", {
-    className: styles$1.spinner,
-    "aria-hidden": "true",
-    viewBox: "0 0 48 48",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "24",
-    cy: "24",
-    r: "22.5",
-    stroke: "currentColor",
-    strokeWidth: "3",
-    strokeOpacity: "0.3"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    fill: "currentColor",
-    d: "M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
-  }));
-};
-var ExtraSmallSpinnerIcon = function () {
-  return /*#__PURE__*/React.createElement("svg", {
-    className: styles$1.spinner,
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("circle", {
-    opacity: "0.3",
-    cx: "8",
-    cy: "8",
-    r: "6",
-    stroke: "currentColor",
-    strokeWidth: "2"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M14 8C14 4.68629 11.3137 2 8 2",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};
-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);
-};
-
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093253/Loading+Spinner Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-loading-loadingspinner--docs Storybook}
- */
-const LoadingSpinner = /*#__PURE__*/function () {
-  const LoadingSpinner = function (_a) {
-    var _b = _a.accessibilityLabel,
-      accessibilityLabel = _b === void 0 ? "Loading" : _b,
-      _c = _a.size,
-      size = _c === void 0 ? "md" : _c,
-      classNameOverride = _a.classNameOverride,
-      props = __rest(_a, ["accessibilityLabel", "size", "classNameOverride"]);
-    return /*#__PURE__*/React.createElement("div", __assign({
-      className: classnames(styles$1.loadingSpinner, styles$1[size], classNameOverride),
-      role: "status"
-    }, props), /*#__PURE__*/React.createElement(VisuallyHidden, null, accessibilityLabel), /*#__PURE__*/React.createElement(SpinnerIcon, {
-      size: size
-    }));
-  };
-  LoadingSpinner.displayName = "LoadingSpinner";
-  return LoadingSpinner;
-}();
-var styles = {
-  "button": "GenericButton-module_button__vTuHz",
-  "disabled": "GenericButton-module_disabled__NQENR",
-  "working": "GenericButton-module_working__Ia8R2",
-  "reversed": "GenericButton-module_reversed__m6Nia",
-  "content": "GenericButton-module_content__McBme",
-  "default": "GenericButton-module_default__08ztk",
-  "primary": "GenericButton-module_primary__8wfKy",
-  "destructive": "GenericButton-module_destructive__O-1WX",
-  "secondary": "GenericButton-module_secondary__e3lqK",
-  "small": "GenericButton-module_small__vlMuA",
-  "iconButton": "GenericButton-module_iconButton__jQQ4E",
-  "circleButton": "GenericButton-module_circleButton__Ovqs1",
-  "paginationLink": "GenericButton-module_paginationLink__t54TU",
-  "isPaginationLinkActive": "GenericButton-module_isPaginationLinkActive__FbfXr",
-  "directionalLink": "GenericButton-module_directionalLink__jgRQf",
-  "container": "GenericButton-module_container__sMeVe",
-  "label": "GenericButton-module_label__Z08Ax",
-  "fullWidth": "GenericButton-module_fullWidth__2MPO6",
-  "iconWrapper": "GenericButton-module_iconWrapper__eFGAT",
-  "additionalContentWrapper": "GenericButton-module_additionalContentWrapper__RwK-G",
-  "loadingSpinner": "GenericButton-module_loadingSpinner__lbL3G",
-  "centeredLoadingSpinner": "GenericButton-module_centeredLoadingSpinner__OPppp",
-  "hidden": "GenericButton-module_hidden__MacT-"
-};
-
-// We're treating custom props as anything that is kebab cased.
-// This is so we can support properties like aria-* or data-*
-var getCustomProps = function (props) {
-  var keys = Object.keys(props).filter(function (k) {
-    return k.indexOf("-") !== -1;
-  });
-  return keys.reduce(function (acc, val) {
-    acc[val] = props[val];
-    return acc;
-  }, {});
-};
-const GenericButton = /*#__PURE__*/function () {
-  const GenericButton = /*#__PURE__*/forwardRef(function (_a, ref) {
-    var _b = _a.iconPosition,
-      iconPosition = _b === void 0 ? "start" : _b,
-      _c = _a.iconButton,
-      iconButton = _c === void 0 ? false : _c,
-      _d = _a.primary,
-      primary = _d === void 0 ? false : _d,
-      _e = _a.secondary,
-      secondary = _e === void 0 ? false : _e,
-      _f = _a.newTabAndIUnderstandTheAccessibilityImplications,
-      newTabAndIUnderstandTheAccessibilityImplications = _f === void 0 ? false : _f,
-      _g = _a.disableTabFocusAndIUnderstandTheAccessibilityImplications,
-      disableTabFocusAndIUnderstandTheAccessibilityImplications = _g === void 0 ? false : _g,
-      _h = _a.type,
-      type = _h === void 0 ? "button" : _h,
-      otherProps = __rest(_a, ["iconPosition", "iconButton", "primary", "secondary", "newTabAndIUnderstandTheAccessibilityImplications", "disableTabFocusAndIUnderstandTheAccessibilityImplications", "type"]);
-    var buttonRef = useRef();
-    var wrapperRef = useRef(null);
-    useImperativeHandle(ref, function () {
-      return {
-        focus: function () {
-          var _a;
-          (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-      };
-    });
-    var props = __assign({
-      iconPosition: iconPosition,
-      iconButton: iconButton,
-      primary: primary,
-      secondary: secondary,
-      newTabAndIUnderstandTheAccessibilityImplications: newTabAndIUnderstandTheAccessibilityImplications,
-      disableTabFocusAndIUnderstandTheAccessibilityImplications: disableTabFocusAndIUnderstandTheAccessibilityImplications,
-      type: type
-    }, otherProps);
-    if (props.component) {
-      return renderCustomComponent(props.component, props, wrapperRef);
-    }
-    return /*#__PURE__*/React.createElement("span", {
-      ref: wrapperRef,
-      className: classnames(styles.container, props.fullWidth && styles.fullWidth),
-      "aria-live": "workingLabel" in props ? "polite" : undefined
-    }, props.href && !props.disabled && !props.working ? renderLink(props, buttonRef) : renderButton(props, buttonRef));
-  });
-  GenericButton.displayName = "GenericButton";
-  return GenericButton;
-}();
-var renderCustomComponent = function (CustomComponent, props, ref) {
-  var passedInProps = __assign({
-    id: props.id,
-    className: buttonClass(props),
-    disabled: props.disabled,
-    href: props.href,
-    onClick: props.onClick,
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
-    "aria-label": generateAriaLabel(props)
-  }, getCustomProps(props));
-  var _a = useContextProps(passedInProps, ref,
-    // @ts-expect-error we're using span ref on link context, but that's ok because we need only sizing
-    LinkContext),
-    contextProps = _a[0],
-    contextRef = _a[1];
-  // @ts-expect-error
-  // @todo: Make a wrapper and take it out of Button
-  var linkProps = useLink(contextProps, contextRef).linkProps;
-  // Unset this because the one defined in buttonProps shows
-  // focus-visible styles on click, in future we'll style using [data-focus-visible] which is consistent across browsers
-  delete linkProps.onPointerDown;
-  return /*#__PURE__*/React.createElement("span", {
-    ref: contextRef,
-    className: classnames(styles.container, props.fullWidth && styles.fullWidth),
-    "aria-live": "workingLabel" in props ? "polite" : undefined
-  }, /*#__PURE__*/React.createElement(CustomComponent, __assign({}, contextProps, linkProps, {
-    "aria-describedby": props["aria-describedby"] === null ? undefined : linkProps["aria-describedby"]
-  }), renderContent(props)));
-};
-var renderButton = function (props, ref) {
-  var disableActions = props.disabled || props.working;
-  var passedInProps = __assign({
-    id: props.id,
-    disabled: props.disabled,
-    onClick: !disableActions ? props.onClick : undefined,
-    onMouseDown: !disableActions ? props.onMouseDown : undefined,
-    type: props.type,
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
-    form: props.form,
-    formAction: props.formAction,
-    formMethod: props.formMethod,
-    formEncType: props.formEncType,
-    formTarget: props.formTarget,
-    formNoValidate: props.formNoValidate,
-    className: buttonClass(props),
-    "aria-label": generateAriaLabel(props),
-    "aria-disabled": props.disabled || props.working ? true : undefined,
-    tabIndex: props.disableTabFocusAndIUnderstandTheAccessibilityImplications ? -1 : undefined
-  }, getCustomProps(props));
-  // we're using useFocusable instead of useButton because at this stage we want to hook only to focusable.
-  // Not standardize button behavior as we're currently relying on some weird native behaviours (like onClick firing on enter key press) see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
-  // @ts-ignore
-  var focusableProps = useFocusable(passedInProps, ref).focusableProps;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line react/button-has-type
-    React.createElement("button", __assign({}, passedInProps, focusableProps, {
-      "aria-describedby": props["aria-describedby"] === null ? undefined : props["aria-describedby"] || focusableProps["aria-describedby"],
-      // Unset this because the one defined in buttonProps shows
-      // focus-visible styles on click
-      onPointerDown: undefined,
-      ref: ref
-    }), renderContent(props))
-  );
-};
-var renderLink = function (props, ref) {
-  var target = props.newTabAndIUnderstandTheAccessibilityImplications ? "_blank" : "_self";
-  var passedInProps = __assign({
-    id: props.id,
-    href: props.href,
-    target: target,
-    rel: target === "_blank" ? "noopener noreferrer" : undefined,
-    className: buttonClass(props),
-    onClick: props.onClick,
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
-    "aria-label": generateAriaLabel(props)
-  }, getCustomProps(props));
-  // we're using useFocusable instead of useLink because at this stage we want to hook only to focusable.
-  // Not standardize button behavior as we're currently relying on some weird native behaviours (like onClick firing on enter key press) see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
-  // @ts-ignore
-  var focusableProps = useFocusable(passedInProps, ref).focusableProps;
-  return /*#__PURE__*/React.createElement("a", __assign({}, passedInProps, focusableProps, {
-    "aria-describedby": props["aria-describedby"] === null ? undefined : props["aria-describedby"] || focusableProps["aria-describedby"],
-    // Unset this because the one defined in linkProps shows
-    // focus-visible styles on click
-    onPointerDown: undefined,
-    ref: ref
-  }), renderContent(props));
-};
-var buttonClass = function (props) {
-  var isDefault = !props.primary && !props.destructive && !props.secondary;
-  return classnames(styles.button, isDefault && styles.default,
-  // @ts-ignore
-  (props.disabled || props["aria-disabled"]) && styles.disabled, props.primary && styles.primary, props.destructive && styles.destructive, props.secondary && styles.secondary, props.size && styles[props.size], props.reversed && styles.reversed, props.iconButton && styles.iconButton, props.working && styles.working, (props.directionalLink || props.paginationLink) && styles.circleButton, props.directionalLink && styles.directionalLink, props.paginationLink && styles.paginationLink, props.isActive && styles.isPaginationLinkActive, props.classNameOverride);
-};
-var renderLoadingSpinner = function () {
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.loadingSpinner
-  }, /*#__PURE__*/React.createElement(LoadingSpinner, {
-    accessibilityLabel: "",
-    size: "sm"
-  }));
-};
-var renderWorkingContent = function (props) {
-  if (props.workingLabelHidden) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: styles.hidden,
-      "aria-hidden": "true"
-    }, renderDefaultContent(props)), /*#__PURE__*/React.createElement("span", {
-      className: styles.centeredLoadingSpinner
-    }, renderLoadingSpinner()));
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, props.iconPosition !== "end" && renderLoadingSpinner(), /*#__PURE__*/React.createElement("span", {
-    className: styles.label
-  }, props.workingLabel), props.additionalContent && ( /*#__PURE__*/React.createElement("span", {
-    className: styles.additionalContentWrapper
-  }, props.additionalContent)), props.iconPosition === "end" && renderLoadingSpinner());
-};
-var renderDefaultContent = function (props) {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, props.icon && props.iconPosition !== "end" && renderIcon(props.icon), (!props.icon || !props.iconButton) && ( /*#__PURE__*/React.createElement("span", {
-    className: styles.label
-  }, props.label)), props.additionalContent && ( /*#__PURE__*/React.createElement("span", {
-    className: styles.additionalContentWrapper
-  }, props.additionalContent)), renderBadge(props), props.icon && props.iconPosition === "end" && renderIcon(props.icon));
-};
-var renderBadge = function (props) {
-  if (!props.badge) return null;
-  var _a = props.badge,
-    text = _a.text,
-    animateChange = _a.animateChange,
-    reversed = _a.reversed,
-    variant = _a.variant;
-  if (animateChange) {
-    return /*#__PURE__*/React.createElement(BadgeAnimated, {
-      variant: variant,
-      reversed: reversed
-    }, text);
-  }
-  return /*#__PURE__*/React.createElement(Badge, {
-    variant: variant,
-    reversed: reversed
-  }, text);
-};
-var renderContent = function (props) {
-  return /*#__PURE__*/React.createElement("span", {
-    className: styles.content
-  }, props.working ? renderWorkingContent(props) : renderDefaultContent(props));
-};
-var renderIcon = function (icon) {
-  return /*#__PURE__*/React.createElement("span", {
-    className: styles.iconWrapper
-  }, icon);
-};
-// We only want an aria-label in the case that the button has just an icon and no text
-// This can happen when the button is working and workingLabelHidden is true,
-// or when this is an IconButton
-var generateAriaLabel = function (props) {
-  if (props.working && props.workingLabelHidden) {
-    return props.workingLabel;
-  }
-  if (props.iconButton) {
-    return props.label;
-  }
-  return undefined;
-};
-
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-buttons-button--docs Storybook}
- */
-const Button = /*#__PURE__*/function () {
-  const Button = /*#__PURE__*/forwardRef(function (props, ref) {
-    return /*#__PURE__*/React.createElement(GenericButton, __assign({
-      iconPosition: "start",
-      ref: ref
-    }, props));
-  });
-  Button.displayName = "Button";
-
-  /**
-   * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
-   * {@link https://cultureamp.design/?path=/docs/components-iconbutton--docs Storybook}
-   */
-  return Button;
-}();
-const IconButton = /*#__PURE__*/function () {
-  const IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
-    return /*#__PURE__*/React.createElement(GenericButton, __assign({
-      iconButton: true
-    }, props, {
-      ref: ref
-    }));
-  });
-  IconButton.displayName = "IconButton";
-  return IconButton;
-}();
-export { Button as B, GenericButton as G, IconButton as I, LoadingSpinner as L, Menu as M, StatelessMenu as S, VisuallyHidden as V, MenuList as a, MenuDropdown as b, MenuItem as c, MenuHeading as d, LoadingInput as e, LoadingParagraph as f, LoadingGraphic as g, LoadingHeading as h };