@kaizen/components 1.4.24 → 1.4.26

package/dist/iife/GuidanceBlock.module-FAHJFZMK.scss

@@ -1,324 +0,0 @@
-@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 "~@kaizen/component-library/styles/responsive";
-@import "./mixins";
-
-$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;
-
-.banner.noMaxWidth {
-  max-width: inherit;
-}
-
-.banner {
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-sm;
-  background: $color-white;
-  min-width: 320px;
-  max-width: $layout-breakpoints-large;
-  border: $border-borderless-border-width $border-borderless-border-style
-    $border-borderless-border-color;
-  border-radius: $border-solid-border-radius;
-  padding: $bannerPadding;
-  box-shadow: $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));
-    flex-direction: row;
-    gap: $spacing-md;
-    width: auto;
-    align-items: center;
-  }
-
-  @include ca-media-mobile {
-    min-width: unset;
-  }
-}
-
-.illustrationWrapper {
-  display: flex;
-
-  @include ca-media-tablet {
-    text-align: center;
-    justify-content: center;
-    align-self: center;
-    padding: $spacing-sm;
-  }
-
-  @include ca-media-mobile {
-    display: none;
-  }
-}
-
-.illustration {
-  width: $illustration-size;
-  height: $illustration-size;
-
-  // 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;
-    height: auto;
-
-    figure {
-      max-height: 100%;
-      max-width: 100%;
-      aspect-ratio: 4/3;
-    }
-
-    img {
-      height: 100%;
-      object-fit: contain;
-      object-position: center;
-    }
-  }
-}
-
-.descriptionContainer {
-  flex: 1;
-  text-align: center;
-  align-self: center;
-  max-width: 780px;
-
-  @include ca-media-desktop {
-    padding: 0 $spacing-sm;
-    text-align: left;
-  }
-
-  @include ca-media-mobile {
-    margin: $spacing-sm;
-    max-width: 100%;
-  }
-
-  [dir="rtl"] & {
-    @include ca-media-desktop {
-      padding: 0 $spacing-sm;
-      text-align: right;
-    }
-  }
-}
-
-.descriptionAndActions {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: space-between;
-  gap: $spacing-md;
-
-  @include ca-media-tablet-and-under {
-    flex-direction: column;
-    width: 100%;
-    align-items: unset;
-  }
-}
-
-.buttonContainer {
-  display: flex;
-  flex: 1 0 auto;
-  justify-content: center;
-  flex-direction: row-reverse;
-  gap: $spacing-sm;
-  min-width: max-content;
-
-  @include ca-media-tablet-and-up {
-    text-align: center;
-  }
-
-  @include ca-media-mobile {
-    flex-direction: column;
-    width: 100%;
-    margin-top: $spacing-xs;
-  }
-
-  [dir="rtl"] & svg {
-    transform: rotate(180deg);
-  }
-}
-
-.hidden {
-  opacity: 0;
-  margin-bottom: 0;
-}
-
-.headingWrapper {
-  margin-bottom: $spacing-md;
-}
-
-.cancel {
-  @include button-reset;
-  composes: interactiveIconWrapper from "~@kaizen/component-library/components/Icon/Icon.module.scss";
-  position: absolute;
-  top: $spacing-sm;
-  right: $spacing-sm;
-  color: $color-purple-800;
-}
-
-.positive {
-  background: $color-green-100;
-}
-
-.negative {
-  background: $color-red-100;
-}
-
-.informative {
-  background: $color-blue-100;
-}
-
-.cautionary {
-  background: $color-yellow-100;
-}
-
-.assertive {
-  background: $color-orange-100;
-}
-
-.prominent {
-  background: $color-purple-100;
-}
-
-.inline,
-.stacked {
-  flex-direction: row;
-  align-items: unset;
-  gap: $spacing-md;
-  min-width: unset;
-  flex-wrap: wrap;
-
-  @include ca-media-tablet-and-under {
-    flex-direction: unset;
-  }
-
-  .illustrationWrapper {
-    margin-right: $spacing-sm;
-
-    [dir="rtl"] & {
-      margin-left: $spacing-sm;
-      margin-right: inherit;
-    }
-
-    @include ca-media-tablet {
-      padding: 0;
-    }
-
-    @include ca-media-mobile {
-      display: flex;
-    }
-  }
-
-  .descriptionAndActions {
-    margin: auto 0;
-  }
-
-  .descriptionContainer {
-    text-align: left;
-    max-width: unset;
-    min-width: 320px;
-
-    @include ca-media-desktop {
-      padding: 0;
-    }
-
-    @include ca-media-mobile {
-      margin: 0;
-    }
-
-    [dir="rtl"] & {
-      text-align: right;
-
-      @include ca-media-desktop {
-        padding: 0;
-      }
-    }
-  }
-
-  .buttonContainer {
-    padding-left: $spacing-sm;
-    justify-content: flex-start;
-    width: unset;
-    min-width: unset;
-
-    @include ca-media-mobile {
-      flex-direction: row-reverse;
-    }
-
-    [dir="rtl"] & {
-      padding-left: 0;
-      padding-right: $spacing-sm;
-    }
-
-    > * {
-      width: unset;
-    }
-  }
-
-  &.hasSceneIllustration {
-    justify-content: center;
-  }
-
-  &.centerContent {
-    flex-direction: column;
-
-    &.hasSceneIllustration .illustration {
-      width: 100%;
-    }
-
-    .illustrationWrapper {
-      margin: 0 auto;
-      align-self: center;
-    }
-
-    .descriptionContainer {
-      text-align: center;
-      min-width: unset;
-
-      [dir="rtl"] & {
-        text-align: center;
-      }
-    }
-
-    .buttonContainer {
-      padding: 0;
-      flex-direction: column;
-      min-width: unset;
-      justify-content: center;
-    }
-  }
-
-  &.centerContent.smallScreenTextAlignment {
-    .descriptionContainer {
-      text-align: left;
-
-      [dir="rtl"] & {
-        text-align: right;
-      }
-    }
-  }
-}
-
-.stacked {
-  .descriptionAndActions {
-    flex-direction: column;
-    align-items: unset;
-  }
-
-  .descriptionContainer {
-    align-self: flex-start;
-  }
-}

package/dist/iife/Heading.module-WIR3ANFU.scss

@@ -1,104 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "../fonts.scss";
-
-.heading {
-  margin: 0;
-}
-
-.display-0 {
-  font-family: $typography-display-0-font-family;
-  font-weight: $typography-display-0-font-weight;
-  font-size: $typography-display-0-font-size;
-  line-height: $typography-display-0-line-height;
-  letter-spacing: $typography-display-0-letter-spacing;
-}
-
-.heading-1 {
-  font-family: $typography-heading-1-font-family;
-  font-weight: $typography-heading-1-font-weight;
-  font-size: $typography-heading-1-font-size;
-  line-height: $typography-heading-1-line-height;
-  letter-spacing: $typography-heading-1-letter-spacing;
-}
-
-.heading-2 {
-  font-family: $typography-heading-2-font-family;
-  font-weight: $typography-heading-2-font-weight;
-  font-size: $typography-heading-2-font-size;
-  line-height: $typography-heading-2-line-height;
-  letter-spacing: $typography-heading-2-letter-spacing;
-}
-
-.heading-3 {
-  font-family: $typography-heading-3-font-family;
-  font-weight: $typography-heading-3-font-weight;
-  font-size: $typography-heading-3-font-size;
-  line-height: $typography-heading-3-line-height;
-  letter-spacing: $typography-heading-3-letter-spacing;
-}
-
-.heading-4 {
-  font-family: $typography-heading-4-font-family;
-  font-weight: $typography-heading-4-font-weight;
-  font-size: $typography-heading-4-font-size;
-  line-height: $typography-heading-4-line-height;
-  letter-spacing: $typography-heading-4-letter-spacing;
-}
-
-.heading-5 {
-  font-family: $typography-heading-5-font-family;
-  font-weight: $typography-heading-5-font-weight;
-  font-size: $typography-heading-5-font-size;
-  line-height: $typography-heading-5-line-height;
-  letter-spacing: $typography-heading-5-letter-spacing;
-}
-
-.heading-6 {
-  font-family: $typography-heading-6-font-family;
-  font-weight: $typography-heading-6-font-weight;
-  font-size: $typography-heading-6-font-size;
-  line-height: $typography-heading-6-line-height;
-  letter-spacing: $typography-heading-6-letter-spacing;
-  // override Murmur global styles :(
-  text-transform: none;
-}
-
-.dark {
-  color: $color-purple-800;
-  opacity: 1;
-}
-
-.dark-reduced-opacity {
-  color: $color-purple-800;
-  opacity: 0.7;
-}
-
-.white {
-  color: $color-white;
-  opacity: 1;
-}
-
-.white-reduced-opacity {
-  color: $color-white;
-  opacity: 0.8;
-}
-
-.positive {
-  &.small {
-    color: $color-green-600;
-  }
-  &.large {
-    color: $color-green-500;
-  }
-}
-
-.negative {
-  &.small {
-    color: $color-red-600;
-  }
-
-  &.large {
-    color: $color-red-500;
-  }
-}

package/dist/iife/HeroCard.module-LXHTKJTW.scss

@@ -1,106 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/typography";
-
-$badge__height: 80px;
-$left-content__width: 221px;
-
-.root {
-  font-family: $typography-paragraph-body-font-family;
-  font-size: $typography-paragraph-body-font-size;
-  font-weight: $typography-paragraph-body-font-weight;
-  line-height: $typography-paragraph-body-line-height;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  display: flex;
-  // this box shadow should change to small once the Zen look is adopted
-  box-shadow: $shadow-large-box-shadow;
-  background-color: transparent;
-  border-radius: $border-solid-border-radius;
-}
-
-.fullWidth {
-  width: 100%;
-}
-
-.left {
-  display: flex;
-  border-radius: $border-solid-border-radius 0 0 $border-solid-border-radius;
-  color: $color-white;
-  padding: $spacing-sm $spacing-xl;
-  flex-direction: column;
-  flex-shrink: 0;
-  align-items: flex-start;
-  position: relative;
-  width: $left-content__width;
-
-  .fullWidth & {
-    width: 33%;
-    max-width: 450px;
-  }
-
-  &.wisteria700 {
-    background-color: $color-purple-700;
-  }
-
-  &.wisteria200 {
-    background-color: $color-purple-200;
-  }
-
-  &.cluny200 {
-    background-color: $color-blue-200;
-  }
-
-  &.seedling200 {
-    background-color: $color-green-200;
-  }
-}
-
-.withBadge {
-  margin-top: $badge__height + 24px;
-}
-
-.right {
-  border-radius: 0 $border-solid-border-radius $border-solid-border-radius 0;
-  display: flex;
-  flex-direction: column;
-  padding: 51px;
-  background-color: $color-white;
-  color: $color-purple-800;
-  width: 100%;
-}
-
-.rightContent {
-  height: 100%;
-}
-
-.title {
-  font-family: $typography-heading-3-font-family;
-  font-size: $typography-heading-3-font-size;
-  font-weight: $typography-heading-3-font-weight;
-  line-height: $typography-heading-3-line-height;
-  letter-spacing: $typography-heading-3-letter-spacing;
-  margin-bottom: $spacing-md;
-}
-
-.badge {
-  font-family: $typography-heading-3-font-family;
-  font-size: $typography-heading-3-font-size;
-  font-weight: $typography-heading-3-font-weight;
-  line-height: $typography-heading-3-line-height;
-  letter-spacing: $typography-heading-3-letter-spacing;
-  display: flex;
-  font-size: 42px;
-  border-radius: 50%;
-  background-color: rgba(255, 255, 255, 0.1);
-  align-self: flex-start;
-  line-height: 80px;
-  min-width: 80px;
-  min-height: 80px;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: $spacing-md;
-  left: calc(#{$spacing-md} * 1.2);
-}

package/dist/iife/Icon.module-VD7NKLAR.scss

@@ -1,72 +0,0 @@
-@import "~@kaizen/design-tokens/sass/animation";
-@import "./styles";
-
-.icon {
-  @extend %caIcon;
-
-  // Set sensible defaults for icon colours when
-  // windows high-contrast mode is enabled. These
-  // should be overridden by the consumer when the
-  // icon colour conveys information, such as mood.
-  @media screen and (-ms-high-contrast: active) {
-    color: black;
-  }
-
-  @media screen and (-ms-high-contrast: white-on-black) {
-    color: white;
-  }
-
-  @media screen and (-ms-high-contrast: black-on-white) {
-    color: black;
-  }
-}
-
-.inheritSize {
-  @extend %caIconInheritSize;
-}
-
-.interactiveIconWrapper {
-  cursor: pointer;
-  .icon {
-    opacity: 0.7;
-    transition: $animation-duration-fast opacity;
-  }
-  &:disabled,
-  &.disabled {
-    .icon {
-      opacity: 0.3;
-    }
-  }
-  &:not(:disabled):not(.disabled) {
-    &:hover,
-    &:focus,
-    &.hover {
-      .icon {
-        opacity: 1;
-      }
-    }
-    &:active,
-    &.active {
-      .icon {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-// On dark backgrounds, icons are fully opaque by default and half opacity when active.
-// Hover and disabled states are the same.
-.reversedInteractiveIconWrapper {
-  composes: interactiveIconWrapper;
-  .icon {
-    opacity: 1;
-  }
-  &:not(:disabled, .disabled) {
-    &:active,
-    &.active {
-      .icon {
-        opacity: 0.5;
-      }
-    }
-  }
-}