@kaizen/components 1.58.2 → 1.60.0

package/dist/cjs/index.cjs

@@ -402,6 +402,7 @@ var constants = require('./TitleBlockZen/constants.cjs');
 var ToggleSwitch = require('./ToggleSwitch/ToggleSwitch/ToggleSwitch.cjs');
 var ToggleSwitchField = require('./ToggleSwitch/ToggleSwitchField/ToggleSwitchField.cjs');
 var useMediaQueries = require('./utils/useMediaQueries.cjs');
+var hostedAssets = require('./utils/hostedAssets.cjs');
 var VisuallyHidden = require('./VisuallyHidden/VisuallyHidden.cjs');
 var Well = require('./Well/Well.cjs');
 var Workflow = require('./Workflow/Workflow.cjs');
@@ -1032,6 +1033,7 @@ exports.ToggleSwitch = ToggleSwitch.ToggleSwitch;
 exports.ToggleSwitchField = ToggleSwitchField.ToggleSwitchField;
 exports.subtractOnePixel = useMediaQueries.subtractOnePixel;
 exports.useMediaQueries = useMediaQueries.useMediaQueries;
+exports.assetUrl = hostedAssets.assetUrl;
 exports.VisuallyHidden = VisuallyHidden.VisuallyHidden;
 exports.Well = Well.Well;
 exports.Workflow = Workflow.Workflow;

package/dist/cjs/utils/hostedAssets.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var ORIGIN_BASE_URL = "https://d1e7r7b0lb8p4d.cloudfront.net";
+/**
+ * Returns the full URL of the asset at `path` managed by the
+ * `kaizen-design-system-assets` service.
+ *
+ * @example
+ * assetUrl("some/blob.png") -> "https://<origin>/some/blob.png"
+ *
+ * @see https://github.com/cultureamp/kaizen-design-system-assets/
+ */
+var assetUrl = function (path) {
+  return [ORIGIN_BASE_URL, path].join("/");
+};
+exports.assetUrl = assetUrl;

package/dist/cjs/utils/useResizeObserver.cjs

@@ -19,6 +19,7 @@ var defaultCallback = function (entry) {
  * @return {Array} An array containing a ref for binding to the observed DOM
  * element, and the current value of the callback-resolved ResizeObserverEntry
  * @callback resolveEntryCallback
+ * @deprecated use native `ResizeObserver` DOM API instead
  */
 var useResizeObserver = function (resolveEntry) {
   if (resolveEntry === void 0) {

package/dist/esm/Avatar/Avatar.mjs

@@ -19,12 +19,12 @@ var getMaxFontSizePixels = function (size) {
   if (size === "xlarge" || size === "xxlarge") return 34;
   return 22;
 };
-var fallbackIcon = function (fullName) {
-  if (fullName) {
+var fallbackIcon = function (alt) {
+  if (alt) {
     return /*#__PURE__*/React.createElement(UserIcon, {
       inheritSize: true,
       role: "img",
-      "aria-label": fullName
+      "aria-label": alt
     });
   }
   return /*#__PURE__*/React.createElement(UserIcon, {
@@ -32,7 +32,7 @@ var fallbackIcon = function (fullName) {
     role: "presentation"
   });
 };
-var renderInitials = function (fullName, size, disableInitials) {
+var renderInitials = function (fullName, alt, size, disableInitials) {
   if (fullName === void 0) {
     fullName = "";
   }
@@ -44,9 +44,9 @@ var renderInitials = function (fullName, size, disableInitials) {
   var renderFallback = disableInitials || initials === "";
   return renderFallback ? ( /*#__PURE__*/React.createElement("span", {
     className: styles.fallbackIcon
-  }, fallbackIcon(fullName))) : ( /*#__PURE__*/React.createElement("abbr", {
+  }, fallbackIcon(alt))) : ( /*#__PURE__*/React.createElement("abbr", {
     className: classnames(styles.initials, isLongName && styles.longName),
-    title: fullName || ""
+    title: alt
   }, isLongName ? (
   /*#__PURE__*/
   // Only called if 3 or more initials, fits text width for long names
@@ -70,11 +70,13 @@ var Avatar = function (_a) {
     isCompany = _d === void 0 ? false : _d,
     _e = _a.isCurrentUser,
     isCurrentUser = _e === void 0 ? true : _e,
+    _f = _a.alt,
+    alt = _f === void 0 ? fullName || "" : _f,
     classNameOverride = _a.classNameOverride,
-    restProps = __rest(_a, ["fullName", "size", "avatarSrc", "disableInitials", "isCompany", "isCurrentUser", "classNameOverride"]);
-  var _f = useState(avatarSrc ? "loading" : "none"),
-    avatarState = _f[0],
-    setAvatarState = _f[1];
+    restProps = __rest(_a, ["fullName", "size", "avatarSrc", "disableInitials", "isCompany", "isCurrentUser", "alt", "classNameOverride"]);
+  var _g = useState(avatarSrc ? "loading" : "none"),
+    avatarState = _g[0],
+    setAvatarState = _g[1];
   var image = useRef(null);
   var renderInitialAvatar = !isCompany && (avatarState === "none" || avatarState === "error");
   useEffect(function () {
@@ -102,7 +104,7 @@ var Avatar = function (_a) {
     src: avatarSrc,
     onError: onImageFailure,
     onLoad: onImageSuccess,
-    alt: fullName || ""
-  })), renderInitialAvatar && renderInitials(fullName, size, disableInitials));
+    alt: alt
+  })), renderInitialAvatar && renderInitials(fullName, alt, size, disableInitials));
 };
 export { Avatar };

package/dist/esm/Brand/Brand.mjs

@@ -1,6 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
-import { assetUrl } from '@kaizen/hosted-assets';
+import { assetUrl } from '../utils/hostedAssets.mjs';
 import { BrandCollectiveIntelligence } from './BrandCollectiveIntelligence/BrandCollectiveIntelligence.mjs';
 import styles from './Brand.module.scss.mjs';
 var isSVG = function (variant, restProps) {

package/dist/esm/BrandMoment/BrandMoment.mjs

@@ -1,9 +1,9 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import { assetUrl } from '@kaizen/hosted-assets';
 import { Heading } from '../Heading/Heading.mjs';
 import { Text } from '../Text/Text.mjs';
+import { assetUrl } from '../utils/hostedAssets.mjs';
 import { useMediaQueries } from '../utils/useMediaQueries.mjs';
 import styles from './BrandMoment.module.scss.mjs';
 import { Button } from '../__actions__/Button/v1/Button/Button.mjs';

package/dist/esm/Card/Card.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import styles from './Card.module.scss.mjs';
+import styles from './Card.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094938/Card Guidance} |

package/dist/esm/Card/Card.module.css.mjs

@@ -0,0 +1,20 @@
+var styles = {
+  "wrapper": "Card-module_wrapper__Hriov",
+  "elevated": "Card-module_elevated__qkaCe",
+  "blue": "Card-module_blue__JOIuL",
+  "gray": "Card-module_gray__cRl9J",
+  "green": "Card-module_green__s2Oj8",
+  "orange": "Card-module_orange__qrxQo",
+  "purple": "Card-module_purple__cp6Bx",
+  "red": "Card-module_red__Ux35X",
+  "white": "Card-module_white__LjMQF",
+  "yellow": "Card-module_yellow__A3F9a",
+  "default": "Card-module_default__c8nG0",
+  "informative": "Card-module_informative__6la3C",
+  "positive": "Card-module_positive__waT0O",
+  "cautionary": "Card-module_cautionary__Fxfva",
+  "destructive": "Card-module_destructive__OqDdg",
+  "assertive": "Card-module_assertive__5ntbN",
+  "highlight": "Card-module_highlight__QJ5hP"
+};
+export { styles as default };

package/dist/esm/Illustration/subcomponents/Base/Base.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import { assetUrl } from '@kaizen/hosted-assets';
+import { assetUrl } from '../../../utils/hostedAssets.mjs';
 import styles from './Base.module.scss.mjs';
 const Base = /*#__PURE__*/function () {
   const Base = function (_a) {

package/dist/esm/Illustration/subcomponents/VideoPlayer/VideoPlayer.mjs

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 import classnames from 'classnames';
-import { assetUrl } from '@kaizen/hosted-assets';
+import { assetUrl } from '../../../utils/hostedAssets.mjs';
 import { canPlayWebm } from '../../utils/canPlayWebm.mjs';
 import { usePausePlay } from '../../utils/usePausePlay.mjs';
 import styles from '../Base/Base.module.scss.mjs';

package/dist/esm/Popover/Popover.module.scss.mjs

@@ -20,13 +20,6 @@ var styles = {
   "close": "Popover-module_close__8h4Rt",
   "arrowWrapper": "Popover-module_arrowWrapper__DiE3-",
   "arrow": "Popover-module_arrow__PS4V6",
-  "arrowSideTop": "Popover-module_arrowSideTop__JoORK",
-  "arrowSideLeft": "Popover-module_arrowSideLeft__2Zhqb",
-  "arrowSideRight": "Popover-module_arrowSideRight__fHKWI",
-  "arrowSideBottom": "Popover-module_arrowSideBottom__mBr5k",
-  "arrowPositionCenter": "Popover-module_arrowPositionCenter__l8V0-",
-  "arrowPositionStart": "Popover-module_arrowPositionStart__eXyu0",
-  "arrowPositionEnd": "Popover-module_arrowPositionEnd__UY4MU",
   "large": "Popover-module_large__-LH0l",
   "singleLine": "Popover-module_singleLine__7il24"
 };

package/dist/esm/index.mjs

@@ -407,6 +407,7 @@ export { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID, TITLE_BLOCK_ZEN_SECONDARY_MENU_H
 export { ToggleSwitch } from './ToggleSwitch/ToggleSwitch/ToggleSwitch.mjs';
 export { ToggleSwitchField } from './ToggleSwitch/ToggleSwitchField/ToggleSwitchField.mjs';
 export { subtractOnePixel, useMediaQueries } from './utils/useMediaQueries.mjs';
+export { assetUrl } from './utils/hostedAssets.mjs';
 export { VisuallyHidden } from './VisuallyHidden/VisuallyHidden.mjs';
 export { Well } from './Well/Well.mjs';
 export { Workflow } from './Workflow/Workflow.mjs';

package/dist/esm/utils/hostedAssets.mjs

@@ -0,0 +1,14 @@
+var ORIGIN_BASE_URL = "https://d1e7r7b0lb8p4d.cloudfront.net";
+/**
+ * Returns the full URL of the asset at `path` managed by the
+ * `kaizen-design-system-assets` service.
+ *
+ * @example
+ * assetUrl("some/blob.png") -> "https://<origin>/some/blob.png"
+ *
+ * @see https://github.com/cultureamp/kaizen-design-system-assets/
+ */
+var assetUrl = function (path) {
+  return [ORIGIN_BASE_URL, path].join("/");
+};
+export { assetUrl };

package/dist/esm/utils/useResizeObserver.mjs

@@ -11,6 +11,7 @@ var defaultCallback = function (entry) {
  * @return {Array} An array containing a ref for binding to the observed DOM
  * element, and the current value of the callback-resolved ResizeObserverEntry
  * @callback resolveEntryCallback
+ * @deprecated use native `ResizeObserver` DOM API instead
  */
 var useResizeObserver = function (resolveEntry) {
   if (resolveEntry === void 0) {