@kaizen/components 1.4.21 → 1.4.22-canary.1

package/dist/iife/GenericButton.module-NIOY5S5X.scss

@@ -1,113 +0,0 @@
-@import "../variables";
-@import "../Button.module.scss";
-@import "../IconButton.module.scss";
-@import "../PaginationButtons.module.scss";
-
-.container {
-  display: inline-block;
-}
-
-.button {
-  @extend %button;
-}
-
-.default {
-  @extend %variant-default;
-}
-
-.primary {
-  @extend %variant-primary;
-}
-
-.destructive {
-  @extend %variant-destructive;
-}
-
-.secondary {
-  @extend %variant-secondary;
-
-  &.destructive {
-    @extend %variant-secondary-destructive;
-  }
-}
-
-.form {
-  @extend %variant-form;
-}
-
-.label {
-  line-height: 1;
-
-  &:not(:first-child) {
-    @include ca-margin($start: 0.5em, $end: null);
-  }
-
-  &:not(:last-child) {
-    @include ca-margin($end: 0.5em, $start: null);
-  }
-}
-
-.fullWidth {
-  width: 100%;
-
-  .button {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-  }
-
-  #{$className--content} {
-    justify-content: center;
-  }
-}
-
-.iconWrapper {
-  height: 20px;
-  align-self: flex-start;
-}
-
-.additionalContentWrapper {
-  display: inherit;
-  &:not(:last-child) {
-    @include ca-margin($end: 0.5em, $start: null);
-  }
-}
-
-.loadingSpinner {
-  // This is to fix a problem in safari where the svg stretched too high
-  svg {
-    height: 100%;
-  }
-}
-
-.centeredLoadingSpinner {
-  position: absolute;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-}
-
-.hidden {
-  visibility: hidden;
-}
-
-.iconButton {
-  @extend %icon-button;
-}
-
-.circleButton {
-  @extend %circle-button;
-}
-
-.directionalLink {
-  @extend %directional-link;
-}
-
-.paginationLink {
-  @extend %pagination-link;
-}
-
-.isPaginationLinkActive {
-  @extend %pagination-link--active;
-}

package/dist/iife/GenericModal.module-DW6NSOGA.scss

@@ -1,110 +0,0 @@
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/component-library/styles/animation";
-@import "~@kaizen/component-library/styles/border";
-@import "~@kaizen/component-library/styles/layers";
-@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
-@import "~@kaizen/component-library/styles/responsive";
-@import "~@kaizen/deprecated-component-library-helpers/styles/color";
-
-.defaultModalWidth {
-  min-width: 300px;
-  max-width: 600px;
-}
-
-.backdropLayer {
-  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
-  position: fixed;
-  background-color: $black;
-  opacity: 0.5;
-  z-index: $ca-z-index-modal-backdrop;
-}
-
-.scrollLayer {
-  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
-  position: fixed;
-  display: flex;
-  align-items: center;
-  z-index: $ca-z-index-modal;
-  overflow-y: auto;
-}
-
-.modalLayer {
-  // use flexbox auto margins to horizontally and vertically centre the modal
-  // because in IE11, `align-items: center` and `justify-content: center` cause
-  // long modal content to become unreachable if they go off-screen
-  margin: auto;
-
-  padding: $ca-grid 0;
-  width: 100%;
-}
-
-.genericModal {
-  margin: auto;
-  background-color: $color-white;
-  border-radius: $border-solid-border-radius;
-  box-shadow: $shadow-large-box-shadow;
-  position: relative;
-  width: 90%;
-  -webkit-font-smoothing: antialiased;
-  color: $color-purple-800;
-
-  @include ca-media-tablet-and-up {
-    width: 100%;
-  }
-}
-
-.animatingEnter {
-  transition-duration: $ca-duration-fast;
-
-  .backdropLayer {
-    /*
-      There's a weird bug in Chrome/Blink 102.x that animates the opacity
-      all the way to 1 with 200ms ("rapid" token), but is fine with
-      201ms, see Jira [KDS-523]
-    */
-    @include ca-animation-fade($duration: 201ms, $from: 0, $to: 0.5);
-  }
-
-  .genericModal {
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-    animation-duration: $ca-duration-fast;
-    animation-fill-mode: forwards;
-    animation-timing-function: $ca-bounce-in;
-  }
-}
-
-.animatingLeave {
-  transition-duration: $ca-duration-rapid;
-
-  .backdropLayer {
-    @include ca-animation-fade(
-      $duration: $ca-duration-rapid,
-      $from: 0.5,
-      $to: 0
-    );
-  }
-
-  .genericModal {
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-    animation-duration: $ca-duration-rapid;
-    animation-fill-mode: forwards;
-    animation-timing-function: $ca-bounce-out;
-  }
-}
-
-.unscrollable {
-  /* Tech debt - this !important existed before Stylelint rules */
-  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.pseudoScrollbar {
-  /* Tech debt - this !important existed before Stylelint rules */
-  padding-right: 15px !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.hide {
-  opacity: 0;
-  pointer-events: none;
-}

package/dist/iife/GenericModalSection.module-MJ4MTMSP.scss

@@ -1,7 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-
-.inputEdit {
-  background-color: $color-gray-200;
-  border-radius: $border-solid-border-radius;
-}

package/dist/iife/GenericNotification.module-DAERSOHE.scss

@@ -1,115 +0,0 @@
-@import "../styles";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-
-.notification {
-  @extend %ca-notification;
-}
-
-// Structure
-
-.icon {
-  @extend %ca-notification__icon;
-}
-
-.textContainer {
-  @extend %ca-notification__text-container;
-}
-
-.title {
-  @extend %ca-notification__title;
-}
-
-.text {
-  @extend %ca-notification__text;
-}
-
-.cancel {
-  @extend %ca-notification__cancel;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &:focus {
-    outline: none;
-  }
-  &:global(.focus-visible)::after {
-    content: "";
-    $focus-ring-offset: 6px;
-    pointer-events: none;
-    position: absolute;
-    background: transparent;
-    border-radius: $border-focus-ring-border-radius;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $color-blue-500;
-    top: $focus-ring-offset;
-    bottom: $focus-ring-offset;
-    left: $focus-ring-offset;
-    right: $focus-ring-offset;
-  }
-}
-
-.cancelLabel {
-  @extend %ca-notification__cancel__label;
-}
-.notificationTitle {
-  top: 0.42em;
-  position: relative;
-  padding-right: 6px;
-  line-height: $typography-heading-6-line-height;
-}
-
-@container (max-width: 25rem) {
-  .notificationTitle {
-    width: 100%;
-  }
-}
-// Animation
-
-.hidden {
-  @extend %ca-notification---hidden;
-}
-
-// Variant
-
-.inline {
-  @extend %ca-notification---inline;
-}
-
-.toast {
-  @extend %ca-notification---toast;
-}
-
-.global {
-  @extend %ca-notification---global;
-}
-
-// Type
-
-.positive {
-  @extend %ca-notification---positive;
-}
-
-.informative {
-  @extend %ca-notification---informative;
-}
-
-.cautionary {
-  @extend %ca-notification---cautionary;
-}
-
-.negative {
-  @extend %ca-notification---negative;
-}
-
-// Modifiers
-
-.noBottomMargin {
-  @extend %ca-notification---noBottomMargin;
-}
-
-.forceMultiline {
-  @extend %ca-notification---forceMultiline;
-}

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;
-}