@kaizen/components 1.67.18 → 1.67.19

package/dist/cjs/GuidanceBlock/GuidanceBlock.cjs

@@ -8,7 +8,7 @@ var Heading = require('../Heading/Heading.cjs');
 var Text = require('../Text/Text.cjs');
 var Icon = require('../__future__/Icon/Icon.cjs');
 var index = require('../__overlays__/Tooltip/v1/index.cjs');
-var GuidanceBlock_module = require('./GuidanceBlock.module.scss.cjs');
+var GuidanceBlock_module = require('./GuidanceBlock.module.css.cjs');
 var Button = require('../__actions__/Button/v1/Button/Button.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {

package/dist/cjs/GuidanceBlock/GuidanceBlock.module.css.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var styles = {
+  "rightMargin": "GuidanceBlock-module_rightMargin__T6JO2",
+  "noRightMargin": "GuidanceBlock-module_noRightMargin__MczwN",
+  "banner": "GuidanceBlock-module_banner__7FT39",
+  "noMaxWidth": "GuidanceBlock-module_noMaxWidth__UCCUk",
+  "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__tK4Xr",
+  "illustration": "GuidanceBlock-module_illustration__LiDV3",
+  "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__eBOyt",
+  "descriptionContainer": "GuidanceBlock-module_descriptionContainer__w1-P-",
+  "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__aQhc9",
+  "buttonContainer": "GuidanceBlock-module_buttonContainer__bcVmB",
+  "hidden": "GuidanceBlock-module_hidden__mwvrs",
+  "headingWrapper": "GuidanceBlock-module_headingWrapper__OfZB5",
+  "default": "GuidanceBlock-module_default__7naG4",
+  "positive": "GuidanceBlock-module_positive__iCp-1",
+  "negative": "GuidanceBlock-module_negative__wWBlw",
+  "assertive": "GuidanceBlock-module_assertive__bNdnQ",
+  "informative": "GuidanceBlock-module_informative__KeJWO",
+  "cautionary": "GuidanceBlock-module_cautionary__5Vkw6",
+  "prominent": "GuidanceBlock-module_prominent__rWTgt",
+  "inline": "GuidanceBlock-module_inline__B-Ubr",
+  "stacked": "GuidanceBlock-module_stacked__4dS71",
+  "centerContent": "GuidanceBlock-module_centerContent__9Vlup",
+  "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__-UXo9"
+};
+module.exports = styles;

package/dist/esm/GuidanceBlock/GuidanceBlock.mjs

@@ -6,7 +6,7 @@ import { Heading } from '../Heading/Heading.mjs';
 import { Text } from '../Text/Text.mjs';
 import { Icon } from '../__future__/Icon/Icon.mjs';
 import { Tooltip } from '../__overlays__/Tooltip/v1/index.mjs';
-import styles from './GuidanceBlock.module.scss.mjs';
+import styles from './GuidanceBlock.module.css.mjs';
 import { Button } from '../__actions__/Button/v1/Button/Button.mjs';
 var WithTooltip = function (_a) {
   var tooltipProps = _a.tooltipProps,

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

@@ -0,0 +1,26 @@
+var styles = {
+  "rightMargin": "GuidanceBlock-module_rightMargin__T6JO2",
+  "noRightMargin": "GuidanceBlock-module_noRightMargin__MczwN",
+  "banner": "GuidanceBlock-module_banner__7FT39",
+  "noMaxWidth": "GuidanceBlock-module_noMaxWidth__UCCUk",
+  "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__tK4Xr",
+  "illustration": "GuidanceBlock-module_illustration__LiDV3",
+  "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__eBOyt",
+  "descriptionContainer": "GuidanceBlock-module_descriptionContainer__w1-P-",
+  "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__aQhc9",
+  "buttonContainer": "GuidanceBlock-module_buttonContainer__bcVmB",
+  "hidden": "GuidanceBlock-module_hidden__mwvrs",
+  "headingWrapper": "GuidanceBlock-module_headingWrapper__OfZB5",
+  "default": "GuidanceBlock-module_default__7naG4",
+  "positive": "GuidanceBlock-module_positive__iCp-1",
+  "negative": "GuidanceBlock-module_negative__wWBlw",
+  "assertive": "GuidanceBlock-module_assertive__bNdnQ",
+  "informative": "GuidanceBlock-module_informative__KeJWO",
+  "cautionary": "GuidanceBlock-module_cautionary__5Vkw6",
+  "prominent": "GuidanceBlock-module_prominent__rWTgt",
+  "inline": "GuidanceBlock-module_inline__B-Ubr",
+  "stacked": "GuidanceBlock-module_stacked__4dS71",
+  "centerContent": "GuidanceBlock-module_centerContent__9Vlup",
+  "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__-UXo9"
+};
+export { styles as default };

package/dist/styles.css

@@ -72,6 +72,9 @@
   opacity: 0.3;
 }
 
+.Focusable-module_focusableWrapper__NfuIi {
+  display: inline-flex;
+}
 .Button-module_button__QOSYH {
   --button-min-height-width: var(--spacing-48);
   --button-padding-x: calc(
@@ -160,9 +163,6 @@
   --button-icon-size: var(--spacing-16);
   gap: var(--spacing-8);
 }
-.Focusable-module_focusableWrapper__NfuIi {
-  display: inline-flex;
-}
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -4707,368 +4707,329 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   gap: var(--spacing-8);
 }
 
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-.GuidanceBlock-module_rightMargin__-iEFa {
-  margin-right: var(--spacing-8, 0.5rem);
+.GuidanceBlock-module_rightMargin__T6JO2 {
+  margin-right: var(--spacing-8);
 }
 
-.GuidanceBlock-module_noRightMargin__4Uy9N {
+.GuidanceBlock-module_noRightMargin__MczwN {
   margin-right: 0;
 }
 
-.GuidanceBlock-module_banner__FxKcd.GuidanceBlock-module_noMaxWidth__UzHP1 {
+.GuidanceBlock-module_banner__7FT39.GuidanceBlock-module_noMaxWidth__UCCUk {
   max-width: inherit;
 }
 
-.GuidanceBlock-module_banner__FxKcd {
+.GuidanceBlock-module_banner__7FT39 {
   --border-width: var(--border-width-1);
+  --banner-padding: var(--spacing-lg);
+
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-sm, 0.75rem);
+  gap: var(--spacing-12);
   min-width: 320px;
-  max-width: 1080px;
+  max-width: var(--layout-breakpoints-large);
   border: var(--border-width) var(--border-solid-border-style);
-  border-radius: var(--border-solid-border-radius, 7px);
-  padding: calc(var(--spacing-lg, 2.25rem) - var(--border-width));
-  box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
+  border-radius: var(--border-solid-border-radius);
+  padding: calc(var(--banner-padding) - var(--border-width));
+  box-shadow: var(--shadow-small-box-shadow);
   position: relative;
   top: -1px;
-  transition: opacity var(--animation-duration-slow, 400ms) ease, margin-top var(--animation-duration-fast, 300ms) var(--animation-duration-slow, 400ms) ease;
-  color: var(--color-purple-800, #2f2438);
-}
-@media (min-width: 1024px) {
-  .GuidanceBlock-module_banner__FxKcd {
-    min-height: calc(12rem - var(--spacing-lg, 2.25rem) * 2);
+  transition:
+    opacity var(--animation-duration-slow) ease,
+    margin-top var(--animation-duration-fast) var(--animation-duration-slow)
+      ease;
+  color: var(--color-purple-800);
+
+  @media (width >= 1024px) {
+    min-height: calc(12rem - calc(var(--banner-padding) * 2));
     flex-direction: row;
-    gap: var(--spacing-md, 1.5rem);
+    gap: var(--spacing-24);
     width: auto;
     align-items: center;
   }
-}
-@media (max-width: 767px) {
-  .GuidanceBlock-module_banner__FxKcd {
+
+  @media (width >= 767px) {
     min-width: unset;
   }
 }
 
-.GuidanceBlock-module_illustrationWrapper__AEljX {
+.GuidanceBlock-module_illustrationWrapper__tK4Xr {
   display: flex;
-}
-@media (min-width: 768px) and (max-width: 1023px) {
-  .GuidanceBlock-module_illustrationWrapper__AEljX {
+
+  @media (768px <= width <= 1023px) {
     text-align: center;
     justify-content: center;
     align-self: center;
-    padding: var(--spacing-sm, 0.75rem);
+    padding: var(--spacing-12);
   }
-}
-@media (max-width: 767px) {
-  .GuidanceBlock-module_illustrationWrapper__AEljX {
+
+  @media (width <= 767px) {
     display: none;
   }
 }
 
-.GuidanceBlock-module_illustration__sU1Vu {
-  width: 155px;
-  height: 155px;
-}
-.GuidanceBlock-module_hasSceneIllustration__tvFRD .GuidanceBlock-module_illustration__sU1Vu {
-  display: flex;
-  justify-content: center;
-  max-width: 300px;
-  max-height: 300px;
-  width: 300px;
-  height: auto;
-}
-.GuidanceBlock-module_hasSceneIllustration__tvFRD .GuidanceBlock-module_illustration__sU1Vu figure {
-  max-height: 100%;
-  max-width: 100%;
-  aspect-ratio: 4/3;
-}
-.GuidanceBlock-module_hasSceneIllustration__tvFRD .GuidanceBlock-module_illustration__sU1Vu img {
-  height: 100%;
-  object-fit: contain;
-  object-position: center;
+.GuidanceBlock-module_illustration__LiDV3 {
+  --illustration-size: 155px;
+  --scene-illustration-size: 300px;
+
+  width: var(--illustration-size);
+  height: var(--illustration-size);
+
+  /* This has been created to handle scene illustrations consistently until the tile component is created */
+  .GuidanceBlock-module_hasSceneIllustration__eBOyt & {
+    display: flex;
+    justify-content: center;
+    max-width: var(--scene-illustration-size);
+    max-height: var(--scene-illustration-size);
+    width: var(--scene-illustration-size);
+    height: auto;
+
+    figure {
+      max-height: 100%;
+      max-width: 100%;
+      aspect-ratio: 4/3;
+    }
+
+    img {
+      height: 100%;
+      object-fit: contain;
+      object-position: center;
+    }
+  }
 }
 
-.GuidanceBlock-module_descriptionContainer__aywtY {
+.GuidanceBlock-module_descriptionContainer__w1-P- {
   flex: 1;
   text-align: center;
   align-self: center;
   max-width: 780px;
-}
-@media (min-width: 1024px) {
-  .GuidanceBlock-module_descriptionContainer__aywtY {
-    padding: 0 var(--spacing-sm, 0.75rem);
+
+  @media (width >= 1024px) {
+    padding: 0 var(--spacing-12);
     text-align: left;
   }
-}
-@media (max-width: 767px) {
-  .GuidanceBlock-module_descriptionContainer__aywtY {
-    margin: var(--spacing-sm, 0.75rem);
+
+  @media (width <= 767px) {
+    margin: var(--spacing-12);
     max-width: 100%;
   }
-}
-@media (min-width: 1024px) {
-  [dir=rtl] .GuidanceBlock-module_descriptionContainer__aywtY {
-    padding: 0 var(--spacing-sm, 0.75rem);
-    text-align: right;
+
+  [dir="rtl"] & {
+    @media (width >= 1024px) {
+      padding: 0 var(--spacing-12);
+      text-align: right;
+    }
   }
 }
 
-.GuidanceBlock-module_descriptionAndActions__E5BcL {
+.GuidanceBlock-module_descriptionAndActions__aQhc9 {
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-md, 1.5rem);
-}
-@media (max-width: 1023px) {
-  .GuidanceBlock-module_descriptionAndActions__E5BcL {
+  gap: var(--spacing-24);
+
+  @media (width <= 1023px) {
     flex-direction: column;
     width: 100%;
     align-items: unset;
   }
 }
 
-.GuidanceBlock-module_buttonContainer__U2Hxn {
+.GuidanceBlock-module_buttonContainer__bcVmB {
   display: flex;
   flex: 1 0 auto;
   justify-content: center;
   flex-direction: row-reverse;
-  gap: var(--spacing-sm, 0.75rem);
+  gap: var(--spacing-12);
   min-width: max-content;
-}
-@media (min-width: 768px) {
-  .GuidanceBlock-module_buttonContainer__U2Hxn {
+
+  @media (width >= 768px) {
     text-align: center;
   }
-}
-@media (max-width: 767px) {
-  .GuidanceBlock-module_buttonContainer__U2Hxn {
+
+  @media (width <= 767px) {
     flex-direction: column;
     width: 100%;
-    margin-top: var(--spacing-xs, 0.375rem);
+    margin-top: var(--spacing-6);
   }
-}
-[dir=rtl] .GuidanceBlock-module_buttonContainer__U2Hxn svg {
-  transform: rotate(180deg);
-}
 
-.GuidanceBlock-module_hidden__CbgXn {
-  opacity: 0%;
-  margin-bottom: 0;
+  [dir="rtl"] & svg {
+    transform: rotate(180deg);
+  }
 }
 
-.GuidanceBlock-module_headingWrapper__zgVmA {
-  margin-bottom: var(--spacing-md, 1.5rem);
+.GuidanceBlock-module_hidden__mwvrs {
+  opacity: 0;
+  margin-bottom: 0;
 }
 
-.GuidanceBlock-module_cancel__UaIA- {
-  appearance: none;
-  display: inline;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  margin: 0;
-  padding: 0;
-  border: none;
-  cursor: pointer;
-  position: absolute;
-  top: var(--spacing-sm, 0.75rem);
-  right: var(--spacing-sm, 0.75rem);
-  color: var(--color-purple-800, #2f2438);
-}
-.GuidanceBlock-module_cancel__UaIA- .GuidanceBlock-module_icon__y2xz8 {
-  opacity: 70%;
-  transition: var(--animation-duration-fast, 300ms) opacity;
-}
-.GuidanceBlock-module_cancel__UaIA-:disabled .GuidanceBlock-module_icon__y2xz8, .GuidanceBlock-module_cancel__UaIA-.GuidanceBlock-module_disabled__Uhgsr .GuidanceBlock-module_icon__y2xz8 {
-  opacity: 30%;
-}
-.GuidanceBlock-module_cancel__UaIA-:not(:disabled, .GuidanceBlock-module_disabled__Uhgsr):hover .GuidanceBlock-module_icon__y2xz8, .GuidanceBlock-module_cancel__UaIA-:not(:disabled, .GuidanceBlock-module_disabled__Uhgsr):focus .GuidanceBlock-module_icon__y2xz8, .GuidanceBlock-module_cancel__UaIA-:not(:disabled, .GuidanceBlock-module_disabled__Uhgsr).GuidanceBlock-module_hover__7V9x1 .GuidanceBlock-module_icon__y2xz8 {
-  opacity: 100%;
-}
-.GuidanceBlock-module_cancel__UaIA-:not(:disabled, .GuidanceBlock-module_disabled__Uhgsr):active .GuidanceBlock-module_icon__y2xz8, .GuidanceBlock-module_cancel__UaIA-:not(:disabled, .GuidanceBlock-module_disabled__Uhgsr).GuidanceBlock-module_active__YJaZt .GuidanceBlock-module_icon__y2xz8 {
-  opacity: 100%;
+.GuidanceBlock-module_headingWrapper__OfZB5 {
+  margin-bottom: var(--spacing-24);
 }
 
-.GuidanceBlock-module_default__Ffblg {
+.GuidanceBlock-module_default__7naG4 {
   border-color: var(--color-gray-500);
   background: var(--color-white);
 }
 
-.GuidanceBlock-module_positive__yENlT {
+.GuidanceBlock-module_positive__iCp-1 {
   border-color: var(--color-green-500);
-  background: var(--color-green-100, #e8f8f4);
+  background: var(--color-green-100);
 }
 
-.GuidanceBlock-module_negative__E-Jvh,
-.GuidanceBlock-module_assertive__6PZlM {
+.GuidanceBlock-module_negative__wWBlw,
+.GuidanceBlock-module_assertive__bNdnQ {
   border-color: var(--color-red-500);
-  background: var(--color-red-100, #fdeaee);
+  background: var(--color-red-100);
 }
 
-.GuidanceBlock-module_informative__ZUH4j {
+.GuidanceBlock-module_informative__KeJWO {
   border-color: var(--color-blue-400);
-  background: var(--color-blue-100, #e6f6ff);
+  background: var(--color-blue-100);
 }
 
-.GuidanceBlock-module_cautionary__sJ1CE {
+.GuidanceBlock-module_cautionary__5Vkw6 {
   border-color: var(--color-yellow-700);
-  background: var(--color-yellow-100, #fff9e4);
+  background: var(--color-yellow-100);
 }
 
-.GuidanceBlock-module_prominent__nn-r4 {
+.GuidanceBlock-module_prominent__rWTgt {
   border-color: var(--color-purple-400);
-  background: var(--color-purple-100, #f4edf8);
+  background: var(--color-purple-100);
 }
 
-.GuidanceBlock-module_inline__GwOWR,
-.GuidanceBlock-module_stacked__rDupX {
+.GuidanceBlock-module_inline__B-Ubr,
+.GuidanceBlock-module_stacked__4dS71 {
   flex-flow: row wrap;
   align-items: unset;
-  gap: var(--spacing-md, 1.5rem);
+  gap: var(--spacing-24);
   min-width: unset;
-}
-@media (max-width: 1023px) {
-  .GuidanceBlock-module_inline__GwOWR,
-  .GuidanceBlock-module_stacked__rDupX {
+
+  @media (width <= 1023px) {
     flex-direction: unset;
   }
-}
-.GuidanceBlock-module_inline__GwOWR .GuidanceBlock-module_illustrationWrapper__AEljX,
-.GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_illustrationWrapper__AEljX {
-  margin-right: var(--spacing-sm, 0.75rem);
-}
-[dir=rtl] .GuidanceBlock-module_inline__GwOWR .GuidanceBlock-module_illustrationWrapper__AEljX,
-[dir=rtl] .GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_illustrationWrapper__AEljX {
-  margin-left: var(--spacing-sm, 0.75rem);
-  margin-right: inherit;
-}
-@media (min-width: 768px) and (max-width: 1023px) {
-  .GuidanceBlock-module_inline__GwOWR .GuidanceBlock-module_illustrationWrapper__AEljX,
-  .GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_illustrationWrapper__AEljX {
-    padding: 0;
+
+  .GuidanceBlock-module_illustrationWrapper__tK4Xr {
+    margin-right: var(--spacing-12);
+
+    [dir="rtl"] & {
+      margin-left: var(--spacing-12);
+      margin-right: inherit;
+    }
+
+    @media (768px <= width <= 1023px) {
+      padding: 0;
+    }
+
+    @media (width <= 767px) {
+      display: flex;
+    }
   }
-}
-@media (max-width: 767px) {
-  .GuidanceBlock-module_inline__GwOWR .GuidanceBlock-module_illustrationWrapper__AEljX,
-  .GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_illustrationWrapper__AEljX {
-    display: flex;
+
+  .GuidanceBlock-module_descriptionAndActions__aQhc9 {
+    margin: auto 0;
   }
-}
-.GuidanceBlock-module_inline__GwOWR .GuidanceBlock-module_descriptionAndActions__E5BcL,
-.GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_descriptionAndActions__E5BcL {
-  margin: auto 0;
-}
-.GuidanceBlock-module_inline__GwOWR .GuidanceBlock-module_descriptionContainer__aywtY,
-.GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_descriptionContainer__aywtY {
-  text-align: left;
-  max-width: unset;
-  min-width: 320px;
-}
-@media (min-width: 1024px) {
-  .GuidanceBlock-module_inline__GwOWR .GuidanceBlock-module_descriptionContainer__aywtY,
-  .GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_descriptionContainer__aywtY {
-    padding: 0;
+
+  .GuidanceBlock-module_descriptionContainer__w1-P- {
+    text-align: left;
+    max-width: unset;
+    min-width: 320px;
+
+    @media (width >= 1024px) {
+      padding: 0;
+    }
+
+    @media (width <= 767px) {
+      margin: 0;
+    }
+
+    [dir="rtl"] & {
+      text-align: right;
+
+      @media (width >= 1024px) {
+        padding: 0;
+      }
+    }
   }
-}
-@media (max-width: 767px) {
-  .GuidanceBlock-module_inline__GwOWR .GuidanceBlock-module_descriptionContainer__aywtY,
-  .GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_descriptionContainer__aywtY {
-    margin: 0;
+
+  .GuidanceBlock-module_buttonContainer__bcVmB {
+    padding-left: var(--spacing-12);
+    justify-content: flex-start;
+    width: unset;
+    min-width: unset;
+
+    @media (width <= 767px) {
+      flex-direction: row-reverse;
+    }
+
+    [dir="rtl"] & {
+      padding-left: 0;
+      padding-right: var(--spacing-12);
+    }
+
+    > * {
+      width: unset;
+    }
   }
-}
-[dir=rtl] .GuidanceBlock-module_inline__GwOWR .GuidanceBlock-module_descriptionContainer__aywtY,
-[dir=rtl] .GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_descriptionContainer__aywtY {
-  text-align: right;
-}
-@media (min-width: 1024px) {
-  [dir=rtl] .GuidanceBlock-module_inline__GwOWR .GuidanceBlock-module_descriptionContainer__aywtY,
-  [dir=rtl] .GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_descriptionContainer__aywtY {
-    padding: 0;
+
+  &.GuidanceBlock-module_hasSceneIllustration__eBOyt {
+    justify-content: center;
   }
-}
-.GuidanceBlock-module_inline__GwOWR .GuidanceBlock-module_buttonContainer__U2Hxn,
-.GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_buttonContainer__U2Hxn {
-  padding-left: var(--spacing-sm, 0.75rem);
-  justify-content: flex-start;
-  width: unset;
-  min-width: unset;
-}
-@media (max-width: 767px) {
-  .GuidanceBlock-module_inline__GwOWR .GuidanceBlock-module_buttonContainer__U2Hxn,
-  .GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_buttonContainer__U2Hxn {
-    flex-direction: row-reverse;
+
+  &.GuidanceBlock-module_centerContent__9Vlup {
+    flex-direction: column;
+
+    &.GuidanceBlock-module_hasSceneIllustration__eBOyt .GuidanceBlock-module_illustration__LiDV3 {
+      width: 100%;
+    }
+
+    .GuidanceBlock-module_illustrationWrapper__tK4Xr {
+      margin: 0 auto;
+      align-self: center;
+    }
+
+    .GuidanceBlock-module_descriptionContainer__w1-P- {
+      text-align: center;
+      min-width: unset;
+
+      [dir="rtl"] & {
+        text-align: center;
+      }
+    }
+
+    .GuidanceBlock-module_buttonContainer__bcVmB {
+      padding: 0;
+      flex-direction: column;
+      min-width: unset;
+      justify-content: center;
+    }
+  }
+
+  &.GuidanceBlock-module_centerContent__9Vlup.GuidanceBlock-module_smallScreenTextAlignment__-UXo9 {
+    .GuidanceBlock-module_descriptionContainer__w1-P- {
+      text-align: left;
+
+      [dir="rtl"] & {
+        text-align: right;
+      }
+    }
   }
-}
-[dir=rtl] .GuidanceBlock-module_inline__GwOWR .GuidanceBlock-module_buttonContainer__U2Hxn,
-[dir=rtl] .GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_buttonContainer__U2Hxn {
-  padding-left: 0;
-  padding-right: var(--spacing-sm, 0.75rem);
-}
-.GuidanceBlock-module_inline__GwOWR .GuidanceBlock-module_buttonContainer__U2Hxn > *,
-.GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_buttonContainer__U2Hxn > * {
-  width: unset;
-}
-.GuidanceBlock-module_inline__GwOWR.GuidanceBlock-module_hasSceneIllustration__tvFRD,
-.GuidanceBlock-module_stacked__rDupX.GuidanceBlock-module_hasSceneIllustration__tvFRD {
-  justify-content: center;
-}
-.GuidanceBlock-module_inline__GwOWR.GuidanceBlock-module_centerContent__m3IhB,
-.GuidanceBlock-module_stacked__rDupX.GuidanceBlock-module_centerContent__m3IhB {
-  flex-direction: column;
-}
-.GuidanceBlock-module_inline__GwOWR.GuidanceBlock-module_centerContent__m3IhB.GuidanceBlock-module_hasSceneIllustration__tvFRD .GuidanceBlock-module_illustration__sU1Vu,
-.GuidanceBlock-module_stacked__rDupX.GuidanceBlock-module_centerContent__m3IhB.GuidanceBlock-module_hasSceneIllustration__tvFRD .GuidanceBlock-module_illustration__sU1Vu {
-  width: 100%;
-}
-.GuidanceBlock-module_inline__GwOWR.GuidanceBlock-module_centerContent__m3IhB .GuidanceBlock-module_illustrationWrapper__AEljX,
-.GuidanceBlock-module_stacked__rDupX.GuidanceBlock-module_centerContent__m3IhB .GuidanceBlock-module_illustrationWrapper__AEljX {
-  margin: 0 auto;
-  align-self: center;
-}
-.GuidanceBlock-module_inline__GwOWR.GuidanceBlock-module_centerContent__m3IhB .GuidanceBlock-module_descriptionContainer__aywtY,
-.GuidanceBlock-module_stacked__rDupX.GuidanceBlock-module_centerContent__m3IhB .GuidanceBlock-module_descriptionContainer__aywtY {
-  text-align: center;
-  min-width: unset;
-}
-[dir=rtl] .GuidanceBlock-module_inline__GwOWR.GuidanceBlock-module_centerContent__m3IhB .GuidanceBlock-module_descriptionContainer__aywtY,
-[dir=rtl] .GuidanceBlock-module_stacked__rDupX.GuidanceBlock-module_centerContent__m3IhB .GuidanceBlock-module_descriptionContainer__aywtY {
-  text-align: center;
-}
-.GuidanceBlock-module_inline__GwOWR.GuidanceBlock-module_centerContent__m3IhB .GuidanceBlock-module_buttonContainer__U2Hxn,
-.GuidanceBlock-module_stacked__rDupX.GuidanceBlock-module_centerContent__m3IhB .GuidanceBlock-module_buttonContainer__U2Hxn {
-  padding: 0;
-  flex-direction: column;
-  min-width: unset;
-  justify-content: center;
-}
-.GuidanceBlock-module_inline__GwOWR.GuidanceBlock-module_centerContent__m3IhB.GuidanceBlock-module_smallScreenTextAlignment__oWufj .GuidanceBlock-module_descriptionContainer__aywtY,
-.GuidanceBlock-module_stacked__rDupX.GuidanceBlock-module_centerContent__m3IhB.GuidanceBlock-module_smallScreenTextAlignment__oWufj .GuidanceBlock-module_descriptionContainer__aywtY {
-  text-align: left;
-}
-[dir=rtl] .GuidanceBlock-module_inline__GwOWR.GuidanceBlock-module_centerContent__m3IhB.GuidanceBlock-module_smallScreenTextAlignment__oWufj .GuidanceBlock-module_descriptionContainer__aywtY,
-[dir=rtl] .GuidanceBlock-module_stacked__rDupX.GuidanceBlock-module_centerContent__m3IhB.GuidanceBlock-module_smallScreenTextAlignment__oWufj .GuidanceBlock-module_descriptionContainer__aywtY {
-  text-align: right;
 }
 
 /* stylelint-disable no-descending-specificity */
-.GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_descriptionAndActions__E5BcL {
-  flex-direction: column;
-  align-items: unset;
-}
-.GuidanceBlock-module_stacked__rDupX .GuidanceBlock-module_descriptionContainer__aywtY {
-  align-self: flex-start;
-}
+.GuidanceBlock-module_stacked__4dS71 {
+  .GuidanceBlock-module_descriptionAndActions__aQhc9 {
+    flex-direction: column;
+    align-items: unset;
+  }
 
+  .GuidanceBlock-module_descriptionContainer__w1-P- {
+    align-self: flex-start;
+  }
+}
 /* stylelint-enable no-descending-specificity */
+
 .SVG-module_icon__8J5Ev {
   width: 20px;
   height: 20px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.67.18",
+  "version": "1.67.19",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/GuidanceBlock/{GuidanceBlock.module.scss → GuidanceBlock.module.css}

@@ -1,27 +1,5 @@
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/layout";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/animation";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "../../styles/utils/responsive";
-@import "../../styles/utils/button-reset";
-
-@mixin guidance-block-under-480 {
-  @media (max-width: 480px) {
-    @content;
-  }
-}
-
-$bannerPadding: $spacing-lg;
-$ca-banner-fade-out: opacity $animation-duration-slow ease;
-$ca-banner-collapse-height-delayed: margin-top $animation-duration-fast
-  $animation-duration-slow ease;
-$illustration-size: 155px;
-$scene-illustration-size: 300px;
-
 .rightMargin {
-  margin-right: $spacing-8;
+  margin-right: var(--spacing-8);
 }
 
 .noRightMargin {
@@ -34,30 +12,34 @@ $scene-illustration-size: 300px;
 
 .banner {
   --border-width: var(--border-width-1);
+  --banner-padding: var(--spacing-lg);
 
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: var(--spacing-12);
   min-width: 320px;
-  max-width: $layout-breakpoints-large;
+  max-width: var(--layout-breakpoints-large);
   border: var(--border-width) var(--border-solid-border-style);
-  border-radius: $border-solid-border-radius;
-  padding: calc(#{$bannerPadding} - var(--border-width));
-  box-shadow: $shadow-small-box-shadow;
+  border-radius: var(--border-solid-border-radius);
+  padding: calc(var(--banner-padding) - var(--border-width));
+  box-shadow: var(--shadow-small-box-shadow);
   position: relative;
   top: -1px;
-  transition: $ca-banner-fade-out, $ca-banner-collapse-height-delayed;
-  color: $color-purple-800;
-
-  @include ca-media-desktop {
-    min-height: calc(12rem - calc(#{$bannerPadding} * 2));
+  transition:
+    opacity var(--animation-duration-slow) ease,
+    margin-top var(--animation-duration-fast) var(--animation-duration-slow)
+      ease;
+  color: var(--color-purple-800);
+
+  @media (width >= 1024px) {
+    min-height: calc(12rem - calc(var(--banner-padding) * 2));
     flex-direction: row;
-    gap: $spacing-md;
+    gap: var(--spacing-24);
     width: auto;
     align-items: center;
   }
 
-  @include ca-media-mobile {
+  @media (width >= 767px) {
     min-width: unset;
   }
 }
@@ -65,29 +47,32 @@ $scene-illustration-size: 300px;
 .illustrationWrapper {
   display: flex;
 
-  @include ca-media-tablet {
+  @media (768px <= width <= 1023px) {
     text-align: center;
     justify-content: center;
     align-self: center;
-    padding: $spacing-sm;
+    padding: var(--spacing-12);
   }
 
-  @include ca-media-mobile {
+  @media (width <= 767px) {
     display: none;
   }
 }
 
 .illustration {
-  width: $illustration-size;
-  height: $illustration-size;
+  --illustration-size: 155px;
+  --scene-illustration-size: 300px;
+
+  width: var(--illustration-size);
+  height: var(--illustration-size);
 
-  // This has been created to handle scene illustrations consistently until the tile component is created
+  /* This has been created to handle scene illustrations consistently until the tile component is created */
   .hasSceneIllustration & {
     display: flex;
     justify-content: center;
-    max-width: $scene-illustration-size;
-    max-height: $scene-illustration-size;
-    width: $scene-illustration-size;
+    max-width: var(--scene-illustration-size);
+    max-height: var(--scene-illustration-size);
+    width: var(--scene-illustration-size);
     height: auto;
 
     figure {
@@ -110,19 +95,19 @@ $scene-illustration-size: 300px;
   align-self: center;
   max-width: 780px;
 
-  @include ca-media-desktop {
-    padding: 0 $spacing-sm;
+  @media (width >= 1024px) {
+    padding: 0 var(--spacing-12);
     text-align: left;
   }
 
-  @include ca-media-mobile {
-    margin: $spacing-sm;
+  @media (width <= 767px) {
+    margin: var(--spacing-12);
     max-width: 100%;
   }
 
   [dir="rtl"] & {
-    @include ca-media-desktop {
-      padding: 0 $spacing-sm;
+    @media (width >= 1024px) {
+      padding: 0 var(--spacing-12);
       text-align: right;
     }
   }
@@ -133,9 +118,9 @@ $scene-illustration-size: 300px;
   flex: 1;
   align-items: center;
   justify-content: space-between;
-  gap: $spacing-md;
+  gap: var(--spacing-24);
 
-  @include ca-media-tablet-and-under {
+  @media (width <= 1023px) {
     flex-direction: column;
     width: 100%;
     align-items: unset;
@@ -147,17 +132,17 @@ $scene-illustration-size: 300px;
   flex: 1 0 auto;
   justify-content: center;
   flex-direction: row-reverse;
-  gap: $spacing-sm;
+  gap: var(--spacing-12);
   min-width: max-content;
 
-  @include ca-media-tablet-and-up {
+  @media (width >= 768px) {
     text-align: center;
   }
 
-  @include ca-media-mobile {
+  @media (width <= 767px) {
     flex-direction: column;
     width: 100%;
-    margin-top: $spacing-xs;
+    margin-top: var(--spacing-6);
   }
 
   [dir="rtl"] & svg {
@@ -166,51 +151,12 @@ $scene-illustration-size: 300px;
 }
 
 .hidden {
-  opacity: 0%;
+  opacity: 0;
   margin-bottom: 0;
 }
 
 .headingWrapper {
-  margin-bottom: $spacing-md;
-}
-
-.cancel {
-  @include button-reset;
-
-  cursor: pointer;
-  position: absolute;
-  top: $spacing-sm;
-  right: $spacing-sm;
-  color: $color-purple-800;
-
-  .icon {
-    opacity: 70%;
-    transition: $animation-duration-fast opacity;
-  }
-
-  &:disabled,
-  &.disabled {
-    .icon {
-      opacity: 30%;
-    }
-  }
-
-  &:not(:disabled, .disabled) {
-    &:hover,
-    &:focus,
-    &.hover {
-      .icon {
-        opacity: 100%;
-      }
-    }
-
-    &:active,
-    &.active {
-      .icon {
-        opacity: 100%;
-      }
-    }
-  }
+  margin-bottom: var(--spacing-24);
 }
 
 .default {
@@ -220,54 +166,54 @@ $scene-illustration-size: 300px;
 
 .positive {
   border-color: var(--color-green-500);
-  background: $color-green-100;
+  background: var(--color-green-100);
 }
 
 .negative,
 .assertive {
   border-color: var(--color-red-500);
-  background: $color-red-100;
+  background: var(--color-red-100);
 }
 
 .informative {
   border-color: var(--color-blue-400);
-  background: $color-blue-100;
+  background: var(--color-blue-100);
 }
 
 .cautionary {
   border-color: var(--color-yellow-700);
-  background: $color-yellow-100;
+  background: var(--color-yellow-100);
 }
 
 .prominent {
   border-color: var(--color-purple-400);
-  background: $color-purple-100;
+  background: var(--color-purple-100);
 }
 
 .inline,
 .stacked {
   flex-flow: row wrap;
   align-items: unset;
-  gap: $spacing-md;
+  gap: var(--spacing-24);
   min-width: unset;
 
-  @include ca-media-tablet-and-under {
+  @media (width <= 1023px) {
     flex-direction: unset;
   }
 
   .illustrationWrapper {
-    margin-right: $spacing-sm;
+    margin-right: var(--spacing-12);
 
     [dir="rtl"] & {
-      margin-left: $spacing-sm;
+      margin-left: var(--spacing-12);
       margin-right: inherit;
     }
 
-    @include ca-media-tablet {
+    @media (768px <= width <= 1023px) {
       padding: 0;
     }
 
-    @include ca-media-mobile {
+    @media (width <= 767px) {
       display: flex;
     }
   }
@@ -281,36 +227,36 @@ $scene-illustration-size: 300px;
     max-width: unset;
     min-width: 320px;
 
-    @include ca-media-desktop {
+    @media (width >= 1024px) {
       padding: 0;
     }
 
-    @include ca-media-mobile {
+    @media (width <= 767px) {
       margin: 0;
     }
 
     [dir="rtl"] & {
       text-align: right;
 
-      @include ca-media-desktop {
+      @media (width >= 1024px) {
         padding: 0;
       }
     }
   }
 
   .buttonContainer {
-    padding-left: $spacing-sm;
+    padding-left: var(--spacing-12);
     justify-content: flex-start;
     width: unset;
     min-width: unset;
 
-    @include ca-media-mobile {
+    @media (width <= 767px) {
       flex-direction: row-reverse;
     }
 
     [dir="rtl"] & {
       padding-left: 0;
-      padding-right: $spacing-sm;
+      padding-right: var(--spacing-12);
     }
 
     > * {

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -8,7 +8,7 @@ import { Button, ButtonProps } from "~components/__actions__/v2"
 import { Icon } from "~components/__future__/Icon"
 import { Tooltip, TooltipProps } from "~components/__overlays__/Tooltip/v1"
 import { VariantType } from "./types"
-import styles from "./GuidanceBlock.module.scss"
+import styles from "./GuidanceBlock.module.css"
 
 export type ActionProps = ButtonProps & {
   tooltip?: TooltipProps

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

@@ -1,33 +0,0 @@
-'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/esm/GuidanceBlock/GuidanceBlock.module.scss.mjs

@@ -1,31 +0,0 @@
-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 };