@kaizen/components 1.75.3 → 1.77.0

package/dist/esm/next.mjs

@@ -1,19 +1,19 @@
-export { Button } from './__next__/Button/Button.mjs';
-export { Icon } from './__next__/Icon/Icon.mjs';
-export { Menu } from './__next__/Menu/Menu.mjs';
-export { MenuItem } from './__next__/Menu/MenuItem.mjs';
-export { MenuTrigger } from './__next__/Menu/MenuTrigger.mjs';
-export { MenuPopover } from './__next__/Menu/MenuPopover.mjs';
-export { MenuSection } from './__next__/Menu/MenuSection.mjs';
-export { MenuHeader } from './__next__/Menu/MenuHeader.mjs';
-export { Select } from './__next__/Select/Select.mjs';
-export { RemovableTag } from './__next__/Tag/RemovableTag/RemovableTag.mjs';
-export { Tag } from './__next__/Tag/Tag/Tag.mjs';
-export { Tabs } from './__next__/Tabs/Tabs.mjs';
-export { Tab } from './__next__/Tabs/subcomponents/Tab/Tab.mjs';
-export { TabList } from './__next__/Tabs/subcomponents/TabList/TabList.mjs';
-export { TabPanel } from './__next__/Tabs/subcomponents/TabPanel/TabPanel.mjs';
-export { Tooltip } from './__next__/Tooltip/Tooltip.mjs';
-export { TooltipTrigger } from './__next__/Tooltip/TooltipTrigger.mjs';
-export { Focusable } from './Focusable/Focusable.mjs';
+export { Button } from './src/__next__/Button/Button.mjs';
+export { Icon } from './src/__next__/Icon/Icon.mjs';
+export { Menu } from './src/__next__/Menu/Menu.mjs';
+export { MenuItem } from './src/__next__/Menu/MenuItem.mjs';
+export { MenuTrigger } from './src/__next__/Menu/MenuTrigger.mjs';
+export { MenuPopover } from './src/__next__/Menu/MenuPopover.mjs';
+export { MenuSection } from './src/__next__/Menu/MenuSection.mjs';
+export { MenuHeader } from './src/__next__/Menu/MenuHeader.mjs';
+export { Select } from './src/__next__/Select/Select.mjs';
+export { RemovableTag } from './src/__next__/Tag/RemovableTag/RemovableTag.mjs';
+export { Tag } from './src/__next__/Tag/Tag/Tag.mjs';
+export { Tabs } from './src/__next__/Tabs/Tabs.mjs';
+export { Tab } from './src/__next__/Tabs/subcomponents/Tab/Tab.mjs';
+export { TabList } from './src/__next__/Tabs/subcomponents/TabList/TabList.mjs';
+export { TabPanel } from './src/__next__/Tabs/subcomponents/TabPanel/TabPanel.mjs';
+export { Tooltip } from './src/__next__/Tooltip/Tooltip.mjs';
+export { TooltipTrigger } from './src/__next__/Tooltip/TooltipTrigger.mjs';
+export { Focusable } from './src/Focusable/Focusable.mjs';
 export { TooltipContext } from 'react-aria-components';

package/dist/esm/overlaysV1.mjs

@@ -1 +1 @@
-export { Tooltip } from './Tooltip/Tooltip.mjs';
+export { Tooltip } from './src/Tooltip/Tooltip.mjs';

package/dist/esm/overlaysV2.mjs

@@ -1 +1 @@
-export { Tooltip } from './Tooltip/Tooltip.mjs';
+export { Tooltip } from './src/Tooltip/Tooltip.mjs';

package/dist/esm/overlaysV3.mjs

@@ -1,3 +1,3 @@
-export { Tooltip } from './__next__/Tooltip/Tooltip.mjs';
-export { TooltipTrigger } from './__next__/Tooltip/TooltipTrigger.mjs';
+export { Tooltip } from './src/__next__/Tooltip/Tooltip.mjs';
+export { TooltipTrigger } from './src/__next__/Tooltip/TooltipTrigger.mjs';
 export { TooltipContext } from 'react-aria-components';

package/dist/esm/{Card → src/Card}/Card.mjs

@@ -1,6 +1,8 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
+import { useExitingAnimation } from '../utils/useExitingAnimation/useExitingAnimation.mjs';
+import sharedAiStyles from '../../styles/utils/AIMoment.module.css.mjs';
 import styles from './Card.module.css.mjs';
 
 /**
@@ -18,11 +20,16 @@ const Card = /*#__PURE__*/function () {
       _d = _a.isElevated,
       isElevated = _d === void 0 ? false : _d,
       classNameOverride = _a.classNameOverride,
-      props = __rest(_a, ["children", "tag", "variant", "color", "isElevated", "classNameOverride"]);
+      isAiLoading = _a.isAiLoading,
+      props = __rest(_a, ["children", "tag", "variant", "color", "isElevated", "classNameOverride", "isAiLoading"]);
     var Element = tag;
+    var animationClass = useExitingAnimation(isAiLoading, sharedAiStyles.aiMomentLoading, sharedAiStyles.aiMomentExiting, 500);
     return /*#__PURE__*/React.createElement(Element, __assign({
-      className: classnames(styles.wrapper, variant ? styles[variant] : styles[color], classNameOverride, isElevated && styles.elevated)
-    }, props), children);
+      className: classnames(styles.wrapper, variant ? styles[variant] : styles[color], isElevated && styles.elevated, isAiLoading !== undefined && sharedAiStyles.aiMoment, isAiLoading !== undefined && animationClass, classNameOverride)
+    }, props), isAiLoading !== undefined && (/*#__PURE__*/React.createElement("div", {
+      "aria-hidden": true,
+      className: sharedAiStyles.aiMomentBackground
+    })), children);
   };
   Card.displayName = 'Card';
   return Card;

package/dist/esm/{Well → src/Well}/Well.mjs

@@ -1,7 +1,9 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import styles from './Well.module.scss.mjs';
+import { useExitingAnimation } from '../utils/useExitingAnimation/useExitingAnimation.mjs';
+import sharedAiStyles from '../../styles/utils/AIMoment.module.css.mjs';
+import styles from './Well.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075604733/Well Guidance} |
@@ -18,10 +20,15 @@ const Well = /*#__PURE__*/function () {
       _d = _a.noMargin,
       noMargin = _d === void 0 ? false : _d,
       classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["children", "variant", "color", "borderStyle", "noMargin", "classNameOverride"]);
+      isAiLoading = _a.isAiLoading,
+      restProps = __rest(_a, ["children", "variant", "color", "borderStyle", "noMargin", "classNameOverride", "isAiLoading"]);
+    var animationClass = useExitingAnimation(isAiLoading, sharedAiStyles.aiMomentLoading, sharedAiStyles.aiMomentExiting, 500);
     return /*#__PURE__*/React.createElement("div", __assign({
-      className: classnames(styles.container, styles[borderStyle], styles[color], variant && styles[variant], noMargin && styles.noMargin, classNameOverride)
-    }, restProps), children);
+      className: classnames(styles.container, styles[borderStyle], styles[color], variant && styles[variant], noMargin && styles.noMargin, isAiLoading !== undefined && sharedAiStyles.aiMoment, isAiLoading !== undefined && animationClass, classNameOverride)
+    }, restProps), /*#__PURE__*/React.createElement(React.Fragment, null, isAiLoading !== undefined && (/*#__PURE__*/React.createElement("div", {
+      "aria-hidden": true,
+      className: sharedAiStyles.aiMomentBackground
+    })), children));
   };
   Well.displayName = 'Well';
   return Well;

package/dist/esm/src/Well/Well.module.css.mjs

@@ -0,0 +1,23 @@
+var styles = {
+  "container": "Well-module_container__Bu20U",
+  "noMargin": "Well-module_noMargin__HImc8",
+  "white": "Well-module_white__ov6XT",
+  "gray": "Well-module_gray__sIKVK",
+  "blue": "Well-module_blue__mNOks",
+  "yellow": "Well-module_yellow__cW5bY",
+  "orange": "Well-module_orange__hp3q8",
+  "red": "Well-module_red__jCJY6",
+  "green": "Well-module_green__gOTVG",
+  "purple": "Well-module_purple__zgJJR",
+  "positive": "Well-module_positive__Kee9e",
+  "default": "Well-module_default__VfatN",
+  "negative": "Well-module_negative__P2IpZ",
+  "informative": "Well-module_informative__pcsXe",
+  "cautionary": "Well-module_cautionary__XLGMt",
+  "assertive": "Well-module_assertive__c2rNv",
+  "prominent": "Well-module_prominent__QqYi7",
+  "solid": "Well-module_solid__iyAUm",
+  "dashed": "Well-module_dashed__4I8h7",
+  "none": "Well-module_none__nwqoe"
+};
+export { styles as default };

package/dist/esm/src/utils/useExitingAnimation/useExitingAnimation.mjs

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+
+/** a utility hook for handling an the addition and removal of an animation and exit animation class */
+var useExitingAnimation = function (shouldAnimate, animatingClass, exitingClass, exitDuration) {
+  var _a = useState(''),
+    animationClass = _a[0],
+    setAnimationClass = _a[1];
+  var previousIsLoading = React.useRef(undefined);
+  useEffect(function () {
+    if (shouldAnimate !== undefined) {
+      if (previousIsLoading.current === true && shouldAnimate === false) {
+        setAnimationClass(exitingClass);
+        var timeout_1 = setTimeout(function () {
+          setAnimationClass('');
+        }, exitDuration);
+        return function () {
+          return clearTimeout(timeout_1);
+        };
+      }
+      if (shouldAnimate === true) {
+        setAnimationClass(animatingClass);
+      }
+    }
+    previousIsLoading.current = shouldAnimate;
+  }, [shouldAnimate, animatingClass, exitingClass, exitDuration]);
+  return animationClass;
+};
+export { useExitingAnimation };

package/dist/esm/styles/utils/AIMoment.module.css.mjs

@@ -0,0 +1,7 @@
+var sharedAiStyles = {
+  "aiMoment": "AIMoment-module_aiMoment__uk-Kt",
+  "aiMomentBackground": "AIMoment-module_aiMomentBackground__43kd7",
+  "aiMomentLoading": "AIMoment-module_aiMomentLoading__T-NLB",
+  "aiMomentExiting": "AIMoment-module_aiMomentExiting__kuoGT"
+};
+export { sharedAiStyles as default };