@kaizen/components 1.61.2 → 1.62.0

package/codemods/README.md

@@ -33,4 +33,3 @@ kaizen-codemod src migrateWellVariantToColor
 - `migrateWellVariantToColor`: Migrates `Well` component prop from `variant` to `color`
 - `removeInputEditModalMood`: Removes `InputEditModal` component prop `mood`
 - `removePopoverVariant`: Removes `Popover` component props `variant` and `customIcon`
-- `updateGuidanceBlockVariantProp`: Updates `GuidanceBlock` import location and updates `variant` prop to `default` or `expert-advice`

package/dist/cjs/{__containers__/GuidanceBlock/v2 → GuidanceBlock}/GuidanceBlock.cjs

@@ -4,13 +4,13 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var Media = require('react-media');
-var Heading = require('../../../Heading/Heading.cjs');
-require('../../../Icon/subcomponents/SVG/SVG.cjs');
-var ArrowForwardIcon = require('../../../Icon/ArrowForwardIcon.cjs');
-var Text = require('../../../Text/Text.cjs');
-var index = require('../../../__overlays__/Tooltip/v1/index.cjs');
+var Heading = require('../Heading/Heading.cjs');
+require('../Icon/subcomponents/SVG/SVG.cjs');
+var ArrowForwardIcon = require('../Icon/ArrowForwardIcon.cjs');
+var Text = require('../Text/Text.cjs');
+var index = require('../__overlays__/Tooltip/v1/index.cjs');
 var GuidanceBlock_module = require('./GuidanceBlock.module.scss.cjs');
-var Button = require('../../../__actions__/Button/v1/Button/Button.cjs');
+var Button = require('../__actions__/Button/v1/Button/Button.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/GuidanceBlock/GuidanceBlock.module.scss.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var styles = {
+  "rightMargin": "GuidanceBlock-module_rightMargin__-iEFa",
+  "noRightMargin": "GuidanceBlock-module_noRightMargin__4Uy9N",
+  "banner": "GuidanceBlock-module_banner__FxKcd",
+  "noMaxWidth": "GuidanceBlock-module_noMaxWidth__UzHP1",
+  "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__AEljX",
+  "illustration": "GuidanceBlock-module_illustration__sU1Vu",
+  "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__tvFRD",
+  "descriptionContainer": "GuidanceBlock-module_descriptionContainer__aywtY",
+  "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__E5BcL",
+  "buttonContainer": "GuidanceBlock-module_buttonContainer__U2Hxn",
+  "hidden": "GuidanceBlock-module_hidden__CbgXn",
+  "headingWrapper": "GuidanceBlock-module_headingWrapper__zgVmA",
+  "cancel": "GuidanceBlock-module_cancel__UaIA-",
+  "icon": "GuidanceBlock-module_icon__y2xz8",
+  "disabled": "GuidanceBlock-module_disabled__Uhgsr",
+  "hover": "GuidanceBlock-module_hover__7V9x1",
+  "active": "GuidanceBlock-module_active__YJaZt",
+  "default": "GuidanceBlock-module_default__Ffblg",
+  "positive": "GuidanceBlock-module_positive__yENlT",
+  "negative": "GuidanceBlock-module_negative__E-Jvh",
+  "assertive": "GuidanceBlock-module_assertive__6PZlM",
+  "informative": "GuidanceBlock-module_informative__ZUH4j",
+  "cautionary": "GuidanceBlock-module_cautionary__sJ1CE",
+  "prominent": "GuidanceBlock-module_prominent__nn-r4",
+  "inline": "GuidanceBlock-module_inline__GwOWR",
+  "stacked": "GuidanceBlock-module_stacked__rDupX",
+  "centerContent": "GuidanceBlock-module_centerContent__m3IhB",
+  "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__oWufj"
+};
+module.exports = styles;

package/dist/cjs/Modal/ConfirmationModal/ConfirmationModal.cjs

@@ -128,7 +128,7 @@ var ConfirmationModal = function (_a) {
     className: classnames__default.default(isProminent && ConfirmationModal_module.prominent, !unpadded && ConfirmationModal_module.padded)
   }, React__default.default.createElement(ModalAccessibleDescription.ModalAccessibleDescription, null, children))), React__default.default.createElement(ModalFooter.ModalFooter, {
     actions: footerActions,
-    appearance: mood === "negative" ? "destructive" : "primary",
+    appearance: mood === "negative" || variant == "warning" ? "destructive" : "primary",
     unpadded: unpadded
   })));
 };

package/dist/cjs/__future__/Select/Select.cjs

@@ -121,12 +121,7 @@ var Select = function (_a) {
   }, trigger === undefined ? React__default.default.createElement(SelectToggle.SelectToggle, tslib.__assign({}, selectToggleProps)) : trigger(selectToggleProps, selectToggleProps.ref), state.isOpen && React__default.default.createElement(Popover.Popover, {
     id: popoverId,
     portalContainer: portalContainer,
-    refs: refs,
-    focusOnProps: {
-      onEscapeKey: state.close,
-      onClickOutside: state.close,
-      noIsolation: true
-    }
+    refs: refs
   }, React__default.default.createElement(SelectContext.SelectProvider, {
     state: state
   }, React__default.default.createElement(SelectPopoverContents.SelectPopoverContents, {

package/dist/cjs/__future__/Select/subcomponents/ListBox/ListBox.cjs

@@ -21,8 +21,7 @@ var ListBox = function (_a) {
   var state = SelectContext.useSelectContext().state;
   var ref = React__default.default.useRef(null);
   var listBoxProps = listbox.useListBox(tslib.__assign(tslib.__assign({}, menuProps), {
-    disallowEmptySelection: true,
-    autoFocus: "first"
+    disallowEmptySelection: true
   }), state, ref).listBoxProps;
   return React__default.default.createElement("ul", tslib.__assign({
     ref: ref,

package/dist/cjs/__future__/Select/subcomponents/ListBox/ListBox.module.scss.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var styles = {
-  "listBox": "ListBox-module_listBox__Uf6Mc",
-  "focus": "ListBox-module_focus__yrwu3"
+  "listBox": "ListBox-module_listBox__Uf6Mc"
 };
 module.exports = styles;

package/dist/cjs/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.cjs

@@ -89,10 +89,8 @@ var ProgressStepper = function (_a) {
     }, Icon)), index < steps.length - 1 && React__default.default.createElement("div", {
       className: classnames__default.default([ProgressStepper_module.stepDivider, isCompletedStep && ProgressStepper_module.completedStep])
     })));
-  })), React__default.default.createElement(Text.Text, {
-    classNameOverride: ProgressStepper_module.stepperDescription,
-    variant: "small",
-    color: "white",
+  })), React__default.default.createElement("span", {
+    className: ProgressStepper_module.stepperDescription,
     id: "stepper-description"
   }, "Step ", currentStepIndex + 1, " of ", steps.length));
 };

package/dist/cjs/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.cjs

@@ -89,9 +89,8 @@ var ProgressStepper = function (_a) {
     }, Icon)), index < steps.length - 1 && React__default.default.createElement("div", {
       className: classnames__default.default([ProgressStepper_module.stepDivider, isCompletedStep && ProgressStepper_module.completedStep])
     })));
-  })), React__default.default.createElement(Text.Text, {
-    classNameOverride: ProgressStepper_module.stepperDescription,
-    variant: "small",
+  })), React__default.default.createElement("span", {
+    className: ProgressStepper_module.stepperDescription,
     id: "stepper-description"
   }, "Step ", currentStepIndex + 1, " of ", steps.length));
 };

package/dist/cjs/index.cjs

@@ -60,6 +60,7 @@ var getTruncatedLabel = require('./Filter/FilterMultiSelect/utils/getTruncatedLa
 var getSelectedOptionLabels = require('./Filter/FilterMultiSelect/utils/getSelectedOptionLabels.cjs');
 var getSelectedOptionKeys = require('./Filter/FilterMultiSelect/utils/getSelectedOptionKeys.cjs');
 var FilterSelect = require('./Filter/FilterSelect/FilterSelect.cjs');
+var GuidanceBlock = require('./GuidanceBlock/GuidanceBlock.cjs');
 var Heading = require('./Heading/Heading.cjs');
 var AcademyIcon = require('./Icon/AcademyIcon.cjs');
 var ActionOffIcon = require('./Icon/ActionOffIcon.cjs');
@@ -410,7 +411,6 @@ var index$1 = require('./__overlays__/Tooltip/v1/index.cjs');
 var index$2 = require('./__actions__/Menu/v1/index.cjs');
 var Button = require('./__actions__/Button/v1/Button/Button.cjs');
 var IconButton = require('./__actions__/Button/v1/IconButton/IconButton.cjs');
-var GuidanceBlock = require('./__containers__/GuidanceBlock/v1/GuidanceBlock.cjs');
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -504,6 +504,7 @@ exports.getTruncatedLabels = getTruncatedLabel.getTruncatedLabels;
 exports.getSelectedOptionLabels = getSelectedOptionLabels.getSelectedOptionLabels;
 exports.getSelectedOptionKeys = getSelectedOptionKeys.getSelectedOptionKeys;
 exports.FilterSelect = FilterSelect.FilterSelect;
+exports.GuidanceBlock = GuidanceBlock.GuidanceBlock;
 exports.Heading = Heading.Heading;
 exports.AcademyIcon = AcademyIcon.AcademyIcon;
 exports.ActionOffIcon = ActionOffIcon.ActionOffIcon;
@@ -1045,4 +1046,3 @@ exports.MenuList = index$2.MenuList;
 exports.StatelessMenu = index$2.StatelessMenu;
 exports.Button = Button.Button;
 exports.IconButton = IconButton.IconButton;
-exports.GuidanceBlock = GuidanceBlock.GuidanceBlock;

package/dist/esm/{__containers__/GuidanceBlock/v2 → GuidanceBlock}/GuidanceBlock.mjs

@@ -2,13 +2,13 @@ import { __rest, __assign } from 'tslib';
 import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import Media from 'react-media';
-import { Heading } from '../../../Heading/Heading.mjs';
-import '../../../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowForwardIcon } from '../../../Icon/ArrowForwardIcon.mjs';
-import { Text } from '../../../Text/Text.mjs';
-import { Tooltip } from '../../../__overlays__/Tooltip/v1/index.mjs';
+import { Heading } from '../Heading/Heading.mjs';
+import '../Icon/subcomponents/SVG/SVG.mjs';
+import { ArrowForwardIcon } from '../Icon/ArrowForwardIcon.mjs';
+import { Text } from '../Text/Text.mjs';
+import { Tooltip } from '../__overlays__/Tooltip/v1/index.mjs';
 import styles from './GuidanceBlock.module.scss.mjs';
-import { Button } from '../../../__actions__/Button/v1/Button/Button.mjs';
+import { Button } from '../__actions__/Button/v1/Button/Button.mjs';
 var WithTooltip = function (_a) {
   var tooltipProps = _a.tooltipProps,
     children = _a.children;

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

@@ -0,0 +1,31 @@
+var styles = {
+  "rightMargin": "GuidanceBlock-module_rightMargin__-iEFa",
+  "noRightMargin": "GuidanceBlock-module_noRightMargin__4Uy9N",
+  "banner": "GuidanceBlock-module_banner__FxKcd",
+  "noMaxWidth": "GuidanceBlock-module_noMaxWidth__UzHP1",
+  "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__AEljX",
+  "illustration": "GuidanceBlock-module_illustration__sU1Vu",
+  "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__tvFRD",
+  "descriptionContainer": "GuidanceBlock-module_descriptionContainer__aywtY",
+  "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__E5BcL",
+  "buttonContainer": "GuidanceBlock-module_buttonContainer__U2Hxn",
+  "hidden": "GuidanceBlock-module_hidden__CbgXn",
+  "headingWrapper": "GuidanceBlock-module_headingWrapper__zgVmA",
+  "cancel": "GuidanceBlock-module_cancel__UaIA-",
+  "icon": "GuidanceBlock-module_icon__y2xz8",
+  "disabled": "GuidanceBlock-module_disabled__Uhgsr",
+  "hover": "GuidanceBlock-module_hover__7V9x1",
+  "active": "GuidanceBlock-module_active__YJaZt",
+  "default": "GuidanceBlock-module_default__Ffblg",
+  "positive": "GuidanceBlock-module_positive__yENlT",
+  "negative": "GuidanceBlock-module_negative__E-Jvh",
+  "assertive": "GuidanceBlock-module_assertive__6PZlM",
+  "informative": "GuidanceBlock-module_informative__ZUH4j",
+  "cautionary": "GuidanceBlock-module_cautionary__sJ1CE",
+  "prominent": "GuidanceBlock-module_prominent__nn-r4",
+  "inline": "GuidanceBlock-module_inline__GwOWR",
+  "stacked": "GuidanceBlock-module_stacked__rDupX",
+  "centerContent": "GuidanceBlock-module_centerContent__m3IhB",
+  "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__oWufj"
+};
+export { styles as default };

package/dist/esm/Modal/ConfirmationModal/ConfirmationModal.mjs

@@ -120,7 +120,7 @@ const ConfirmationModal = /*#__PURE__*/function () {
       className: classnames(isProminent && styles.prominent, !unpadded && styles.padded)
     }, /*#__PURE__*/React.createElement(ModalAccessibleDescription, null, children))), /*#__PURE__*/React.createElement(ModalFooter, {
       actions: footerActions,
-      appearance: mood === "negative" ? "destructive" : "primary",
+      appearance: mood === "negative" || variant == "warning" ? "destructive" : "primary",
       unpadded: unpadded
     })));
   };

package/dist/esm/__future__/Select/Select.mjs

@@ -113,12 +113,7 @@ const Select = /*#__PURE__*/function () {
     }, trigger === undefined ? ( /*#__PURE__*/React.createElement(SelectToggle, __assign({}, selectToggleProps))) : trigger(selectToggleProps, selectToggleProps.ref), state.isOpen && ( /*#__PURE__*/React.createElement(Popover, {
       id: popoverId,
       portalContainer: portalContainer,
-      refs: refs,
-      focusOnProps: {
-        onEscapeKey: state.close,
-        onClickOutside: state.close,
-        noIsolation: true
-      }
+      refs: refs
     }, /*#__PURE__*/React.createElement(SelectProvider, {
       state: state
     }, /*#__PURE__*/React.createElement(SelectPopoverContents, {

package/dist/esm/__future__/Select/subcomponents/ListBox/ListBox.mjs

@@ -13,8 +13,7 @@ const ListBox = /*#__PURE__*/function () {
     var state = useSelectContext().state;
     var ref = React.useRef(null);
     var listBoxProps = useListBox(__assign(__assign({}, menuProps), {
-      disallowEmptySelection: true,
-      autoFocus: "first"
+      disallowEmptySelection: true
     }), state, ref).listBoxProps;
     return /*#__PURE__*/React.createElement("ul", __assign({
       ref: ref,

package/dist/esm/__future__/Select/subcomponents/ListBox/ListBox.module.scss.mjs

@@ -1,5 +1,4 @@
 var styles = {
-  "listBox": "ListBox-module_listBox__Uf6Mc",
-  "focus": "ListBox-module_focus__yrwu3"
+  "listBox": "ListBox-module_listBox__Uf6Mc"
 };
 export { styles as default };

package/dist/esm/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.mjs

@@ -81,10 +81,8 @@ const ProgressStepper = /*#__PURE__*/function () {
       }, Icon)), index < steps.length - 1 && ( /*#__PURE__*/React.createElement("div", {
         className: classnames([styles.stepDivider, isCompletedStep && styles.completedStep])
       }))));
-    })), /*#__PURE__*/React.createElement(Text, {
-      classNameOverride: styles.stepperDescription,
-      variant: "small",
-      color: "white",
+    })), /*#__PURE__*/React.createElement("span", {
+      className: styles.stepperDescription,
       id: "stepper-description"
     }, "Step ", currentStepIndex + 1, " of ", steps.length));
   };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.mjs

@@ -81,9 +81,8 @@ const ProgressStepper = /*#__PURE__*/function () {
       }, Icon)), index < steps.length - 1 && ( /*#__PURE__*/React.createElement("div", {
         className: classnames([styles.stepDivider, isCompletedStep && styles.completedStep])
       }))));
-    })), /*#__PURE__*/React.createElement(Text, {
-      classNameOverride: styles.stepperDescription,
-      variant: "small",
+    })), /*#__PURE__*/React.createElement("span", {
+      className: styles.stepperDescription,
       id: "stepper-description"
     }, "Step ", currentStepIndex + 1, " of ", steps.length));
   };

package/dist/esm/index.mjs

@@ -58,6 +58,7 @@ export { getTruncatedLabels } from './Filter/FilterMultiSelect/utils/getTruncate
 export { getSelectedOptionLabels } from './Filter/FilterMultiSelect/utils/getSelectedOptionLabels.mjs';
 export { getSelectedOptionKeys } from './Filter/FilterMultiSelect/utils/getSelectedOptionKeys.mjs';
 export { FilterSelect } from './Filter/FilterSelect/FilterSelect.mjs';
+export { GuidanceBlock } from './GuidanceBlock/GuidanceBlock.mjs';
 export { Heading } from './Heading/Heading.mjs';
 export { AcademyIcon } from './Icon/AcademyIcon.mjs';
 export { ActionOffIcon } from './Icon/ActionOffIcon.mjs';
@@ -415,4 +416,3 @@ export { Tooltip } from './__overlays__/Tooltip/v1/index.mjs';
 export { Menu, MenuHeading, MenuItem, MenuList, StatelessMenu } from './__actions__/Menu/v1/index.mjs';
 export { Button } from './__actions__/Button/v1/Button/Button.mjs';
 export { IconButton } from './__actions__/Button/v1/IconButton/IconButton.mjs';
-export { GuidanceBlock } from './__containers__/GuidanceBlock/v1/GuidanceBlock.mjs';