@kaizen/components 1.4.19 → 1.4.20-canary.3469

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

@@ -1,91 +0,0 @@
-@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

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

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

@@ -1,97 +0,0 @@
-@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

@@ -1,45 +0,0 @@
-@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

@@ -1,391 +0,0 @@
-@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

@@ -1,32 +0,0 @@
-@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

@@ -1,16 +0,0 @@
-@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

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

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

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