@kaizen/components 1.67.22 → 1.68.0

package/dist/cjs/__actions__/Button/v3/Button.cjs

@@ -4,7 +4,9 @@ var tslib = require('tslib');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var mergeClassNames = require('../../../utils/mergeClassNames.cjs');
-var Button_module = require('./Button.module.scss.cjs');
+var PendingContent = require('./subcomponents/PendingContent/PendingContent.cjs');
+var ButtonContent = require('./subcomponents/ButtonContent/ButtonContent.cjs');
+var Button_module = require('./Button.module.css.cjs');
 var ReversedColors = require('../../../__utilities__/ReversedColors/v3/ReversedColors.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -12,17 +14,50 @@ function _interopDefault(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
-var Button = function (_a) {
+var Button = React.forwardRef(function (_a, ref) {
   var _b = _a.variant,
-    variant = _b === void 0 ? "default" : _b,
-    className = _a.className,
+    variant = _b === void 0 ? "primary" : _b,
     _c = _a.size,
     size = _c === void 0 ? "medium" : _c,
+    className = _a.className,
     children = _a.children,
-    otherProps = tslib.__rest(_a, ["variant", "className", "size", "children"]);
+    isDisabled = _a.isDisabled,
+    _d = _a.isFullWidth,
+    isFullWidth = _d === void 0 ? false : _d,
+    icon = _a.icon,
+    iconPosition = _a.iconPosition,
+    _e = _a.hasHiddenLabel,
+    hasHiddenLabel = _e === void 0 ? false : _e,
+    isPending = _a.isPending,
+    _f = _a.hasHiddenPendingLabel,
+    propsHasHiddenPendingLabel = _f === void 0 ? false : _f,
+    pendingLabel = _a.pendingLabel,
+    restProps = tslib.__rest(_a, ["variant", "size", "className", "children", "isDisabled", "isFullWidth", "icon", "iconPosition", "hasHiddenLabel", "isPending", "hasHiddenPendingLabel", "pendingLabel"]);
   var isReversed = ReversedColors.useReversedColors();
+  var pendingProps = isPending ? {
+    isPending: isPending,
+    hasHiddenPendingLabel: hasHiddenLabel || propsHasHiddenPendingLabel,
+    pendingLabel: pendingLabel
+  } : {};
+  var buttonContentClass = isPending ? !hasHiddenLabel && propsHasHiddenPendingLabel ? Button_module.retainContentWidth : Button_module.hideContentWidth : undefined;
   return React__default.default.createElement(reactAriaComponents.Button, tslib.__assign({
-    className: mergeClassNames.mergeClassNames(Button_module.button, Button_module[variant], Button_module[size], isReversed && Button_module.reversed, className)
-  }, otherProps), children);
-};
+    ref: ref,
+    className: mergeClassNames.mergeClassNames(Button_module.button, Button_module[size], hasHiddenLabel && Button_module["".concat(size, "IconButton")], isDisabled && Button_module.isDisabled, isReversed ? Button_module["".concat(variant, "Reversed")] : Button_module[variant], isFullWidth && Button_module.fullWidth, className),
+    isDisabled: isDisabled,
+    isPending: isPending
+  }, restProps), function (racStateProps) {
+    var childIsFunction = typeof children === "function";
+    return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(ButtonContent.ButtonContent, {
+      size: size,
+      icon: icon,
+      iconPosition: iconPosition,
+      hasHiddenLabel: hasHiddenLabel,
+      className: buttonContentClass
+    }, childIsFunction ? children(racStateProps) : children), React__default.default.createElement("span", {
+      "aria-live": "polite"
+    }, pendingProps.isPending && React__default.default.createElement(PendingContent.PendingContent, tslib.__assign({}, pendingProps, {
+      size: size
+    }))));
+  });
+});
 exports.Button = Button;

package/dist/cjs/__actions__/Button/v3/Button.module.css.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var styles = {
+  "button": "Button-module_button__vlUCI",
+  "fullWidth": "Button-module_fullWidth__qIkG6",
+  "small": "Button-module_small__FYPwk",
+  "medium": "Button-module_medium__4LOhQ",
+  "large": "Button-module_large__MjtVH",
+  "smallIconButton": "Button-module_smallIconButton__4gN-i",
+  "mediumIconButton": "Button-module_mediumIconButton__CEXv-",
+  "largeIconButton": "Button-module_largeIconButton__Apt33",
+  "secondary": "Button-module_secondary__Mmev0",
+  "tertiary": "Button-module_tertiary__MJjKC",
+  "primaryReversed": "Button-module_primaryReversed__m4kze",
+  "secondaryReversed": "Button-module_secondaryReversed__Q435c",
+  "tertiaryReversed": "Button-module_tertiaryReversed__Q-UqR",
+  "isDisabled": "Button-module_isDisabled__m1eE-",
+  "hideContentWidth": "Button-module_hideContentWidth__-E94d",
+  "retainContentWidth": "Button-module_retainContentWidth__b4IEC"
+};
+module.exports = styles;

package/dist/cjs/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var VisuallyHidden = require('../../../../../VisuallyHidden/VisuallyHidden.cjs');
+var ButtonContent_module = require('./ButtonContent.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/** Renders the inner content of the button, handling icon and label visibility */
+var ButtonContent = function (_a) {
+  var children = _a.children,
+    hasHiddenLabel = _a.hasHiddenLabel,
+    _b = _a.size,
+    size = _b === void 0 ? "medium" : _b,
+    icon = _a.icon,
+    _c = _a.iconPosition,
+    iconPosition = _c === void 0 ? "start" : _c,
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "hasHiddenLabel", "size", "icon", "iconPosition", "className"]);
+  return React__default.default.createElement("span", tslib.__assign({
+    className: classnames__default.default(className, ButtonContent_module.buttonContent, ButtonContent_module[size])
+  }, restProps), icon && iconPosition === "start" && React__default.default.createElement("span", {
+    className: ButtonContent_module.buttonIcon
+  }, icon), hasHiddenLabel ? React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, children) : React__default.default.createElement("span", {
+    className: ButtonContent_module.buttonLabel
+  }, children), icon && iconPosition === "end" && React__default.default.createElement("span", {
+    className: ButtonContent_module.buttonIcon
+  }, icon));
+};
+exports.ButtonContent = ButtonContent;

package/dist/cjs/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.module.css.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var styles = {
+  "buttonContent": "ButtonContent-module_buttonContent__v5mHZ",
+  "large": "ButtonContent-module_large__mLOdb",
+  "buttonLabel": "ButtonContent-module_buttonLabel__T5XAq",
+  "buttonIcon": "ButtonContent-module_buttonIcon__qkAX-"
+};
+module.exports = styles;

package/dist/cjs/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+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 VisuallyHidden = require('../../../../../VisuallyHidden/VisuallyHidden.cjs');
+var PendingContent_module = require('./PendingContent.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/** Renders the pending content of the button, handling pending label visibility and spinner positioning */
+var PendingContent = function (_a) {
+  var pendingLabel = _a.pendingLabel,
+    _b = _a.hasHiddenPendingLabel,
+    hasHiddenPendingLabel = _b === void 0 ? false : _b,
+    _c = _a.size,
+    size = _c === void 0 ? "medium" : _c;
+  return React__default.default.createElement("span", {
+    className: classnames__default.default(PendingContent_module.pendingContent, PendingContent_module[size])
+  }, hasHiddenPendingLabel ? React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, pendingLabel) : React__default.default.createElement("span", null, pendingLabel), React__default.default.createElement(LoadingSpinner.LoadingSpinner, {
+    size: size === "small" ? "xs" : "sm",
+    accessibilityLabel: "",
+    classNameOverride: hasHiddenPendingLabel ? PendingContent_module.centerSpinner : undefined
+  }));
+};
+exports.PendingContent = PendingContent;

package/dist/cjs/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.module.css.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var styles = {
+  "pendingContent": "PendingContent-module_pendingContent__c4IFS",
+  "large": "PendingContent-module_large__ypTxk",
+  "centerSpinner": "PendingContent-module_centerSpinner__EYn7L"
+};
+module.exports = styles;

package/dist/cjs/__overlays__/Tooltip/v3/Tooltip.cjs

@@ -2,8 +2,8 @@
 
 var tslib = require('tslib');
 var React = require('react');
-var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
+var VisuallyHidden = require('../../../VisuallyHidden/VisuallyHidden.cjs');
 var mergeClassNames = require('../../../utils/mergeClassNames.cjs');
 var OverlayArrow = require('./OverlayArrow.cjs');
 var Tooltip_module = require('./Tooltip.module.scss.cjs');
@@ -42,7 +42,7 @@ var Tooltip = React.forwardRef(function (_a, ref) {
     className: mergeClassNames.mergeClassNames(Tooltip_module.tooltip, className, reverseColors && Tooltip_module.reversed)
   }), function (renderProps) {
     return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(OverlayArrow.OverlayArrow, null), typeof children === "function" ? children(renderProps) : children);
-  }), shouldInlineHiddenContent ? React__default.default.createElement(reactAria.VisuallyHidden, null, typeof children === "function" ? children({
+  }), shouldInlineHiddenContent ? React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, typeof children === "function" ? children({
     placement: "center",
     isEntering: false,
     isExiting: false,

package/dist/esm/__actions__/Button/v3/Button.mjs

@@ -1,20 +1,55 @@
 import { __rest, __assign } from 'tslib';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Button as Button$1 } from 'react-aria-components';
 import { mergeClassNames } from '../../../utils/mergeClassNames.mjs';
-import styles from './Button.module.scss.mjs';
+import { PendingContent } from './subcomponents/PendingContent/PendingContent.mjs';
+import { ButtonContent } from './subcomponents/ButtonContent/ButtonContent.mjs';
+import styles from './Button.module.css.mjs';
 import { useReversedColors } from '../../../__utilities__/ReversedColors/v3/ReversedColors.mjs';
-var Button = function (_a) {
+var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.variant,
-    variant = _b === void 0 ? "default" : _b,
-    className = _a.className,
+    variant = _b === void 0 ? "primary" : _b,
     _c = _a.size,
     size = _c === void 0 ? "medium" : _c,
+    className = _a.className,
     children = _a.children,
-    otherProps = __rest(_a, ["variant", "className", "size", "children"]);
+    isDisabled = _a.isDisabled,
+    _d = _a.isFullWidth,
+    isFullWidth = _d === void 0 ? false : _d,
+    icon = _a.icon,
+    iconPosition = _a.iconPosition,
+    _e = _a.hasHiddenLabel,
+    hasHiddenLabel = _e === void 0 ? false : _e,
+    isPending = _a.isPending,
+    _f = _a.hasHiddenPendingLabel,
+    propsHasHiddenPendingLabel = _f === void 0 ? false : _f,
+    pendingLabel = _a.pendingLabel,
+    restProps = __rest(_a, ["variant", "size", "className", "children", "isDisabled", "isFullWidth", "icon", "iconPosition", "hasHiddenLabel", "isPending", "hasHiddenPendingLabel", "pendingLabel"]);
   var isReversed = useReversedColors();
+  var pendingProps = isPending ? {
+    isPending: isPending,
+    hasHiddenPendingLabel: hasHiddenLabel || propsHasHiddenPendingLabel,
+    pendingLabel: pendingLabel
+  } : {};
+  var buttonContentClass = isPending ? !hasHiddenLabel && propsHasHiddenPendingLabel ? styles.retainContentWidth : styles.hideContentWidth : undefined;
   return /*#__PURE__*/React.createElement(Button$1, __assign({
-    className: mergeClassNames(styles.button, styles[variant], styles[size], isReversed && styles.reversed, className)
-  }, otherProps), children);
-};
+    ref: ref,
+    className: mergeClassNames(styles.button, styles[size], hasHiddenLabel && styles["".concat(size, "IconButton")], isDisabled && styles.isDisabled, isReversed ? styles["".concat(variant, "Reversed")] : styles[variant], isFullWidth && styles.fullWidth, className),
+    isDisabled: isDisabled,
+    isPending: isPending
+  }, restProps), function (racStateProps) {
+    var childIsFunction = typeof children === "function";
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonContent, {
+      size: size,
+      icon: icon,
+      iconPosition: iconPosition,
+      hasHiddenLabel: hasHiddenLabel,
+      className: buttonContentClass
+    }, childIsFunction ? children(racStateProps) : children), /*#__PURE__*/React.createElement("span", {
+      "aria-live": "polite"
+    }, pendingProps.isPending && ( /*#__PURE__*/React.createElement(PendingContent, __assign({}, pendingProps, {
+      size: size
+    })))));
+  });
+});
 export { Button };

package/dist/esm/__actions__/Button/v3/Button.module.css.mjs

@@ -0,0 +1,19 @@
+var styles = {
+  "button": "Button-module_button__vlUCI",
+  "fullWidth": "Button-module_fullWidth__qIkG6",
+  "small": "Button-module_small__FYPwk",
+  "medium": "Button-module_medium__4LOhQ",
+  "large": "Button-module_large__MjtVH",
+  "smallIconButton": "Button-module_smallIconButton__4gN-i",
+  "mediumIconButton": "Button-module_mediumIconButton__CEXv-",
+  "largeIconButton": "Button-module_largeIconButton__Apt33",
+  "secondary": "Button-module_secondary__Mmev0",
+  "tertiary": "Button-module_tertiary__MJjKC",
+  "primaryReversed": "Button-module_primaryReversed__m4kze",
+  "secondaryReversed": "Button-module_secondaryReversed__Q435c",
+  "tertiaryReversed": "Button-module_tertiaryReversed__Q-UqR",
+  "isDisabled": "Button-module_isDisabled__m1eE-",
+  "hideContentWidth": "Button-module_hideContentWidth__-E94d",
+  "retainContentWidth": "Button-module_retainContentWidth__b4IEC"
+};
+export { styles as default };

package/dist/esm/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.mjs

@@ -0,0 +1,28 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { VisuallyHidden } from '../../../../../VisuallyHidden/VisuallyHidden.mjs';
+import styles from './ButtonContent.module.css.mjs';
+
+/** Renders the inner content of the button, handling icon and label visibility */
+var ButtonContent = function (_a) {
+  var children = _a.children,
+    hasHiddenLabel = _a.hasHiddenLabel,
+    _b = _a.size,
+    size = _b === void 0 ? "medium" : _b,
+    icon = _a.icon,
+    _c = _a.iconPosition,
+    iconPosition = _c === void 0 ? "start" : _c,
+    className = _a.className,
+    restProps = __rest(_a, ["children", "hasHiddenLabel", "size", "icon", "iconPosition", "className"]);
+  return /*#__PURE__*/React.createElement("span", __assign({
+    className: classnames(className, styles.buttonContent, styles[size])
+  }, restProps), icon && iconPosition === "start" && ( /*#__PURE__*/React.createElement("span", {
+    className: styles.buttonIcon
+  }, icon)), hasHiddenLabel ? ( /*#__PURE__*/React.createElement(VisuallyHidden, null, children)) : ( /*#__PURE__*/React.createElement("span", {
+    className: styles.buttonLabel
+  }, children)), icon && iconPosition === "end" && ( /*#__PURE__*/React.createElement("span", {
+    className: styles.buttonIcon
+  }, icon)));
+};
+export { ButtonContent };

package/dist/esm/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.module.css.mjs

@@ -0,0 +1,7 @@
+var styles = {
+  "buttonContent": "ButtonContent-module_buttonContent__v5mHZ",
+  "large": "ButtonContent-module_large__mLOdb",
+  "buttonLabel": "ButtonContent-module_buttonLabel__T5XAq",
+  "buttonIcon": "ButtonContent-module_buttonIcon__qkAX-"
+};
+export { styles as default };

package/dist/esm/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.mjs

@@ -0,0 +1,26 @@
+import React from 'react';
+import classnames from 'classnames';
+import '../../../../../Loading/LoadingGraphic/LoadingGraphic.mjs';
+import '../../../../../Loading/LoadingHeading/LoadingHeading.mjs';
+import '../../../../../Loading/LoadingInput/LoadingInput.mjs';
+import '../../../../../Loading/LoadingParagraph/LoadingParagraph.mjs';
+import { LoadingSpinner } from '../../../../../Loading/LoadingSpinner/LoadingSpinner.mjs';
+import { VisuallyHidden } from '../../../../../VisuallyHidden/VisuallyHidden.mjs';
+import styles from './PendingContent.module.css.mjs';
+
+/** Renders the pending content of the button, handling pending label visibility and spinner positioning */
+var PendingContent = function (_a) {
+  var pendingLabel = _a.pendingLabel,
+    _b = _a.hasHiddenPendingLabel,
+    hasHiddenPendingLabel = _b === void 0 ? false : _b,
+    _c = _a.size,
+    size = _c === void 0 ? "medium" : _c;
+  return /*#__PURE__*/React.createElement("span", {
+    className: classnames(styles.pendingContent, styles[size])
+  }, hasHiddenPendingLabel ? ( /*#__PURE__*/React.createElement(VisuallyHidden, null, pendingLabel)) : ( /*#__PURE__*/React.createElement("span", null, pendingLabel)), /*#__PURE__*/React.createElement(LoadingSpinner, {
+    size: size === "small" ? "xs" : "sm",
+    accessibilityLabel: "",
+    classNameOverride: hasHiddenPendingLabel ? styles.centerSpinner : undefined
+  }));
+};
+export { PendingContent };

package/dist/esm/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.module.css.mjs

@@ -0,0 +1,6 @@
+var styles = {
+  "pendingContent": "PendingContent-module_pendingContent__c4IFS",
+  "large": "PendingContent-module_large__ypTxk",
+  "centerSpinner": "PendingContent-module_centerSpinner__EYn7L"
+};
+export { styles as default };

package/dist/esm/__overlays__/Tooltip/v3/Tooltip.mjs

@@ -1,8 +1,8 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useContext, useState, useLayoutEffect } from 'react';
-import { VisuallyHidden } from 'react-aria';
 import { useContextProps, TooltipContext, TooltipTriggerStateContext, Tooltip as Tooltip$1 } from 'react-aria-components';
 export { TooltipContext } from 'react-aria-components';
+import { VisuallyHidden } from '../../../VisuallyHidden/VisuallyHidden.mjs';
 import { mergeClassNames } from '../../../utils/mergeClassNames.mjs';
 import { OverlayArrow } from './OverlayArrow.mjs';
 import styles from './Tooltip.module.scss.mjs';