@kaizen/components 1.4.20-canary.3469 → 1.4.21

package/dist/iife/ProgressBar.module-RL2UWVEH.scss

@@ -0,0 +1,91 @@
+@import "~@kaizen/design-tokens/sass/color";
+
+$height: 10px;
+
+@mixin animation-background($color) {
+  background: linear-gradient(90deg, transparent, #{$color} 75%, transparent);
+}
+
+.label {
+  color: $color-purple-800;
+  text-align: center;
+}
+
+.subtext {
+  color: $color-purple-800;
+  text-align: center;
+  opacity: 0.8;
+}
+
+.progressBackground {
+  width: 100%;
+  background: $color-gray-300;
+  border-radius: $height;
+  height: $height;
+  overflow: hidden;
+  position: relative;
+}
+
+@keyframes pulse {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(200%);
+  }
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  border-radius: $height;
+  overflow: hidden;
+  right: 0;
+  transition: transform 200ms ease;
+}
+
+.positive {
+  composes: progress;
+  background: $color-green-400;
+  &::after {
+    @include animation-background($color-green-300);
+  }
+}
+
+.informative {
+  composes: progress;
+  background: $color-blue-400;
+  &::after {
+    @include animation-background($color-blue-300);
+  }
+}
+
+.cautionary {
+  composes: progress;
+  background: $color-yellow-400;
+  &::after {
+    @include animation-background($color-yellow-300);
+  }
+}
+
+.negative {
+  composes: progress;
+  background: $color-red-400;
+}
+
+.isAnimating {
+  &::after {
+    opacity: 1;
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 50%;
+    animation: pulse 2s infinite;
+    transition: opacity 0.2s;
+  }
+}

package/dist/iife/RichTextContent.module-4HA44IM4.scss

@@ -0,0 +1,5 @@
+@import "../mixins";
+
+.content > :global(.ProseMirror) {
+  @include contentStyles;
+}

package/dist/iife/RichTextEditor.module-ZHXEK4XJ.scss

@@ -0,0 +1,97 @@
+@import "@kaizen/design-tokens/sass/animation";
+@import "@kaizen/design-tokens/sass/border";
+@import "@kaizen/design-tokens/sass/color";
+@import "@kaizen/design-tokens/sass/spacing";
+@import "@kaizen/design-tokens/sass/typography";
+@import "../mixins";
+
+.editor > :global(.ProseMirror) {
+  @include contentStyles;
+  border-radius: $border-solid-border-radius;
+  padding: $spacing-sm calc(#{$spacing-xs} * 3);
+  position: relative;
+  transition: background-color $animation-duration-immediate,
+    border-color $animation-duration-immediate;
+
+  &:hover,
+  &:focus {
+    border-color: $color-gray-600;
+    background: $color-gray-200;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:global(.focus-visible)::after {
+    $focus-ring-offset: 5px;
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    background: transparent;
+    border-radius: 2px 2px $border-focus-ring-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: calc(-1 * #{$focus-ring-offset});
+    left: calc(-1 * #{$focus-ring-offset});
+    right: calc(-1 * #{$focus-ring-offset});
+    bottom: calc(-1 * #{$focus-ring-offset});
+  }
+}
+
+.editor.hasToolbar > :global(.ProseMirror) {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
+.editorWrapper {
+  position: relative;
+  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+  background: $color-white;
+  border-radius: $border-solid-border-radius;
+  word-wrap: break-word;
+
+  &:hover,
+  &:focus-within {
+    border-color: $color-gray-600;
+    .toolbar {
+      border-color: $color-gray-600;
+    }
+  }
+
+  &.error {
+    &,
+    .toolbar {
+      border-color: $color-red-500;
+    }
+
+    &:hover {
+      &,
+      .toolbar {
+        border-color: $color-red-600;
+      }
+    }
+  }
+
+  &.caution {
+    &,
+    .toolbar {
+      border-color: $color-yellow-600;
+    }
+
+    &:hover {
+      &,
+      .toolbar {
+        border-color: $color-yellow-700;
+      }
+    }
+  }
+}
+
+@for $i from 1 through 20 {
+  .editor.rows#{$i} > :global(.ProseMirror) {
+    min-height: calc(#{$typography-paragraph-body-line-height} * #{$i});
+  }
+}

package/dist/iife/RoadblockModal.module-KVZCYLF2.scss

@@ -0,0 +1,45 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/deprecated-component-library-helpers/styles/color";
+@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
+@import "~@kaizen/component-library/styles/responsive";
+
+$dt-roadblock-header-background: $color-orange-100;
+
+.modal {
+  composes: genericModal from "../Primitives/GenericModal.module.scss";
+  min-width: 300px;
+  max-width: 600px;
+}
+
+.header {
+  padding: $spacing-lg $spacing-md $spacing-sm;
+  text-align: center;
+  position: relative;
+}
+
+.headerBackground {
+  background-color: $dt-roadblock-header-background;
+  height: 120px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
+}
+
+.body {
+  padding: $spacing-md $spacing-xxxxl $spacing-sm;
+}
+
+.iconContainer {
+  position: relative;
+  margin-bottom: $spacing-sm;
+}
+
+.spotIcon {
+  width: 155px;
+  height: 155px;
+  margin: 0 auto;
+}

package/dist/iife/Select.module-6LHWOGGY.scss

@@ -0,0 +1,391 @@
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+
+// Should match the values for the Input component
+$input-height: 48px;
+$input-placeholder-opacity: 0.5;
+
+$focus-border-color: $color-blue-500;
+
+%focus-border {
+  $focus-ring-offset: calc((#{$border-focus-ring-border-width} * -2) - 1px);
+  content: "";
+  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: $focus-border-color;
+  top: $focus-ring-offset;
+  left: $focus-ring-offset;
+  right: $focus-ring-offset;
+  bottom: $focus-ring-offset;
+}
+
+@mixin base-font-style() {
+  font-family: $typography-paragraph-body-font-family;
+  font-weight: $typography-paragraph-body-font-weight;
+  font-size: $typography-paragraph-body-font-size;
+  line-height: $typography-paragraph-body-line-height;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  color: $color-purple-800;
+}
+
+.specificityIncreaser {
+  .multiValue {
+    margin: 0.2375rem;
+    z-index: 1;
+  }
+
+  .dropdownIndicator {
+    color: rgba($color-purple-800-rgb, 0.7);
+    &:hover {
+      color: rgba($color-purple-800-rgb, 0.7);
+    }
+  }
+
+  .control {
+    &.disabled {
+      opacity: 0.3;
+    }
+    min-height: $input-height;
+    border: $border-solid-border-width $border-solid-border-style
+      $color-gray-500;
+    border-radius: $border-solid-border-radius;
+
+    &:hover {
+      border-color: $color-gray-600;
+      background-color: $color-gray-100;
+      cursor: pointer;
+    }
+
+    &:focus-within {
+      &::after {
+        @extend %focus-border;
+      }
+    }
+  }
+
+  .valueContainer {
+    font-family: $typography-paragraph-body-font-family;
+    font-size: $typography-paragraph-body-font-size;
+  }
+
+  .indicatorsContainer {
+    z-index: 1;
+  }
+
+  .loadingMessage {
+    @include base-font-style();
+  }
+
+  .focusedControl {
+    box-shadow: none;
+
+    &:hover {
+      box-shadow: none;
+    }
+  }
+
+  .placeholder {
+    @include base-font-style();
+    opacity: $input-placeholder-opacity;
+  }
+
+  .menu {
+    // Temporary 6px until we redesign this component with Inter
+    border: 6px $border-solid-border-style transparent;
+    border-radius: $border-solid-border-radius;
+    box-shadow: $shadow-large-box-shadow;
+    z-index: 3;
+
+    // built-in class of React Select that is not easily styled any other way in CSS
+    // (This is the "MenuList" div that wraps all the options)
+    > div {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  .groupHeading {
+    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;
+    text-transform: capitalize;
+    color: rgba($color-purple-800-rgb, 0.7);
+  }
+
+  .option {
+    @include base-font-style();
+    cursor: pointer;
+    border-radius: $border-focus-ring-border-radius;
+    border-width: $border-focus-ring-border-width;
+    border-style: $border-focus-ring-border-style;
+    border-color: transparent;
+  }
+
+  .focusedOption {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
+    border-color: $focus-border-color;
+    &.disabledOption {
+      color: $color-purple-800;
+      border-style: $border-dashed-border-style;
+      border-width: $border-focus-ring-border-width;
+      border-color: $color-gray-500;
+      background: transparent;
+    }
+
+    &:active {
+      background-color: $color-blue-100;
+    }
+  }
+
+  .selectedOption {
+    &:not(.focusedOption) {
+      background-color: transparent;
+    }
+    font-weight: $typography-paragraph-bold-font-weight;
+    color: $color-blue-500;
+  }
+
+  .disabledOption {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+
+  .noOptionsMessage {
+    @include base-font-style();
+  }
+
+  .singleValue {
+    @include base-font-style();
+  }
+
+  &.reversed {
+    .singleValue {
+      color: $color-white;
+    }
+    .singleValueOverrides {
+      color: $color-white;
+    }
+
+    .input {
+      color: $color-white;
+    }
+  }
+
+  &.error {
+    .control {
+      border: $border-solid-border-width $border-solid-border-style
+        $color-red-500;
+    }
+  }
+
+  &.default {
+    &.reversed {
+      .control {
+        background: transparent;
+        color: $color-white;
+        border-color: $color-white;
+        border-radius: $border-borderless-border-radius;
+
+        &:hover {
+          background: rgba($color-white-rgb, 0.2);
+        }
+
+        &.disabled {
+          opacity: 0.3;
+        }
+      }
+
+      .dropdownIndicator,
+      .clearIndicator {
+        color: $color-white;
+      }
+
+      .placeholder {
+        color: $color-white;
+      }
+
+      &.error {
+        .control {
+          border: $border-solid-border-width $border-solid-border-style
+            $color-red-300;
+        }
+      }
+    }
+  }
+
+  &.secondary,
+  &.secondarySmall {
+    &.default {
+      .control {
+        background: transparent;
+        border: $border-borderless-border-width $border-borderless-border-style
+          $border-borderless-border-color;
+        border-radius: $border-borderless-border-radius;
+
+        .singleValue {
+          color: $color-blue-500;
+        }
+
+        &:hover {
+          background: $color-blue-100;
+        }
+
+        &.disabled {
+          opacity: 0.3;
+        }
+
+        &.focusedControl {
+          background: $color-blue-100;
+
+          &::after {
+            @extend %focus-border;
+          }
+        }
+      }
+
+      .dropdownIndicator {
+        color: $color-blue-500;
+      }
+    }
+
+    &.reversed {
+      .control {
+        background: rgba($color-white-rgb, 0.1);
+        color: $color-white;
+        border: $border-borderless-border-width $border-borderless-border-style
+          $border-borderless-border-color;
+        border-radius: $border-borderless-border-radius;
+
+        &:hover {
+          background: rgba($color-white-rgb, 0.2);
+        }
+
+        &.disabled {
+          opacity: 0.3;
+        }
+      }
+
+      .dropdownIndicator {
+        color: $color-white;
+      }
+
+      $secondary-reversed-focus-color: $color-blue-300;
+
+      .focusedControl {
+        border-color: $secondary-reversed-focus-color;
+
+        &:hover {
+          border-color: $secondary-reversed-focus-color;
+        }
+      }
+
+      .placeholder {
+        color: $color-white;
+      }
+    }
+  }
+
+  &.secondarySmall.secondarySmall {
+    $secondary-small-select-height: 24px;
+
+    &.reversed {
+      .control {
+        background: transparent;
+        border: 0;
+
+        &:hover {
+          background: transparent;
+        }
+      }
+    }
+
+    .control {
+      min-height: 0;
+      height: auto;
+
+      > div {
+        // see note on > div within .notFullWidth below for explanation
+        height: $secondary-small-select-height;
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .valueContainer {
+        height: $secondary-small-select-height;
+      }
+
+      .singleValue {
+        font-family: $typography-paragraph-extra-small-font-family;
+        font-weight: $typography-paragraph-extra-small-font-weight;
+        font-size: $typography-paragraph-extra-small-font-size;
+        line-height: $typography-paragraph-extra-small-line-height;
+        letter-spacing: $typography-paragraph-extra-small-letter-spacing;
+      }
+
+      .singleValueOverrides {
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+
+    .indicatorsContainer {
+      z-index: 1;
+    }
+
+    .dropdownIndicator {
+      padding-top: 0;
+      padding-bottom: 0;
+      transform: translateY(1px);
+
+      // Usually reaching into the Icon component like this is a no-no, but
+      // in this case we don't have access to the component in the middle which is
+      // part of react-select. I thought this would be better than hacking the
+      // structure of that component to allow one custom prop to trickle through.
+      > svg {
+        height: 14px;
+        width: 14px;
+      }
+    }
+  }
+
+  &.notFullWidth {
+    .control {
+      display: inline-flex;
+      max-width: 100%;
+
+      > div {
+        // If this CSS is removed, then the control becomes too tall when
+        // it ellipsizes. It's strange, as the parent element is
+        // display: inline-block, so you wouldn't expect it to have any affect,
+        // but it works and was honesty a fluke from some unintentionally
+        // leftover code when refactoring to support IE11 :shrug
+        // I don't like the descendent selector, but there doesn't seem to be
+        // a way to customise this element in react-select.
+        height: 44px; // fixed height required for vertical centering, due to IE11 hack
+        flex-wrap: nowrap;
+        display: flex;
+      }
+    }
+
+    .singleValueOverrides {
+      overflow: hidden;
+      position: static;
+      white-space: nowrap;
+      top: 0px;
+      transform: none;
+      max-width: 100%;
+    }
+
+    .singleValue {
+      max-width: 100%;
+    }
+  }
+}

package/dist/iife/Skirt.module-S3GPHMMQ.scss

@@ -0,0 +1,32 @@
+@import "~@kaizen/design-tokens/sass/color";
+
+$dt-color-background-color-default: $color-purple-600;
+$dt-color-background-color-education: $color-blue-100;
+
+.container {
+  position: relative;
+}
+
+// Actual height is determined in JavaScript
+.underlay {
+  box-sizing: content-box;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+}
+
+.defaultVariant {
+  background-color: $dt-color-background-color-default;
+}
+
+.educationVariant {
+  background-color: $dt-color-background-color-education;
+}
+
+.content {
+  position: relative;
+  z-index: 2;
+}

package/dist/iife/SkirtCard.module-6YQ4PS2K.scss

@@ -0,0 +1,16 @@
+@import "~@kaizen/design-tokens/sass/layout";
+@import "../variables";
+
+.wrapper {
+  @media (max-width: $layout-breakpoints-large) {
+    margin-left: $content-margin-width-on-medium-and-small * -1;
+    margin-right: $content-margin-width-on-medium-and-small * -1;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  @media (max-width: $layout-breakpoints-medium) {
+    border-radius: 0;
+    margin-left: $content-margin-width-on-medium-and-small * -1;
+    margin-right: $content-margin-width-on-medium-and-small * -1;
+  }
+}

package/dist/iife/SplitButton.module-WMGCIDDK.scss

@@ -0,0 +1,4 @@
+.splitButton {
+  display: inline-flex;
+  align-items: center;
+}

package/dist/iife/StatelessMenu.module-SX2T5P4I.scss

@@ -0,0 +1,3 @@
+.buttonWrapper {
+  display: inline-block;
+}