@kaizen/components 1.4.21 → 1.4.22-canary.1

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

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/Slider.module-EIBFJ2LP.scss

@@ -1,42 +0,0 @@
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/layout";
-
-.wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-.labelWrapper {
-  margin-bottom: $spacing-sm;
-}
-
-@media (min-width: $layout-breakpoints-medium) {
-  .labelInline {
-    &.wrapper {
-      align-items: center;
-      flex-direction: row;
-    }
-
-    .labelWrapper {
-      flex: 1;
-    }
-
-    .inputWrapper {
-      flex-basis: 50%;
-    }
-  }
-}
-
-.descriptionDisabled {
-  opacity: 0.3;
-}
-
-.readOnlyMessage {
-  text-align: center;
-  font-family: $typography-paragraph-small-font-family;
-  font-size: $typography-paragraph-small-font-size;
-  font-weight: $typography-paragraph-bold-font-weight;
-  line-height: $typography-paragraph-body-line-height;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-}

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

package/dist/iife/Tab.module-4S535DQG.scss

@@ -1,105 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/typography";
-
-.tab {
-  display: inline-flex;
-  align-items: center;
-  border: 0;
-  border-top: 2px solid transparent;
-  border-left: 2px solid transparent;
-  border-right: 2px solid transparent;
-  border-top-left-radius: $border-borderless-border-radius;
-  border-top-right-radius: $border-borderless-border-radius;
-  background: $color-white;
-  white-space: nowrap;
-  text-decoration: none;
-  padding: $spacing-md $spacing-md;
-  margin: 0;
-  font-family: $typography-heading-4-font-family;
-  font-size: $typography-heading-4-font-size;
-  font-weight: $typography-heading-4-font-weight;
-  line-height: $typography-heading-4-line-height;
-  letter-spacing: $typography-heading-4-letter-spacing;
-  color: $color-purple-800;
-
-  &:not(:first-child) {
-    margin-inline-start: $spacing-xs;
-  }
-
-  &:not(:disabled):hover {
-    background: $color-blue-100;
-    color: $color-blue-500;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:global(.focus-visible) {
-    background: $color-blue-100;
-    color: $color-blue-500;
-    border-color: $color-blue-500;
-  }
-}
-
-.tab[data-selected] {
-  position: relative;
-  color: $color-blue-500;
-
-  &::before {
-    content: "";
-    display: block;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    background-color: currentColor;
-    height: 5px;
-    width: 100%;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-}
-
-.tab:disabled {
-  opacity: 0.3;
-}
-
-.badge {
-  margin-inline-start: $spacing-sm;
-  display: inline-flex;
-  align-items: center;
-}
-
-@media (forced-colors: active) {
-  .tab {
-    border: 2px solid transparent;
-
-    &: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: transparent;
-      top: calc(-1 * #{$focus-ring-offset});
-      left: calc(-1 * #{$focus-ring-offset});
-      right: calc(-1 * #{$focus-ring-offset});
-      bottom: calc(-1 * #{$focus-ring-offset});
-    }
-  }
-
-  .tab.selected::before {
-    // High contrast also doesn't see the pseudo element created to show the active tab.
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-bottom: 2px solid transparent;
-  }
-}

package/dist/iife/TabList.module-FVWF5RCV.scss

@@ -1,11 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-
-.tabList {
-  border-bottom: 1px solid rgba($color-gray-600-rgb, 0.1);
-  padding: $spacing-xs $spacing-md 0;
-}
-
-.tabList.noPadding {
-  padding: 0;
-}