@kaizen/components 0.0.0-canary-inject-global-styles--relative-20240415054424 → 0.0.0-canary-inject-global-styles--relative-20240415055913

package/dist/cjs/Avatar/Avatar.cjs

@@ -0,0 +1,117 @@
+import "../../styles.css"
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var reactTextfit = require('react-textfit');
+require('../Icon/subcomponents/SVG/SVG.cjs');
+var UserIcon = require('../Icon/UserIcon.cjs');
+var Avatar_module = require('./Avatar.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var getInitials = function (fullName, max2Characters) {
+  if (max2Characters === void 0) {
+    max2Characters = false;
+  }
+  return fullName == null ? "" : fullName.split(/\s/).reduce(function (acc, name) {
+    return "".concat(acc).concat(name.slice(0, 1));
+  }, "").toUpperCase().substring(0, max2Characters ? 2 : 8);
+};
+var getMaxFontSizePixels = function (size) {
+  if (size === "small") return 8;
+  if (size === "medium") return 16;
+  if (size === "xlarge" || size === "xxlarge") return 34;
+  return 22;
+};
+var fallbackIcon = function (fullName) {
+  if (fullName) {
+    return React__default.default.createElement(UserIcon.UserIcon, {
+      inheritSize: true,
+      role: "img",
+      "aria-label": fullName
+    });
+  }
+  return React__default.default.createElement(UserIcon.UserIcon, {
+    inheritSize: true,
+    role: "presentation"
+  });
+};
+var renderInitials = function (fullName, size, disableInitials) {
+  if (fullName === void 0) {
+    fullName = "";
+  }
+  if (disableInitials === void 0) {
+    disableInitials = false;
+  }
+  var initials = getInitials(fullName);
+  var isLongName = initials.length > 2 && size !== "small";
+  var renderFallback = disableInitials || initials === "";
+  return renderFallback ? React__default.default.createElement("span", {
+    className: Avatar_module.fallbackIcon
+  }, fallbackIcon(fullName)) : React__default.default.createElement("abbr", {
+    className: classnames__default.default(Avatar_module.initials, isLongName && Avatar_module.longName),
+    title: fullName || ""
+  }, isLongName ?
+  // Only called if 3 or more initials, fits text width for long names
+  React__default.default.createElement(reactTextfit.Textfit, {
+    mode: "single",
+    max: getMaxFontSizePixels(size)
+  }, initials) : getInitials(fullName, size === "small"));
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064857475/Avatar Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-avatar-avatar--docs Storybook}
+ */
+var Avatar = function (_a) {
+  var fullName = _a.fullName,
+    _b = _a.size,
+    size = _b === void 0 ? "medium" : _b,
+    avatarSrc = _a.avatarSrc,
+    _c = _a.disableInitials,
+    disableInitials = _c === void 0 ? false : _c,
+    _d = _a.isCompany,
+    isCompany = _d === void 0 ? false : _d,
+    _e = _a.isCurrentUser,
+    isCurrentUser = _e === void 0 ? true : _e,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["fullName", "size", "avatarSrc", "disableInitials", "isCompany", "isCurrentUser", "classNameOverride"]);
+  var _f = React.useState(avatarSrc ? "loading" : "none"),
+    avatarState = _f[0],
+    setAvatarState = _f[1];
+  var image = React.useRef(null);
+  var renderInitialAvatar = !isCompany && (avatarState === "none" || avatarState === "error");
+  React.useEffect(function () {
+    setAvatarState(avatarSrc ? "loading" : "none");
+  }, [avatarSrc]);
+  var onImageFailure = function () {
+    return setAvatarState("error");
+  };
+  var onImageSuccess = function () {
+    return setAvatarState("success");
+  };
+  // if the image is cached onLoad may not trigger: https://stackoverflow.com/a/59809184
+  React.useEffect(function () {
+    var _a;
+    if ((_a = image === null || image === void 0 ? void 0 : image.current) === null || _a === void 0 ? void 0 : _a.complete) onImageSuccess();
+  }, [image]);
+  var isNoneOrError = avatarState === "none" || avatarState === "error";
+  var isPersonal = isNoneOrError && isCurrentUser;
+  var isOtherUser = isNoneOrError && !isCurrentUser;
+  return React__default.default.createElement("span", tslib.__assign({
+    className: classnames__default.default(Avatar_module.wrapper, Avatar_module[size], classNameOverride, isCompany && Avatar_module.company, isPersonal && Avatar_module.personal, isOtherUser && Avatar_module.otherUser, (avatarState === "loading" || avatarState === "error") && Avatar_module.loading)
+  }, restProps), avatarState !== "none" && React__default.default.createElement("img", {
+    ref: image,
+    className: classnames__default.default(Avatar_module.avatarImage, isCompany && Avatar_module.companyAvatarImage),
+    src: avatarSrc,
+    onError: onImageFailure,
+    onLoad: onImageSuccess,
+    alt: fullName || ""
+  }), renderInitialAvatar && renderInitials(fullName, size, disableInitials));
+};
+exports.Avatar = Avatar;

package/dist/cjs/AvatarGroup/AvatarGroup.cjs

@@ -0,0 +1,53 @@
+import "../../styles.css"
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Avatar = require('../Avatar/Avatar.cjs');
+var AvatarGroup_module = require('./AvatarGroup.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var renderCounter = function (remainingAvatars) {
+  if (remainingAvatars <= 0) return;
+  return React__default.default.createElement("li", {
+    "aria-label": "There ".concat(remainingAvatars > 1 ? "are ".concat(remainingAvatars, " other members") : "is ".concat(remainingAvatars, " other member"), " of this group"),
+    className: AvatarGroup_module.AvatarGroupItem
+  }, React__default.default.createElement("span", {
+    className: AvatarGroup_module.AvatarCounter,
+    "aria-hidden": true
+  }, "+".concat(remainingAvatars)));
+};
+var renderAvatars = function (avatars, maxVisible, size) {
+  return React__default.default.createElement(React__default.default.Fragment, null, avatars === null || avatars === void 0 ? void 0 : avatars.map(function (avatarProps, index) {
+    return index < maxVisible && React__default.default.createElement("li", {
+      key: "avatar-".concat(index),
+      className: AvatarGroup_module.AvatarGroupItem
+    }, React__default.default.createElement(Avatar.Avatar, tslib.__assign({}, avatarProps, {
+      size: size
+    })));
+  }), renderCounter((avatars === null || avatars === void 0 ? void 0 : avatars.length) - maxVisible));
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3065021264/Avatar+Group Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-avatar-avatar-group--docs Storybook}
+ */
+var AvatarGroup = function (_a) {
+  var _b = _a.size,
+    size = _b === void 0 ? "medium" : _b,
+    _c = _a.maxVisible,
+    maxVisible = _c === void 0 ? 2 : _c,
+    avatars = _a.avatars,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["size", "maxVisible", "avatars", "classNameOverride"]);
+  return React__default.default.createElement("ul", tslib.__assign({
+    className: classnames__default.default(AvatarGroup_module.AvatarGroup, AvatarGroup_module[size], classNameOverride),
+    "aria-label": "Avatar Group"
+  }, restProps), renderAvatars(avatars, maxVisible, size));
+};
+exports.AvatarGroup = AvatarGroup;

package/dist/cjs/Badge/Badge.cjs

@@ -0,0 +1,50 @@
+import "../../styles.css"
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Badge_module = require('./Badge.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064857333/Badge Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-badge--docs Storybook}
+ */
+var Badge = function (_a) {
+  var children = _a.children,
+    _b = _a.variant,
+    variant = _b === void 0 ? "default" : _b,
+    _c = _a.reversed,
+    reversed = _c === void 0 ? false : _c,
+    _d = _a.size,
+    size = _d === void 0 ? "small" : _d,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["children", "variant", "reversed", "size", "classNameOverride"]);
+  return React__default.default.createElement("span", tslib.__assign({
+    className: classnames__default.default(Badge_module.badge, Badge_module[variant], classNameOverride, reversed && Badge_module.reversed, size === "large" && Badge_module.large)
+  }, restProps), variant !== "dot" && children);
+};
+var BadgeAnimated = function (props) {
+  var _a = React.useState(false),
+    isFocused = _a[0],
+    setIsFocused = _a[1];
+  React.useLayoutEffect(function () {
+    setIsFocused(true);
+    setTimeout(function () {
+      setIsFocused(false);
+    }, 150);
+  }, [props.children]);
+  return React__default.default.createElement("span", {
+    className: classnames__default.default(Badge_module.animation, isFocused && Badge_module.animationOn)
+  }, React__default.default.createElement(Badge, tslib.__assign({}, props)));
+};
+Badge.displayName = "Badge";
+exports.Badge = Badge;
+exports.BadgeAnimated = BadgeAnimated;

package/dist/cjs/Brand/Brand.cjs

@@ -0,0 +1,37 @@
+import "../../styles.css"
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var hostedAssets = require('@kaizen/hosted-assets');
+var Brand_module = require('./Brand.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Brand = function (_a) {
+  var variant = _a.variant,
+    alt = _a.alt,
+    _b = _a.reversed,
+    reversed = _b === void 0 ? false : _b,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["variant", "alt", "reversed", "classNameOverride"]);
+  var brandTheme = reversed ? "-reversed" : "-default";
+  return React__default.default.createElement("picture", tslib.__assign({
+    className: classNameOverride
+  }, restProps), React__default.default.createElement("source", {
+    srcSet: hostedAssets.assetUrl("brand/".concat(variant, "-reversed.svg")),
+    media: "(forced-colors: active) and (prefers-color-scheme: dark)"
+  }), React__default.default.createElement("source", {
+    srcSet: hostedAssets.assetUrl("brand/".concat(variant, "-default.svg")),
+    media: "(forced-colors: active) and (prefers-color-scheme: light)"
+  }), React__default.default.createElement("img", {
+    src: hostedAssets.assetUrl("brand/".concat(variant).concat(brandTheme, ".svg")),
+    alt: alt,
+    className: Brand_module.img
+  }));
+};
+Brand.displayName = "Brand";
+exports.Brand = Brand;

package/dist/cjs/BrandMoment/BrandMoment.cjs

@@ -0,0 +1,102 @@
+import "../../styles.css"
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var hostedAssets = require('@kaizen/hosted-assets');
+var Button = require('../Button/Button/Button.cjs');
+require('../Button/IconButton/IconButton.cjs');
+var Heading = require('../Heading/Heading.cjs');
+var Text = require('../Text/Text.cjs');
+var useMediaQueries = require('../utils/useMediaQueries.cjs');
+var BrandMoment_module = require('./BrandMoment.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061589/Brand+Moment Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-brand-moment--docs Storybook}
+ */
+var BrandMoment = function (_a) {
+  var mood = _a.mood,
+    illustration = _a.illustration,
+    header = _a.header,
+    body = _a.body,
+    primaryAction = _a.primaryAction,
+    secondaryAction = _a.secondaryAction,
+    text = _a.text,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["mood", "illustration", "header", "body", "primaryAction", "secondaryAction", "text", "classNameOverride"]);
+  var queries = useMediaQueries.useMediaQueries().queries;
+  return React__default.default.createElement("div", tslib.__assign({
+    className: classnames__default.default(BrandMoment_module.body, BrandMoment_module[mood], classNameOverride)
+  }, restProps), React__default.default.createElement("header", {
+    className: BrandMoment_module.header
+  }, header), React__default.default.createElement("main", {
+    className: BrandMoment_module.main
+  }, React__default.default.createElement("div", {
+    className: BrandMoment_module.container
+  }, React__default.default.createElement("div", {
+    className: BrandMoment_module.mainInner
+  }, React__default.default.createElement("div", {
+    className: BrandMoment_module.left
+  }, React__default.default.createElement("div", {
+    className: BrandMoment_module.leftInner
+  }, illustration)), React__default.default.createElement("div", {
+    className: BrandMoment_module.right
+  }, React__default.default.createElement("div", {
+    className: BrandMoment_module.rightInner
+  }, text.subtitle && React__default.default.createElement(Heading.Heading, {
+    variant: "heading-3",
+    tag: "h1",
+    classNameOverride: BrandMoment_module.subtitle
+  }, text.subtitle), React__default.default.createElement(Heading.Heading, {
+    variant: "display-0",
+    tag: text.subtitle ? "h2" : "h1",
+    classNameOverride: BrandMoment_module.title
+  }, text.title), text.body && React__default.default.createElement(Text.Text, {
+    variant: "intro-lede",
+    classNameOverride: BrandMoment_module.textBody
+  }, text.body), body && React__default.default.createElement("div", {
+    className: BrandMoment_module.textBody
+  }, body), React__default.default.createElement("div", {
+    className: BrandMoment_module.actions
+  }, primaryAction && React__default.default.createElement(Button.Button, tslib.__assign({
+    primary: true,
+    fullWidth: queries.isSmall
+  }, primaryAction)), secondaryAction && React__default.default.createElement("div", {
+    className: BrandMoment_module.secondaryAction
+  }, React__default.default.createElement(Button.Button, tslib.__assign({
+    secondary: true,
+    fullWidth: queries.isSmall
+  }, secondaryAction))))))))), text.footer && React__default.default.createElement("footer", {
+    className: BrandMoment_module.footer
+  }, React__default.default.createElement("div", {
+    className: BrandMoment_module.container
+  }, React__default.default.createElement("div", {
+    className: BrandMoment_module.footerInner
+  }, React__default.default.createElement("div", {
+    className: BrandMoment_module.poweredByContainer
+  }, React__default.default.createElement(Text.Text, {
+    variant: "extra-small",
+    color: "dark-reduced-opacity"
+  }, "Powered by"), React__default.default.createElement("a", {
+    href: "https://www.cultureamp.com",
+    className: BrandMoment_module.poweredByLogo
+  }, React__default.default.createElement("img", {
+    src: hostedAssets.assetUrl("brand/logo-horizontal-default.svg"),
+    alt: "Culture Amp"
+  }))), React__default.default.createElement("div", {
+    className: BrandMoment_module.footerTextContainer
+  }, React__default.default.createElement(Text.Text, {
+    variant: "extra-small"
+  }, text.footer))))));
+};
+BrandMoment.displayName = "BrandMoment";
+exports.BrandMoment = BrandMoment;

package/dist/cjs/Button/Button/Button.cjs

@@ -0,0 +1,34 @@
+import "../../../styles.css"
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var GenericButton = require('../GenericButton/GenericButton.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-buttons-button--docs Storybook}
+ */
+var Button = React.forwardRef(function (props, ref) {
+  return React__default.default.createElement(GenericButton.GenericButton, tslib.__assign({}, props, {
+    ref: ref
+  }));
+});
+Button.defaultProps = {
+  fullWidth: false,
+  primary: false,
+  secondary: false,
+  destructive: false,
+  disabled: false,
+  reversed: false,
+  iconPosition: "start",
+  newTabAndIUnderstandTheAccessibilityImplications: false
+};
+Button.displayName = "Button";
+exports.Button = Button;

package/dist/cjs/Button/GenericButton/GenericButton.cjs

@@ -0,0 +1,225 @@
+import "../../../styles.css"
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Badge = require('../../Badge/Badge.cjs');
+require('../../Loading/LoadingGraphic/LoadingGraphic.cjs');
+require('../../Loading/LoadingHeading/LoadingHeading.cjs');
+require('../../Loading/LoadingInput/LoadingInput.cjs');
+require('../../Loading/LoadingParagraph/LoadingParagraph.cjs');
+var LoadingSpinner = require('../../Loading/LoadingSpinner/LoadingSpinner.cjs');
+var GenericButton_module = require('./GenericButton.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+// 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;
+  }, {});
+};
+var GenericButton = React.forwardRef(function (props, ref) {
+  var buttonRef = React.useRef();
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function () {
+        var _a;
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }
+    };
+  });
+  var determineButtonRenderer = function () {
+    if (props.component) {
+      return renderCustomComponent(props.component, props);
+    }
+    if (props.href && !props.disabled && !props.working) {
+      return renderLink(props, buttonRef);
+    }
+    return renderButton(props, buttonRef);
+  };
+  return React__default.default.createElement("span", {
+    className: classnames__default.default(GenericButton_module.container, props.fullWidth && GenericButton_module.fullWidth),
+    "aria-live": "workingLabel" in props ? "polite" : undefined
+  }, determineButtonRenderer());
+});
+GenericButton.defaultProps = {
+  iconPosition: "start",
+  iconButton: false,
+  primary: false,
+  secondary: false,
+  newTabAndIUnderstandTheAccessibilityImplications: false,
+  disableTabFocusAndIUnderstandTheAccessibilityImplications: false,
+  type: "button"
+};
+GenericButton.displayName = "GenericButton";
+var renderCustomComponent = function (CustomComponent, props) {
+  var id = props.id,
+    disabled = props.disabled,
+    href = props.href,
+    onClick = props.onClick,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    rest = tslib.__rest(props, ["id", "disabled", "href", "onClick", "onFocus", "onBlur"]);
+  var customProps = getCustomProps(rest);
+  return React__default.default.createElement(CustomComponent, tslib.__assign({
+    id: id,
+    className: buttonClass(props),
+    disabled: disabled,
+    href: href,
+    onClick: onClick,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    "aria-label": generateAriaLabel(props)
+  }, customProps), renderContent(props));
+};
+var renderButton = function (props, ref) {
+  var id = props.id,
+    disabled = props.disabled,
+    onClick = props.onClick,
+    onMouseDown = props.onMouseDown,
+    type = props.type,
+    disableTabFocusAndIUnderstandTheAccessibilityImplications = props.disableTabFocusAndIUnderstandTheAccessibilityImplications,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    form = props.form,
+    formAction = props.formAction,
+    formMethod = props.formMethod,
+    formEncType = props.formEncType,
+    formTarget = props.formTarget,
+    formNoValidate = props.formNoValidate,
+    rest = tslib.__rest(props, ["id", "disabled", "onClick", "onMouseDown", "type", "disableTabFocusAndIUnderstandTheAccessibilityImplications", "onFocus", "onBlur", "form", "formAction", "formMethod", "formEncType", "formTarget", "formNoValidate"]);
+  var customProps = getCustomProps(rest);
+  return React__default.default.createElement("button", tslib.__assign({
+    // eslint-disable-next-line react/button-has-type
+    type: type,
+    id: id,
+    disabled: disabled,
+    className: buttonClass(props),
+    onClick: onClick,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onMouseDown: function (e) {
+      return onMouseDown && onMouseDown(e);
+    },
+    "aria-label": generateAriaLabel(props),
+    "aria-disabled": disabled || props.working ? true : undefined,
+    form: form,
+    formAction: formAction,
+    formMethod: formMethod,
+    formEncType: formEncType,
+    formTarget: formTarget,
+    formNoValidate: formNoValidate,
+    tabIndex: disableTabFocusAndIUnderstandTheAccessibilityImplications ? -1 : undefined,
+    ref: ref
+  }, customProps), renderContent(props));
+};
+var renderLink = function (props, ref) {
+  var id = props.id,
+    href = props.href,
+    onClick = props.onClick,
+    newTabAndIUnderstandTheAccessibilityImplications = props.newTabAndIUnderstandTheAccessibilityImplications,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    rest = tslib.__rest(props, ["id", "href", "onClick", "newTabAndIUnderstandTheAccessibilityImplications", "onFocus", "onBlur"]);
+  var customProps = getCustomProps(rest);
+  var target = newTabAndIUnderstandTheAccessibilityImplications ? "_blank" : "_self";
+  return React__default.default.createElement("a", tslib.__assign({
+    id: id,
+    href: href,
+    target: target,
+    rel: target === "_blank" ? "noopener noreferrer" : undefined,
+    className: buttonClass(props),
+    onClick: onClick,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    ref: ref,
+    "aria-label": generateAriaLabel(props)
+  }, customProps), renderContent(props));
+};
+var buttonClass = function (props) {
+  var isDefault = !props.primary && !props.destructive && !props.secondary;
+  return classnames__default.default(GenericButton_module.button, isDefault && GenericButton_module.default, props.primary && GenericButton_module.primary, props.destructive && GenericButton_module.destructive, props.secondary && GenericButton_module.secondary, props.size && GenericButton_module[props.size], props.reversed && GenericButton_module.reversed, props.iconButton && GenericButton_module.iconButton, props.working && GenericButton_module.working, (props.directionalLink || props.paginationLink) && GenericButton_module.circleButton, props.directionalLink && GenericButton_module.directionalLink, props.paginationLink && GenericButton_module.paginationLink, props.isActive && GenericButton_module.isPaginationLinkActive, props.classNameOverride);
+};
+var renderLoadingSpinner = function () {
+  return React__default.default.createElement("div", {
+    className: GenericButton_module.loadingSpinner
+  }, React__default.default.createElement(LoadingSpinner.LoadingSpinner, {
+    accessibilityLabel: "",
+    size: "sm"
+  }));
+};
+var renderWorkingContent = function (props) {
+  if (props.workingLabelHidden) {
+    return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("span", {
+      className: GenericButton_module.hidden,
+      "aria-hidden": "true"
+    }, renderDefaultContent(props)), React__default.default.createElement("span", {
+      className: GenericButton_module.centeredLoadingSpinner
+    }, renderLoadingSpinner()));
+  }
+  return React__default.default.createElement(React__default.default.Fragment, null, props.iconPosition !== "end" && renderLoadingSpinner(), React__default.default.createElement("span", {
+    className: GenericButton_module.label
+  }, props.workingLabel), props.additionalContent && React__default.default.createElement("span", {
+    className: GenericButton_module.additionalContentWrapper
+  }, props.additionalContent), props.iconPosition === "end" && renderLoadingSpinner());
+};
+var renderDefaultContent = function (props) {
+  return React__default.default.createElement(React__default.default.Fragment, null, props.icon && props.iconPosition !== "end" && renderIcon(props.icon), (!props.icon || !props.iconButton) && React__default.default.createElement("span", {
+    className: GenericButton_module.label
+  }, props.label), props.additionalContent && React__default.default.createElement("span", {
+    className: GenericButton_module.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 React__default.default.createElement(Badge.BadgeAnimated, {
+      variant: variant,
+      reversed: reversed
+    }, text);
+  }
+  return React__default.default.createElement(Badge.Badge, {
+    variant: variant,
+    reversed: reversed
+  }, text);
+};
+var renderContent = function (props) {
+  return React__default.default.createElement("span", {
+    className: GenericButton_module.content
+  }, props.working ? renderWorkingContent(props) : renderDefaultContent(props));
+};
+var renderIcon = function (icon) {
+  return React__default.default.createElement("span", {
+    className: GenericButton_module.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;
+};
+exports.GenericButton = GenericButton;

package/dist/cjs/Button/IconButton/IconButton.cjs

@@ -0,0 +1,31 @@
+import "../../../styles.css"
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var GenericButton = require('../GenericButton/GenericButton.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-iconbutton--docs Storybook}
+ */
+var IconButton = function (props) {
+  return React__default.default.createElement(GenericButton.GenericButton, tslib.__assign({
+    iconButton: true
+  }, props));
+};
+IconButton.defaultProps = {
+  primary: false,
+  destructive: false,
+  disabled: false,
+  reversed: false,
+  secondary: false
+};
+IconButton.displayName = "IconButton";
+exports.IconButton = IconButton;