@kaizen/components 1.4.21 → 1.4.22-canary.0

package/dist/iife/EmptyState.module-DOSURL5X.scss

@@ -1,156 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "./mixins";
-
-.container {
-  display: flex;
-  justify-content: space-around;
-  width: 100%;
-  padding-top: 2%;
-  padding-bottom: 2%;
-  padding-left: $spacing-md;
-  padding-right: $spacing-md;
-  color: $color-purple-800;
-  border: $border-solid-border-width $border-solid-border-style
-    $border-borderless-border-color-id;
-  border-radius: $border-solid-border-radius;
-
-  @include small {
-    flex-direction: column;
-    align-items: center;
-    padding-top: $spacing-md;
-    padding-bottom: $spacing-md;
-  }
-
-  &.straightCorners {
-    border-radius: 0;
-  }
-
-  // These class names must match the possible values of the component's layoutContext prop
-  &.sidebarAndContent {
-    @include large-sidebar-and-content {
-      padding-top: $spacing-md;
-      padding-bottom: $spacing-md;
-    }
-  }
-
-  &.contentOnly {
-    @include large-content-only {
-      padding-top: $spacing-md;
-      padding-bottom: $spacing-md;
-    }
-  }
-
-  &.positive {
-    background-color: $color-green-100;
-  }
-  &.negative {
-    background-color: $color-red-100;
-  }
-  &.action {
-    background-color: $color-orange-100;
-  }
-  &.neutral {
-    background-color: $color-purple-100;
-  }
-  &.informative {
-    background-color: $color-blue-100;
-  }
-}
-
-.illustrationSide,
-.textSide {
-  display: inline-block;
-}
-
-.illustrationSide {
-  min-width: 224px;
-  flex-grow: 0;
-  flex-shrink: 1;
-  margin-bottom: $spacing-md;
-
-  @include small {
-    width: 224px;
-  }
-
-  @include medium {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-end;
-    margin-bottom: 0;
-    min-width: 40%;
-    max-width: 50%;
-    flex-grow: 1;
-    box-sizing: border-box;
-    padding-inline-end: $spacing-md;
-  }
-
-  .sidebarAndContent & {
-    @include large-sidebar-and-content {
-      flex-shrink: 1;
-      flex-basis: auto;
-    }
-  }
-
-  .contentOnly & {
-    @include large-content-only {
-      flex-shrink: 1;
-      flex-basis: auto;
-    }
-  }
-}
-
-.illustration,
-.illustrationSide > video {
-  max-width: 100%;
-  max-height: 366px;
-  width: auto;
-
-  // Fixes for IE11 Flexbox issues
-  min-height: 196px;
-
-  @include small {
-    max-height: 196px;
-  }
-}
-
-.textSide {
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 1;
-  align-items: center;
-  -webkit-font-smoothing: antialiased;
-
-  @include medium {
-    flex-basis: 50%;
-    flex-grow: 0;
-  }
-}
-
-.textSideInner {
-  flex-grow: 0;
-  height: auto;
-  margin: 0 $spacing-sm;
-
-  @include small {
-    margin-bottom: 0;
-  }
-
-  @include medium {
-    max-width: 426px;
-  }
-}
-
-.heading {
-  margin-bottom: $spacing-md;
-
-  @media (max-width: (375px)) {
-    @include typography-heading-3-sm;
-  }
-}
-
-.description {
-  margin-bottom: $spacing-md;
-}

package/dist/iife/ExpertAdviceCollapsible.module-L554JCXB.scss

@@ -1,47 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.expertAdviceContainer {
-  background-color: $color-purple-100;
-  border: 2px $border-solid-border-style $color-purple-300;
-  box-shadow: none;
-  color: $color-purple-800;
-  > div {
-    &:first-of-type {
-      background-color: $color-purple-100;
-      border-radius: $border-borderless-border-radius;
-      &:hover {
-        background-color: $color-purple-100;
-      }
-    }
-  }
-}
-
-.expertAdviceContainer:hover {
-  border-color: $color-purple-500;
-}
-
-.expertAdviceHeader {
-  background-color: $color-purple-100;
-  flex: 1 1 auto;
-  align-items: center;
-  display: flex;
-}
-
-.expertAdviceHeading {
-  color: $color-purple-600;
-  .expertAdviceContainer:hover & {
-    color: $color-purple-700;
-  }
-}
-
-.expertAdviceIcon {
-  margin-inline-end: $spacing-sm;
-  width: 1.75rem;
-  height: 1.75rem;
-}
-
-.expertAdviceSection {
-  padding: 0 $spacing-md $spacing-md;
-}

package/dist/iife/FilterMenuButton.module-26EL5K3H.scss

@@ -1,19 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-@import "@kaizen/deprecated-component-library-helpers/styles/type";
-
-$gap: $spacing-sm;
-$menuContentHorizontalPadding: 4px; // this comes from the MenuContent component, which should be using tokens
-$menuContentVerticalPadding: 6px; // this comes from the MenuContent component, which should be using tokens
-
-.filterMenuButton {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  margin: 0 calc(#{$gap} / -2);
-
-  > * {
-    margin: 0 calc(#{$gap} / 2);
-  }
-}

package/dist/iife/FilterSplitButton.module-LMMEHFXQ.scss

@@ -1,133 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-// The styling and mixin in this file originally comes from @kaizen/draft-button styles.module.scss and I modify it to suit with the `SplitButton` for `FilterMenuButton`.
-
-@mixin button-reset {
-  appearance: none;
-  background: transparent;
-  border: none;
-  font: inherit;
-  margin: 0;
-  transition: none; // override Murmur global styles :(
-}
-
-@mixin button-base {
-  font-family: $typography-button-primary-font-family;
-  line-height: $typography-button-primary-line-height;
-  letter-spacing: $typography-button-primary-letter-spacing;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  min-height: $spacing-xl;
-  position: relative;
-  text-align: center;
-  cursor: pointer;
-  overflow: visible;
-  color: $color-blue-500;
-  background: $color-blue-100;
-  border-color: $border-borderless-border-color;
-
-  &:hover {
-    background: $color-blue-200;
-  }
-}
-
-.filterSelectButton {
-  display: flex;
-}
-
-.primaryActionButton {
-  @include button-reset;
-  @include button-base;
-
-  padding-right: calc(#{$spacing-md} * 0.75);
-  padding-left: calc(#{$spacing-md} * 0.75);
-  border-top-left-radius: $border-solid-border-radius;
-  border-bottom-left-radius: $border-solid-border-radius;
-
-  &:hover {
-    color: $color-blue-600;
-  }
-}
-
-.primaryActionButton.splitButtonFocus {
-  border: $border-solid-border-width $border-solid-border-style;
-  border-color: $color-blue-400;
-  border-right-width: 0;
-  border-radius: $border-solid-border-radius;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-
-  &:hover {
-    background: $color-blue-100;
-  }
-}
-
-.primaryActionButton.noClearButton.splitButtonFocus {
-  border-right-width: $border-solid-border-width;
-  border-radius: $border-solid-border-radius;
-
-  &:hover {
-    background: $color-blue-100;
-  }
-}
-
-.clearButton {
-  @include button-reset;
-  @include button-base;
-
-  width: 50px;
-  justify-content: center;
-  border-top-right-radius: $border-solid-border-radius;
-  border-bottom-right-radius: $border-solid-border-radius;
-}
-
-.clearButton.splitButtonFocus {
-  border: $border-solid-border-width $border-solid-border-style;
-  border-color: $color-blue-400;
-  border-left-width: 0;
-  border-radius: $border-solid-border-radius;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-
-  &:hover {
-    background: $color-blue-100;
-    color: $color-blue-500;
-  }
-}
-
-.noClearButton {
-  border-top-right-radius: $border-solid-border-radius;
-  border-bottom-right-radius: $border-solid-border-radius;
-
-  &:focus {
-    border: $border-solid-border-width $border-solid-border-style;
-  }
-}
-
-.filterName {
-  font-weight: $typography-button-primary-font-weight;
-  margin-right: calc(#{$spacing-md} / 3);
-}
-
-.metadata {
-  font-size: $typography-button-secondary-font-size;
-  font-weight: $typography-button-secondary-font-weight;
-  letter-spacing: $typography-button-secondary-letter-spacing;
-}
-
-.button {
-  border: $border-solid-border-width $border-solid-border-style;
-  border-radius: $border-solid-border-radius;
-  border-color: transparent;
-}
-
-// This is a temporary solution to mark an active state of the button
-// until it's decided whether this should be part of kaizen button or not
-.buttonActive {
-  border-color: $color-blue-400;
-  background: $color-blue-100;
-}

package/dist/iife/FloatingCalendarWrapper.module-62NLSOUD.scss

@@ -1,12 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.calendarWrapper {
-  background-color: $color-white;
-  z-index: 1010;
-  box-shadow: $shadow-large-box-shadow;
-  border-radius: $border-borderless-border-radius;
-  padding: $spacing-md;
-}

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