@kaizen/components 1.4.24 → 1.4.26

package/dist/iife/RadioGroup.module-PDLRO572.scss

@@ -1,23 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.radioGroupLabel {
-  margin-bottom: $spacing-sm;
-  label {
-    :global(.ideal-sans) & {
-      // This is to override bootstrap styles. Remove when appropriate
-      padding-top: 0;
-    }
-  }
-  &.reversed {
-    color: $color-white;
-  }
-}
-.radioGroupContainer {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: $spacing-sm;
-  &.noBottomMargin {
-    margin-bottom: 0;
-  }
-}

package/dist/iife/RemovableFilterTrigger.module-SJ37V6UZ.scss

@@ -1,29 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "../mixins";
-
-.trigger {
-  display: inline-flex;
-
-  .triggerButton {
-    border-top-left-radius: $border-solid-border-radius;
-    border-bottom-left-radius: $border-solid-border-radius;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .removeButton {
-    @include button;
-    width: $spacing-xl;
-    justify-content: center;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-top-right-radius: $border-solid-border-radius;
-    border-bottom-right-radius: $border-solid-border-radius;
-  }
-
-  .divider {
-    border-left: 1px solid $color-blue-300;
-  }
-}

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/SearchField.module-2EV6HGZE.scss

@@ -1,6 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.label {
-  display: block;
-  margin-bottom: $spacing-xs; // @note: add gap between label and input
-}

package/dist/iife/SearchInput.module-RQEF3FWR.scss

@@ -1,6 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.inputSearchContainer {
-  position: relative;
-  margin: 0 $spacing-sm;
-}

package/dist/iife/SectionDivider.module-AN4OA4O3.scss

@@ -1,3 +0,0 @@
-.divider {
-  margin: 0.5rem 0;
-}

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/Select.module-WOGFQRYI.scss

@@ -1,8 +0,0 @@
-.container {
-  position: relative;
-  width: 100%;
-}
-
-.notFullWidth {
-  width: 180px;
-}

package/dist/iife/SelectionControlButton.module-HO7BZ2UP.scss

@@ -1,81 +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";
-@import "../../../mixins";
-
-$focus-ring-offset: 1px;
-
-.button {
-  @include button-reset;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  font-family: $typography-button-secondary-font-family;
-  font-weight: $typography-button-secondary-font-weight;
-  font-size: $typography-button-secondary-font-size;
-  line-height: $typography-button-secondary-line-height;
-  letter-spacing: $typography-button-secondary-letter-spacing;
-  position: relative;
-
-  color: $color-blue-500;
-
-  border: $border-solid-border-width $border-solid-border-style;
-  border-color: $border-borderless-border-color;
-  border-radius: $border-solid-border-radius;
-
-  //       4px       8px
-  padding: 0.25rem 0.5rem;
-
-  &:hover,
-  &:active,
-  &:focus {
-    &:not(.isDisabled) {
-      background-color: $color-blue-100;
-    }
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:global(.focus-visible)::after {
-    $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: $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});
-  }
-
-  display: inline-flex;
-  gap: $spacing-xs;
-  align-items: center;
-
-  // TODO: copied from Calendar button since the design is not settled
-  &.isDisabled {
-    pointer-events: none;
-    color: rgba($color-purple-800-rgb, 0.3);
-    opacity: 1;
-
-    :global(.js-focus-visible) & {
-      // hide native focus ring when :focus but not :focus-visible
-      &:focus {
-        outline: none;
-        border: 2px solid transparent;
-      }
-
-      &:global(.focus-visible)::after {
-        border-style: $border-dashed-border-style;
-        border-color: $color-gray-400;
-      }
-    }
-  }
-}