@kaizen/components 1.4.22-canary.5 → 1.4.23

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+@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;
+}