@kaizen/components 1.4.20 → 1.4.22-canary.0

package/dist/iife/GenericTile.module-ZXQ4XWP4.scss

@@ -1,136 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
-@import "~@kaizen/component-library/styles/animation";
-@import "~@kaizen/component-library/styles/responsive";
-@import "../variables";
-
-$tilePaddingTop: $spacing-xl;
-
-.root {
-  perspective: 800px;
-}
-
-.tile {
-  width: $tileWidth;
-
-  [data-tile-grid] & {
-    width: auto;
-  }
-
-  height: $tileHeight;
-  position: relative;
-  box-shadow: $shadow-small-box-shadow;
-  background-color: $color-white;
-  transition: transform $ca-duration-slow $ca-default;
-  transform-style: preserve-3d;
-  border-radius: 7px;
-
-  @include ca-media-mobile {
-    width: 100%;
-    min-width: 226px;
-    max-width: $tileHeight;
-  }
-
-  @media (max-width: 480px) {
-    max-width: 100%;
-  }
-}
-
-.face {
-  position: absolute;
-  background-color: $color-white;
-  border-radius: 7px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-
-  * {
-    backface-visibility: hidden;
-  }
-}
-
-.faceFront {
-  justify-content: space-between;
-  padding: $tilePaddingTop $spacing-md $spacing-md;
-}
-
-.faceBack {
-  padding-top: $tilePaddingTop;
-  transform: rotateY(180deg);
-  background-color: $color-blue-100;
-}
-
-.faceMoodPositive {
-  background-color: $color-green-100;
-}
-
-.faceMoodInformative {
-  background-color: $color-blue-100;
-}
-
-.faceMoodCautionary {
-  background-color: $color-yellow-100;
-}
-
-.faceMoodAssertive {
-  background-color: $color-orange-100;
-}
-
-.faceMoodNegative {
-  background-color: $color-red-100;
-}
-
-.faceMoodProminent {
-  background-color: $color-purple-100;
-}
-
-.isFlipped {
-  transform: rotateY(179deg);
-}
-
-.title {
-  text-align: center;
-  padding-bottom: $spacing-sm;
-  backface-visibility: hidden;
-}
-
-.actions {
-  display: flex;
-}
-
-.informationBtn {
-  @include ca-position($top: 0, $end: 0);
-  position: absolute;
-  color: rgba($color-purple-800-rgb, 0.5);
-}
-
-.information {
-  @include ca-padding(
-    $bottom: $spacing-md,
-    $start: $spacing-md,
-    $end: $spacing-md
-  );
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  text-align: left;
-  border-radius: 0 0 7px 7px;
-}
-
-.footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: $spacing-sm;
-  height: $spacing-xl;
-}

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/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/InputEditModal.module-X3TLJPFO.scss

@@ -1,36 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/layout";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.modal {
-  composes: genericModal from "../Primitives/GenericModal.module.scss";
-  min-width: 300px;
-  max-width: 600px;
-}
-
-.header {
-  color: $color-purple-800;
-  text-align: left;
-
-  &.textAlignRTL {
-    text-align: right;
-  }
-
-  &.padded {
-    padding: $spacing-md $spacing-lg;
-    @media (max-width: $layout-breakpoints-medium) {
-      padding: $spacing-md;
-    }
-  }
-}
-
-.body {
-  background: $color-gray-200;
-
-  &.padded {
-    padding: $spacing-md $spacing-lg $spacing-md $spacing-lg;
-    @media (max-width: $layout-breakpoints-medium) {
-      padding: $spacing-md;
-    }
-  }
-}

package/dist/iife/Layout.module-MZ6JYT46.scss

@@ -1,58 +0,0 @@
-@import "./styles";
-@import "~@kaizen/component-library/styles/utils";
-
-.root {
-  @extend %root;
-}
-
-.navigationBar {
-  @extend %navigation-bar;
-  box-sizing: border-box;
-  top: 0;
-  z-index: $ca-z-index-fixed;
-}
-
-.page {
-  @extend %page;
-  box-sizing: border-box;
-  position: relative;
-}
-
-.header {
-  @extend %header;
-  box-sizing: border-box;
-}
-
-.body {
-  @extend %body;
-  box-sizing: border-box;
-}
-
-.bodyInner {
-  @extend %body-inner;
-}
-
-.sidebar {
-  @extend %sidebar;
-  box-sizing: border-box;
-}
-
-.content {
-  @extend %content;
-  box-sizing: border-box;
-}
-
-.footer {
-  @extend %footer;
-  box-sizing: border-box;
-}
-
-.toasts {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.announcers {
-  @include sr-only();
-}