@carbon/ibm-products 2.61.0 → 2.62.0

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -7,6 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { usePrefix, Button, Toggle, Link, IconButton } from '@carbon/react';
+import { dateTimeFormat } from '@carbon/utilities';
 import { Settings, ErrorFilled, CheckmarkFilled, WarningAltFilled, InformationSquareFilled, Close, ChevronDown } from '@carbon/react/icons';
 import React__default, { useRef, useState, useEffect } from 'react';
 import '../EmptyStates/EmptyState.js';
@@ -19,22 +20,25 @@ import { NotificationsEmptyState } from '../EmptyStates/NotificationsEmptyState/
 import '../EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
+import { usePrefersReducedMotion } from '../../global/js/hooks/usePrefersReducedMotion.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
-import { usePrefersReducedMotion } from '../../global/js/hooks/usePrefersReducedMotion.js';
+import { getSupportedLocale } from '../../global/js/utils/getSupportedLocale.js';
+import { pkg } from '../../settings.js';
 import { timeAgo } from './utils.js';
-import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
+import { usePresence } from '../../global/js/hooks/usePresence.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
 
 var _Close;
-var _excluded = ["className", "data", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "illustrationTheme", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel", "triggerButtonRef"];
+var _excluded = ["className", "data", "dateTimeLocale", "dateTimeStyle", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "illustrationTheme", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel", "triggerButtonRef"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var componentName = 'NotificationsPanel';
 var blockClass = "".concat(pkg.prefix, "--notifications-panel");
+var DefaultLocale = 'en-US';
 // Default values for props
 var defaults = {
+  dateTimeStyle: 'long',
   daysAgoText: function daysAgoText(value) {
     return "".concat(value, " days ago");
   },
@@ -87,126 +91,139 @@ var defaults = {
   },
   yesterdayLabel: 'Yesterday'
 };
+/**
+ * The `NotificationsPanel` sets expectations on the behavior for notifications,
+ * allowing the user to view and interact with them all in one place.
+ *
+ * **To adopt the new localization:**
+ *
+ * **Step 1:** Provide a locale to the `dateTimeLocale` prop, such as "de" or "fr-CA".
+ *
+ * **Step 2:** Remove the now _deprecated_ props: `daysAgoText`,
+ * `hourAgoText`, `hoursAgoText`, `minuteAgoText`, `minutesAgoText`,
+ * `monthAgoText`, `monthsAgoText`, `nowText`, `secondsAgoText`,
+ * `yearAgoText`, `yearsAgoText`, `yesterdayAtText`.
+ *
+ * If you do not provide a locale, the deprecated props will be applied instead.
+ */
 var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     data = _ref.data,
+    dateTimeLocale = _ref.dateTimeLocale,
+    _ref$dateTimeStyle = _ref.dateTimeStyle,
+    dateTimeStyle = _ref$dateTimeStyle === void 0 ? defaults.dateTimeStyle : _ref$dateTimeStyle,
     _ref$daysAgoText = _ref.daysAgoText,
-    daysAgoText = _ref$daysAgoText === undefined ? defaults.daysAgoText : _ref$daysAgoText,
+    daysAgoText = _ref$daysAgoText === void 0 ? defaults.daysAgoText : _ref$daysAgoText,
     _ref$dismissAllLabel = _ref.dismissAllLabel,
-    dismissAllLabel = _ref$dismissAllLabel === undefined ? defaults.dismissAllLabel : _ref$dismissAllLabel,
+    dismissAllLabel = _ref$dismissAllLabel === void 0 ? defaults.dismissAllLabel : _ref$dismissAllLabel,
     _ref$dismissSingleNot = _ref.dismissSingleNotificationIconDescription,
-    dismissSingleNotificationIconDescription = _ref$dismissSingleNot === undefined ? defaults.dismissSingleNotificationIconDescription : _ref$dismissSingleNot,
+    dismissSingleNotificationIconDescription = _ref$dismissSingleNot === void 0 ? defaults.dismissSingleNotificationIconDescription : _ref$dismissSingleNot,
     doNotDisturbDefaultToggled = _ref.doNotDisturbDefaultToggled,
     _ref$doNotDisturbLabe = _ref.doNotDisturbLabel,
-    doNotDisturbLabel = _ref$doNotDisturbLabe === undefined ? defaults.doNotDisturbLabel : _ref$doNotDisturbLabe,
+    doNotDisturbLabel = _ref$doNotDisturbLabe === void 0 ? defaults.doNotDisturbLabel : _ref$doNotDisturbLabe,
     _ref$emptyStateLabel = _ref.emptyStateLabel,
-    emptyStateLabel = _ref$emptyStateLabel === undefined ? defaults.emptyStateLabel : _ref$emptyStateLabel,
+    emptyStateLabel = _ref$emptyStateLabel === void 0 ? defaults.emptyStateLabel : _ref$emptyStateLabel,
     _ref$hourAgoText = _ref.hourAgoText,
-    hourAgoText = _ref$hourAgoText === undefined ? defaults.hourAgoText : _ref$hourAgoText,
+    hourAgoText = _ref$hourAgoText === void 0 ? defaults.hourAgoText : _ref$hourAgoText,
     _ref$hoursAgoText = _ref.hoursAgoText,
-    hoursAgoText = _ref$hoursAgoText === undefined ? defaults.hoursAgoText : _ref$hoursAgoText,
+    hoursAgoText = _ref$hoursAgoText === void 0 ? defaults.hoursAgoText : _ref$hoursAgoText,
     _ref$illustrationThem = _ref.illustrationTheme,
-    illustrationTheme = _ref$illustrationThem === undefined ? defaults.illustrationTheme : _ref$illustrationThem,
+    illustrationTheme = _ref$illustrationThem === void 0 ? defaults.illustrationTheme : _ref$illustrationThem,
     _ref$minuteAgoText = _ref.minuteAgoText,
-    minuteAgoText = _ref$minuteAgoText === undefined ? defaults.minuteAgoText : _ref$minuteAgoText,
+    minuteAgoText = _ref$minuteAgoText === void 0 ? defaults.minuteAgoText : _ref$minuteAgoText,
     _ref$minutesAgoText = _ref.minutesAgoText,
-    minutesAgoText = _ref$minutesAgoText === undefined ? defaults.minutesAgoText : _ref$minutesAgoText,
+    minutesAgoText = _ref$minutesAgoText === void 0 ? defaults.minutesAgoText : _ref$minutesAgoText,
     _ref$monthAgoText = _ref.monthAgoText,
-    monthAgoText = _ref$monthAgoText === undefined ? defaults.monthAgoText : _ref$monthAgoText,
+    monthAgoText = _ref$monthAgoText === void 0 ? defaults.monthAgoText : _ref$monthAgoText,
     _ref$monthsAgoText = _ref.monthsAgoText,
-    monthsAgoText = _ref$monthsAgoText === undefined ? defaults.monthsAgoText : _ref$monthsAgoText,
+    monthsAgoText = _ref$monthsAgoText === void 0 ? defaults.monthsAgoText : _ref$monthsAgoText,
     _ref$nowText = _ref.nowText,
-    nowText = _ref$nowText === undefined ? defaults.nowText : _ref$nowText,
+    nowText = _ref$nowText === void 0 ? defaults.nowText : _ref$nowText,
     onClickOutside = _ref.onClickOutside,
     _ref$onDismissAllNoti = _ref.onDismissAllNotifications,
-    onDismissAllNotifications = _ref$onDismissAllNoti === undefined ? defaults.onDismissAllNotifications : _ref$onDismissAllNoti,
+    onDismissAllNotifications = _ref$onDismissAllNoti === void 0 ? defaults.onDismissAllNotifications : _ref$onDismissAllNoti,
     _ref$onDismissSingleN = _ref.onDismissSingleNotification,
-    onDismissSingleNotification = _ref$onDismissSingleN === undefined ? defaults.onDismissSingleNotification : _ref$onDismissSingleN,
+    onDismissSingleNotification = _ref$onDismissSingleN === void 0 ? defaults.onDismissSingleNotification : _ref$onDismissSingleN,
     onDoNotDisturbChange = _ref.onDoNotDisturbChange,
     onSettingsClick = _ref.onSettingsClick,
     onViewAllClick = _ref.onViewAllClick,
     open = _ref.open,
     _ref$previousLabel = _ref.previousLabel,
-    previousLabel = _ref$previousLabel === undefined ? defaults.previousLabel : _ref$previousLabel,
+    previousLabel = _ref$previousLabel === void 0 ? defaults.previousLabel : _ref$previousLabel,
     _ref$readLessLabel = _ref.readLessLabel,
-    readLessLabel = _ref$readLessLabel === undefined ? defaults.readLessLabel : _ref$readLessLabel,
+    readLessLabel = _ref$readLessLabel === void 0 ? defaults.readLessLabel : _ref$readLessLabel,
     _ref$readMoreLabel = _ref.readMoreLabel,
-    readMoreLabel = _ref$readMoreLabel === undefined ? defaults.readMoreLabel : _ref$readMoreLabel,
+    readMoreLabel = _ref$readMoreLabel === void 0 ? defaults.readMoreLabel : _ref$readMoreLabel,
     _ref$secondsAgoText = _ref.secondsAgoText,
-    secondsAgoText = _ref$secondsAgoText === undefined ? defaults.secondsAgoText : _ref$secondsAgoText,
+    secondsAgoText = _ref$secondsAgoText === void 0 ? defaults.secondsAgoText : _ref$secondsAgoText,
     _ref$settingsIconDesc = _ref.settingsIconDescription,
-    settingsIconDescription = _ref$settingsIconDesc === undefined ? defaults.settingsIconDescription : _ref$settingsIconDesc,
+    settingsIconDescription = _ref$settingsIconDesc === void 0 ? defaults.settingsIconDescription : _ref$settingsIconDesc,
     _ref$title = _ref.title,
-    title = _ref$title === undefined ? defaults.title : _ref$title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title,
     _ref$todayLabel = _ref.todayLabel,
-    todayLabel = _ref$todayLabel === undefined ? defaults.todayLabel : _ref$todayLabel,
+    todayLabel = _ref$todayLabel === void 0 ? defaults.todayLabel : _ref$todayLabel,
     _ref$viewAllLabel = _ref.viewAllLabel,
-    viewAllLabel = _ref$viewAllLabel === undefined ? defaults.viewAllLabel : _ref$viewAllLabel,
+    viewAllLabel = _ref$viewAllLabel === void 0 ? defaults.viewAllLabel : _ref$viewAllLabel,
     _ref$yearAgoText = _ref.yearAgoText,
-    yearAgoText = _ref$yearAgoText === undefined ? defaults.yearAgoText : _ref$yearAgoText,
+    yearAgoText = _ref$yearAgoText === void 0 ? defaults.yearAgoText : _ref$yearAgoText,
     _ref$yearsAgoText = _ref.yearsAgoText,
-    yearsAgoText = _ref$yearsAgoText === undefined ? defaults.yearsAgoText : _ref$yearsAgoText,
+    yearsAgoText = _ref$yearsAgoText === void 0 ? defaults.yearsAgoText : _ref$yearsAgoText,
     _ref$yesterdayAtText = _ref.yesterdayAtText,
-    yesterdayAtText = _ref$yesterdayAtText === undefined ? defaults.yesterdayAtText : _ref$yesterdayAtText,
+    yesterdayAtText = _ref$yesterdayAtText === void 0 ? defaults.yesterdayAtText : _ref$yesterdayAtText,
     _ref$yesterdayLabel = _ref.yesterdayLabel,
-    yesterdayLabel = _ref$yesterdayLabel === undefined ? defaults.yesterdayLabel : _ref$yesterdayLabel,
+    yesterdayLabel = _ref$yesterdayLabel === void 0 ? defaults.yesterdayLabel : _ref$yesterdayLabel,
     triggerButtonRef = _ref.triggerButtonRef,
     rest = _objectWithoutProperties(_ref, _excluded);
   var notificationPanelRef = useRef(null);
   var notificationPanelInnerRef = useRef(null);
   var startSentinel = useRef(null);
   var endSentinel = useRef(null);
-  var _useState = useState(open),
+  var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    shouldRender = _useState2[0],
-    setRender = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    allNotifications = _useState4[0],
-    setAllNotifications = _useState4[1];
-  var previousState = usePreviousValue({
-    open: open
-  });
-  var reducedMotion = usePrefersReducedMotion();
+    allNotifications = _useState2[0],
+    setAllNotifications = _useState2[1];
+  var supportedLocale = getSupportedLocale(dateTimeLocale, DefaultLocale);
   var carbonPrefix = usePrefix();
+  var reducedMotion = usePrefersReducedMotion();
+  var exitAnimationName = reducedMotion ? 'notifications-panel-exit-reduced' : 'notifications-panel-fade-out';
+  var _usePresence = usePresence(open, notificationPanelRef, exitAnimationName),
+    shouldRender = _usePresence.shouldRender;
   useEffect(function () {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
   }, [data]);
   useClickOutside(ref || notificationPanelRef, function () {
-    onClickOutside === null || onClickOutside === undefined || onClickOutside();
+    onClickOutside === null || onClickOutside === void 0 || onClickOutside();
     setTimeout(function () {
       var _triggerButtonRef$cur;
-      triggerButtonRef === null || triggerButtonRef === undefined || (_triggerButtonRef$cur = triggerButtonRef.current) === null || _triggerButtonRef$cur === undefined || _triggerButtonRef$cur.focus();
+      triggerButtonRef === null || triggerButtonRef === void 0 || (_triggerButtonRef$cur = triggerButtonRef.current) === null || _triggerButtonRef$cur === void 0 || _triggerButtonRef$cur.focus();
     }, 0);
   });
   var handleKeydown = function handleKeydown(event) {
     event.stopPropagation();
     if (event.key === 'Escape') {
-      setRender(false);
-      onClickOutside === null || onClickOutside === undefined || onClickOutside();
+      onClickOutside === null || onClickOutside === void 0 || onClickOutside();
       setTimeout(function () {
         var _triggerButtonRef$cur2;
-        triggerButtonRef === null || triggerButtonRef === undefined || (_triggerButtonRef$cur2 = triggerButtonRef.current) === null || _triggerButtonRef$cur2 === undefined || _triggerButtonRef$cur2.focus();
+        triggerButtonRef === null || triggerButtonRef === void 0 || (_triggerButtonRef$cur2 = triggerButtonRef.current) === null || _triggerButtonRef$cur2 === void 0 || _triggerButtonRef$cur2.focus();
       }, 100);
     }
   };
   useEffect(function () {
     // initialize the notification panel to open
     if (open) {
-      setRender(true);
       var observer = new MutationObserver(function () {
         if (notificationPanelRef.current) {
           var _querySelector;
           var parentElement = notificationPanelRef.current;
-          parentElement === null || parentElement === undefined || (_querySelector = parentElement.querySelector(".".concat(blockClass, "__dismiss-button"))) === null || _querySelector === undefined || _querySelector.focus();
+          parentElement === null || parentElement === void 0 || (_querySelector = parentElement.querySelector(".".concat(blockClass, "__dismiss-button"))) === null || _querySelector === void 0 || _querySelector.focus();
           observer.disconnect();
         }
       });
       if (notificationPanelRef.current) {
         var parentElement = notificationPanelRef.current;
-        var button = parentElement === null || parentElement === undefined ? undefined : parentElement.querySelector(".".concat(blockClass, "__dismiss-button"));
-        button === null || button === undefined || button.focus();
+        var button = parentElement === null || parentElement === void 0 ? void 0 : parentElement.querySelector(".".concat(blockClass, "__dismiss-button"));
+        button === null || button === void 0 || button.focus();
       } else {
         observer.observe(document.body, {
           childList: true,
@@ -218,17 +235,6 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
       };
     }
   }, [open]);
-  var onAnimationEnd = function onAnimationEnd() {
-    // initialize the notification panel to close
-    if (!open) {
-      setRender(false);
-    }
-  };
-  useEffect(function () {
-    if (!open && previousState !== null && previousState !== undefined && previousState.open && reducedMotion) {
-      setRender(false);
-    }
-  }, [open, previousState === null || previousState === undefined ? undefined : previousState.open, reducedMotion]);
   var sortChronologically = function sortChronologically(arr) {
     if (!arr || arr && !arr.length) {
       return;
@@ -261,9 +267,9 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
       return item.id === id;
     })[0];
     var trimLength = 88;
-    var description = notification === null || notification === undefined ? undefined : notification['description'];
-    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification === null || notification === undefined ? undefined : notification['showAll']), "".concat(blockClass, "__notification-short-description"), !(notification !== null && notification !== undefined && notification['showAll']))]);
-    var showMoreButtonClassName = cx([_defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-read-less-button"), notification === null || notification === undefined ? undefined : notification['showAll']), "".concat(blockClass, "__notification-read-more-button"), !(notification !== null && notification !== undefined && notification['showAll']))]);
+    var description = notification === null || notification === void 0 ? void 0 : notification['description'];
+    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification === null || notification === void 0 ? void 0 : notification['showAll']), "".concat(blockClass, "__notification-short-description"), !(notification !== null && notification !== void 0 && notification['showAll']))]);
+    var showMoreButtonClassName = cx([_defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-read-less-button"), notification === null || notification === void 0 ? void 0 : notification['showAll']), "".concat(blockClass, "__notification-read-more-button"), !(notification !== null && notification !== void 0 && notification['showAll']))]);
     return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", {
       className: descriptionClassName
     }, description), description.length > trimLength && /*#__PURE__*/React__default.createElement(Button, {
@@ -274,14 +280,14 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
           size: 16
         }, props));
       },
-      iconDescription: notification !== null && notification !== undefined && notification['showAll'] ? readLessLabel : readMoreLabel,
+      iconDescription: notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel,
       onClick: function onClick(event) {
         event.preventDefault();
         event.stopPropagation();
         var newData = allNotifications.map(function (item) {
-          if (item.id === (notification === null || notification === undefined ? undefined : notification['id'])) {
+          if (item.id === (notification === null || notification === void 0 ? void 0 : notification['id'])) {
             return Object.assign({}, item, {
-              showAll: !(item !== null && item !== undefined && item['showAll'])
+              showAll: !(item !== null && item !== void 0 && item['showAll'])
             });
           }
           return item;
@@ -289,7 +295,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
         setAllNotifications(newData);
       },
       className: showMoreButtonClassName
-    }, notification !== null && notification !== undefined && notification['showAll'] ? readLessLabel : readMoreLabel));
+    }, notification !== null && notification !== void 0 && notification['showAll'] ? readLessLabel : readMoreLabel));
   };
   var renderNotification = function renderNotification(group, notification, index) {
     var notificationClassName = cx(["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
@@ -326,7 +332,10 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
       className: "".concat(blockClass, "__notification-content")
     }, /*#__PURE__*/React__default.createElement("p", {
       className: "".concat(blockClass, "__notification-time-label")
-    }, timeAgo({
+    }, dateTimeLocale ? dateTimeFormat.relative.format(notification.timestamp, {
+      locale: supportedLocale,
+      style: dateTimeStyle
+    }) : timeAgo({
       previousTime: notification.timestamp,
       secondsAgoText: secondsAgoText,
       minuteAgoText: minuteAgoText,
@@ -376,7 +385,6 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
   }, rest, {
     id: blockClass,
     className: cx(blockClass, className, "".concat(blockClass, "__container"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__entrance"), open), "".concat(blockClass, "__exit"), !open)),
-    onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
     ref: notificationPanelInnerRef
@@ -479,6 +487,16 @@ NotificationsPanel.propTypes = {
     unread: PropTypes.bool,
     onNotificationClick: PropTypes.func
   })).isRequired,
+  /**
+   * The language for each notification's time stamp.
+   */
+  dateTimeLocale: PropTypes.string,
+  /**
+   * The date/time format for each notification's time stamp.
+   *
+   * E.g. `long` as "6 minutes ago", `short` as "6m ago".
+   */
+  dateTimeStyle: PropTypes.string,
   /**
    * Sets the `days ago` label text
    */

package/es/components/OptionsTile/OptionsTile.js

@@ -38,7 +38,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     onToggle = props.onToggle,
     userOpen = props.open,
     _props$size = props.size,
-    size = _props$size === undefined ? defaults.size : _props$size,
+    size = _props$size === void 0 ? defaults.size : _props$size,
     summary = props.summary,
     title = props.title,
     userDefinedTitleId = props.titleId,
@@ -49,13 +49,13 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     closing = _useState2[0],
     setClosing = _useState2[1];
-  var _useControllableState = useControllableState(userOpen !== null && userOpen !== undefined ? userOpen : false, onChange),
+  var _useControllableState = useControllableState(userOpen !== null && userOpen !== void 0 ? userOpen : false, onChange),
     _useControllableState2 = _slicedToArray(_useControllableState, 2),
     open = _useControllableState2[0],
     setOpen = _useControllableState2[1];
   var detailsRef = useRef(null);
   var contentRef = useRef(null);
-  var titleId = userDefinedTitleId !== null && userDefinedTitleId !== undefined ? userDefinedTitleId : "".concat(uuidv4(), "-title");
+  var titleId = userDefinedTitleId !== null && userDefinedTitleId !== void 0 ? userDefinedTitleId : "".concat(uuidv4(), "-title");
   var isExpandable = children !== undefined;
   var isWarn = !invalid && warn;
   var isLocked = !invalid && !isWarn && locked;
@@ -177,6 +177,7 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     size: "sm",
     disabled: isLocked
   })), isExpandable ? /*#__PURE__*/React__default.createElement("details", {
+    className: "".concat(blockClass, "__details"),
     open: open,
     ref: detailsRef
   }, /*#__PURE__*/React__default.createElement("summary", {

package/es/components/PageHeader/PageHeader.js

@@ -58,10 +58,10 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     enableBreadcrumbScroll = _ref.enableBreadcrumbScroll,
     expandHeaderIconDescription = _ref.expandHeaderIconDescription,
     _ref$fullWidthGrid = _ref.fullWidthGrid,
-    fullWidthGrid = _ref$fullWidthGrid === undefined ? defaults.fullWidthGrid : _ref$fullWidthGrid,
+    fullWidthGrid = _ref$fullWidthGrid === void 0 ? defaults.fullWidthGrid : _ref$fullWidthGrid,
     hasCollapseHeaderToggle = _ref.hasCollapseHeaderToggle,
     _ref$narrowGrid = _ref.narrowGrid,
-    narrowGrid = _ref$narrowGrid === undefined ? defaults.narrowGrid : _ref$narrowGrid,
+    narrowGrid = _ref$narrowGrid === void 0 ? defaults.narrowGrid : _ref$narrowGrid,
     navigation = _ref.navigation,
     pageActions = _ref.pageActions,
     pageActionsOverflowLabel = _ref.pageActionsOverflowLabel,
@@ -72,20 +72,20 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     title = _ref.title,
     withoutBackground = _ref.withoutBackground,
     _ref$breadcrumbOverfl = _ref.breadcrumbOverflowTooltipAlign,
-    breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === undefined ? defaults.breadcrumbOverflowTooltipAlign : _ref$breadcrumbOverfl,
+    breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === void 0 ? defaults.breadcrumbOverflowTooltipAlign : _ref$breadcrumbOverfl,
     rest = _objectWithoutProperties(_ref, _excluded);
   // handle deprecated props - START
   // if withoutBackground is nullish check deprecated_hasBackgroundAlways and default false
-  withoutBackground !== null && withoutBackground !== undefined ? withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== undefined ? deprecated_hasBackgroundAlways : true);
+  withoutBackground !== null && withoutBackground !== void 0 ? withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== void 0 ? deprecated_hasBackgroundAlways : true);
   // prefer enabled if nullish check deprecated_disableBreadcrumbScroll and default false
-  enableBreadcrumbScroll !== null && enableBreadcrumbScroll !== undefined ? enableBreadcrumbScroll : enableBreadcrumbScroll = !(deprecated_disableBreadcrumbScroll !== null && deprecated_disableBreadcrumbScroll !== undefined ? deprecated_disableBreadcrumbScroll : true);
+  enableBreadcrumbScroll !== null && enableBreadcrumbScroll !== void 0 ? enableBreadcrumbScroll : enableBreadcrumbScroll = !(deprecated_disableBreadcrumbScroll !== null && deprecated_disableBreadcrumbScroll !== void 0 ? deprecated_disableBreadcrumbScroll : true);
   // handle deprecated props - END
 
   var _useState = useState({}),
     _useState2 = _slicedToArray(_useState, 2),
     metrics = _useState2[0],
     setMetrics = _useState2[1];
-  var _useState3 = useState(_objectSpread2({}, rest === null || rest === undefined ? undefined : rest.style)),
+  var _useState3 = useState(_objectSpread2({}, rest === null || rest === void 0 ? void 0 : rest.style)),
     _useState4 = _slicedToArray(_useState3, 2),
     pageHeaderStyles = _useState4[0],
     setPageHeaderStyles = _useState4[1];
@@ -100,7 +100,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   // state based on props only
   var hasActionBar = actionBarItems && actionBarItems.length > 0;
   var hasBreadcrumbRow = !!breadcrumbs || !!actionBarItems;
-  if (tags && (tags === null || tags === undefined ? undefined : tags.length) > 10) {
+  if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 10) {
     if (!allTagsModalSearchLabel) {
       throw new Error("allTagsModalSearchLabel' is required.");
     }
@@ -178,7 +178,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     if (minWidth !== actionBarMinWidth || maxWidth !== actionBarMaxWidth) {
       var _overflowMenuRef$curr;
       var overflowMenuWidth = 0;
-      var overflowMenu = overflowMenuRef === null || overflowMenuRef === undefined || (_overflowMenuRef$curr = overflowMenuRef.current) === null || _overflowMenuRef$curr === undefined ? undefined : _overflowMenuRef$curr.querySelector(".".concat(prefix, "--overflow-menu"));
+      var overflowMenu = overflowMenuRef === null || overflowMenuRef === void 0 || (_overflowMenuRef$curr = overflowMenuRef.current) === null || _overflowMenuRef$curr === void 0 ? void 0 : _overflowMenuRef$curr.querySelector(".".concat(prefix, "--overflow-menu"));
       if (overflowMenu) {
         overflowMenuWidth = overflowMenu.offsetWidth;
       }
@@ -218,13 +218,13 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     checkUpdateVerticalSpace();
   };
   var handleCollapseToggle = function handleCollapseToggle() {
-    utilSetCollapsed(!fullyCollapsed, headerRef, metrics === null || metrics === undefined ? undefined : metrics.headerOffset, metrics === null || metrics === undefined ? undefined : metrics.headerTopValue);
+    utilSetCollapsed(!fullyCollapsed, headerRef, metrics === null || metrics === void 0 ? void 0 : metrics.headerOffset, metrics === null || metrics === void 0 ? void 0 : metrics.headerTopValue);
   };
 
   // use effects
   useEffect(function () {
     /* istanbul ignore else */
-    if (pageActions !== null && pageActions !== undefined && pageActions.content) {
+    if (pageActions !== null && pageActions !== void 0 && pageActions.content) {
       var _ref5 = pageActions,
         minWidth = _ref5.minWidth,
         maxWidth = _ref5.maxWidth;
@@ -237,8 +237,8 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   useEffect(function () {
     // Determine the location of the pageAction buttons
     /* istanbul ignore next */
-    if (metrics !== null && metrics !== undefined && metrics.titleRowSpaceAbove && metrics !== null && metrics !== undefined && metrics.pageActionsSpaceAbove) {
-      setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && scrollYValue > (metrics === null || metrics === undefined ? undefined : metrics.titleRowSpaceAbove) || widthIsNarrow && scrollYValue > (metrics === null || metrics === undefined ? undefined : metrics.pageActionsSpaceAbove));
+    if (metrics !== null && metrics !== void 0 && metrics.titleRowSpaceAbove && metrics !== null && metrics !== void 0 && metrics.pageActionsSpaceAbove) {
+      setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && scrollYValue > (metrics === null || metrics === void 0 ? void 0 : metrics.titleRowSpaceAbove) || widthIsNarrow && scrollYValue > (metrics === null || metrics === void 0 ? void 0 : metrics.pageActionsSpaceAbove));
     }
   }, [hasActionBar, metrics.breadcrumbRowSpaceBelow, metrics.titleRowSpaceAbove, metrics.pageActionsSpaceAbove, collapseTitle, scrollYValue, widthIsNarrow]);
   useEffect(function () {
@@ -272,8 +272,8 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     // Updates custom CSS props used to manage scroll behavior
     /* istanbul ignore next */
     setPageHeaderStyles(function (prev) {
-      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(blockClass, "--header-top"), "".concat(((metrics === null || metrics === undefined ? undefined : metrics.headerTopValue) || 0) + ((metrics === null || metrics === undefined ? undefined : metrics.headerOffset) || 0), "px")), "--".concat(blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(blockClass, "--breadcrumb-title-top"), "".concat(metrics.breadcrumbTitleHeight && metrics.titleRowSpaceAbove && Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(blockClass, "--breadcrumb-title-opacity"), "".concat(Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
-      )))), "--".concat(blockClass, "--breadcrumb-row-width-px"), "".concat(metrics === null || metrics === undefined ? undefined : metrics.breadcrumbRowWidth, "px")));
+      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(blockClass, "--header-top"), "".concat(((metrics === null || metrics === void 0 ? void 0 : metrics.headerTopValue) || 0) + ((metrics === null || metrics === void 0 ? void 0 : metrics.headerOffset) || 0), "px")), "--".concat(blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(blockClass, "--breadcrumb-title-top"), "".concat(metrics.breadcrumbTitleHeight && metrics.titleRowSpaceAbove && Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(blockClass, "--breadcrumb-title-opacity"), "".concat(Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
+      )))), "--".concat(blockClass, "--breadcrumb-row-width-px"), "".concat(metrics === null || metrics === void 0 ? void 0 : metrics.breadcrumbRowWidth, "px")));
     });
   }, [headerRef, enableBreadcrumbScroll, metrics, metrics.breadcrumbRowHeight, metrics.breadcrumbRowSpaceBelow, metrics.breadcrumbTitleHeight, metrics.breadcrumbRowWidth, metrics.headerHeight, metrics.headerWidth, metrics.headerOffset, metrics.headerTopValue, metrics.navigationRowHeight, navigation, scrollYValue, tags]);
   useNearestScroll(headerRef,
@@ -289,7 +289,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
     // set offset for tagset tooltip
     /* istanbul ignore next */
-    var tagsetTooltipOffset = fullyCollapsed && metrics !== null && metrics !== undefined && metrics.headerHeight && metrics !== null && metrics !== undefined && metrics.headerTopValue && metrics !== null && metrics !== undefined && metrics.headerOffset ? metrics.headerHeight + metrics.headerTopValue + metrics.headerOffset : (metrics.headerHeight || 0) + (metrics.headerOffset || 0);
+    var tagsetTooltipOffset = fullyCollapsed && metrics !== null && metrics !== void 0 && metrics.headerHeight && metrics !== null && metrics !== void 0 && metrics.headerTopValue && metrics !== null && metrics !== void 0 && metrics.headerOffset ? metrics.headerHeight + metrics.headerTopValue + metrics.headerOffset : (metrics.headerHeight || 0) + (metrics.headerOffset || 0);
 
     /* istanbul ignore next */
     document.documentElement.style.setProperty("--".concat(blockClass, "--tagset-tooltip-position"), fullyCollapsed ? 'fixed' : 'absolute');
@@ -309,14 +309,14 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   useEffect(function () {
     // Determines the appropriate header background opacity based on the header config/height/scroll and the withoutBackground setting
     var result = withoutBackground ? 0 : 1;
-    if (!result && metrics !== null && metrics !== undefined && metrics.headerHeight && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
+    if (!result && metrics !== null && metrics !== void 0 && metrics.headerHeight && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
       var startAddingAt = parseFloat("".concat(spacing[9])) * parseInt("".concat(baseFontSize));
       var scrollRemaining = metrics.headerHeight - scrollYValue;
 
       /* don't know how to test resize */
       /* istanbul ignore if */
       if (scrollRemaining < startAddingAt) {
-        var distanceAddingOver = startAddingAt - ((metrics === null || metrics === undefined ? undefined : metrics.breadcrumbRowHeight) || 0);
+        var distanceAddingOver = startAddingAt - ((metrics === null || metrics === void 0 ? void 0 : metrics.breadcrumbRowHeight) || 0);
         result = Math.min(1, (startAddingAt - scrollRemaining) / distanceAddingOver);
       }
     }
@@ -332,7 +332,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, [withoutBackground, hasCollapseHeaderToggle]);
   useEffect(function () {
     // Determine if space is needed in the breadcrumb for a collapse button
-    if (hasCollapseButton && !(navigation || tags) && metrics !== null && metrics !== undefined && metrics.headerHeight) {
+    if (hasCollapseButton && !(navigation || tags) && metrics !== null && metrics !== void 0 && metrics.headerHeight) {
       setSpaceForCollapseButton(true);
     } else {
       setSpaceForCollapseButton(false);
@@ -502,7 +502,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         className: cx("".concat(blockClass, "__page-actions"), _defineProperty({}, "".concat(blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
       }, /*#__PURE__*/React__default.createElement("div", {
         className: cx("".concat(blockClass, "__page-actions-content"))
-      }, (_content = pageActions === null || pageActions === undefined ? undefined : pageActions.content) !== null && _content !== undefined ? _content : /*#__PURE__*/React__default.createElement(ButtonSetWithOverflow, {
+      }, (_content = pageActions === null || pageActions === void 0 ? void 0 : pageActions.content) !== null && _content !== void 0 ? _content : /*#__PURE__*/React__default.createElement(ButtonSetWithOverflow, {
         className: "".concat(blockClass, "__button-set-with-overflow"),
         menuOptionsClass: cx(pageActionsMenuOptionsClass, "".concat(blockClass, "__button-set-menu-options")),
         onWidthChange: handleWidthChange,

package/es/components/PageHeader/PageHeaderTitle.js

@@ -40,7 +40,7 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
     cancelDescription = title.cancelDescription,
     saveDescription = title.saveDescription,
     _title$tooltipAlignme = title.tooltipAlignment,
-    tooltipAlignment = _title$tooltipAlignme === undefined ? 'bottom' : _title$tooltipAlignme,
+    tooltipAlignment = _title$tooltipAlignme === void 0 ? 'bottom' : _title$tooltipAlignme,
     rest = _objectWithoutProperties(title, _excluded);
   var titleText;
   var isEditable = !!onSave;

package/es/components/PageHeader/PageHeaderUtils.js

@@ -163,7 +163,7 @@ var utilGetBreadcrumbItemForTitle = function utilGetBreadcrumbItemForTitle(block
       var _ref, _title$breadcrumbCont;
       // user defined content
       breadcrumbTitle = {
-        label: (_ref = (_title$breadcrumbCont = title.breadcrumbContent) !== null && _title$breadcrumbCont !== undefined ? _title$breadcrumbCont : title.content) !== null && _ref !== undefined ? _ref : title.asText,
+        label: (_ref = (_title$breadcrumbCont = title.breadcrumbContent) !== null && _title$breadcrumbCont !== void 0 ? _title$breadcrumbCont : title.content) !== null && _ref !== void 0 ? _ref : title.asText,
         title: title.asText
       };
     } else {

package/es/components/ProductiveCard/ProductiveCard.js

@@ -17,7 +17,7 @@ var _excluded = ["actionsPlacement"];
 var componentName = 'ProductiveCard';
 var ProductiveCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$actionsPlacement = _ref.actionsPlacement,
-    actionsPlacement = _ref$actionsPlacement === undefined ? 'top' : _ref$actionsPlacement,
+    actionsPlacement = _ref$actionsPlacement === void 0 ? 'top' : _ref$actionsPlacement,
     rest = _objectWithoutProperties(_ref, _excluded);
   var validProps = prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
   return /*#__PURE__*/React__default.createElement(Card, _extends({}, _objectSpread2(_objectSpread2({}, validProps), {}, {

package/es/components/RemoveModal/RemoveModal.js

@@ -74,10 +74,10 @@ var RemoveModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // the value of the input will still remain: we only want to empty the input value
   // when open actually changes to false.
   useEffect(function () {
-    if (!open && previousState !== null && previousState !== undefined && previousState.open) {
+    if (!open && previousState !== null && previousState !== void 0 && previousState.open) {
       setUserInput('');
     }
-  }, [open, previousState === null || previousState === undefined ? undefined : previousState.open]);
+  }, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
   return renderPortalUse(/*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
     className: cx(blockClass, className),
     size: "sm",

package/es/components/Saving/Saving.js

@@ -81,7 +81,7 @@ var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
     size: 16
   }))), /*#__PURE__*/React__default.createElement("p", {
     className: "".concat(blockClass, "__text")
-  }, (_statusObj$status = statusObj[status]) === null || _statusObj$status === undefined ? undefined : _statusObj$status.text)) : /*#__PURE__*/React__default.createElement("div", {
+  }, (_statusObj$status = statusObj[status]) === null || _statusObj$status === void 0 ? void 0 : _statusObj$status.text)) : /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__buttons")
   }, /*#__PURE__*/React__default.createElement(Button, {
     onClick: onRequestCancel,
@@ -91,11 +91,11 @@ var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, secondaryButtonText), /*#__PURE__*/React__default.createElement(Button, {
     onClick: onRequestSave,
     kind: "primary",
-    renderIcon: (_statusObj$status2 = statusObj[status]) === null || _statusObj$status2 === undefined ? undefined : _statusObj$status2.icon,
-    iconDescription: (_statusObj$status3 = statusObj[status]) === null || _statusObj$status3 === undefined ? undefined : _statusObj$status3.iconDescription,
+    renderIcon: (_statusObj$status2 = statusObj[status]) === null || _statusObj$status2 === void 0 ? void 0 : _statusObj$status2.icon,
+    iconDescription: (_statusObj$status3 = statusObj[status]) === null || _statusObj$status3 === void 0 ? void 0 : _statusObj$status3.iconDescription,
     disabled: status === 'in-progress',
     type: "button"
-  }, (_statusObj$status4 = statusObj[status]) === null || _statusObj$status4 === undefined ? undefined : _statusObj$status4.text)));
+  }, (_statusObj$status4 = statusObj[status]) === null || _statusObj$status4 === void 0 ? void 0 : _statusObj$status4.text)));
 });
 Saving = pkg.checkComponentEnabled(Saving, componentName);
 Saving.propTypes = {

package/es/components/ScrollGradient/ScrollGradient.js

@@ -33,14 +33,14 @@ var ScrollGradient = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var children = _ref.children,
     className = _ref.className,
     _ref$color = _ref.color,
-    color = _ref$color === undefined ? defaults.color : _ref$color,
+    color = _ref$color === void 0 ? defaults.color : _ref$color,
     _ref$onScroll = _ref.onScroll,
-    onScroll = _ref$onScroll === undefined ? defaults.onScroll : _ref$onScroll,
+    onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
     scrollElementClassName = _ref.scrollElementClassName,
     _ref$getScrollElement = _ref.getScrollElementRef,
-    getScrollElementRef = _ref$getScrollElement === undefined ? defaults.getScrollElementRef : _ref$getScrollElement,
+    getScrollElementRef = _ref$getScrollElement === void 0 ? defaults.getScrollElementRef : _ref$getScrollElement,
     _ref$hideStartGradien = _ref.hideStartGradient,
-    hideStartGradient = _ref$hideStartGradien === undefined ? defaults.hideStartGradient : _ref$hideStartGradien,
+    hideStartGradient = _ref$hideStartGradien === void 0 ? defaults.hideStartGradient : _ref$hideStartGradien,
     rest = _objectWithoutProperties(_ref, _excluded);
   var intersectionStartRef = useRef();
   var intersectionEndRef = useRef();
@@ -84,11 +84,11 @@ var ScrollGradient = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       if (entry.isIntersecting) {
         gradientRef.current.style.opacity = 0;
         gradientRef.current.style.display = 'none';
-        gradientRef === null || gradientRef === undefined || gradientRef.current.setAttribute('aria-hidden', false);
+        gradientRef === null || gradientRef === void 0 || gradientRef.current.setAttribute('aria-hidden', false);
       } else {
         gradientRef.current.style.opacity = 1;
         gradientRef.current.style.display = 'block';
-        gradientRef === null || gradientRef === undefined || gradientRef.current.setAttribute('aria-hidden', true);
+        gradientRef === null || gradientRef === void 0 || gradientRef.current.setAttribute('aria-hidden', true);
       }
     }
   };