@kaizen/components 1.4.20 → 1.4.22-canary.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/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;
-}

package/dist/iife/Table.module-LCDRXCBP.scss

@@ -1,233 +0,0 @@
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/animation";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-@import "./mixins";
-
-// Taken from design-tokens/sass/shadow
-// we need control of the x and y offset in this component
-$box-shadow-color-sm: rgba(53, 55, 74, 0.09);
-$row-height: 60px;
-$row-height-data-variant: 48px;
-
-.anchorReset {
-  text-decoration: none;
-  color: $color-purple-800;
-  display: block;
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: none;
-  }
-
-  &.headerRowCellButtonReversed {
-    color: $color-white;
-  }
-}
-
-.container {
-  width: 100%;
-  margin-bottom: $spacing-sm;
-}
-
-.headerRowCell {
-  display: flex;
-  align-items: stretch;
-  text-align: start;
-  justify-content: flex-start;
-  // The 8px usually makes the height of the header cell 40px
-  padding: 8px $spacing-md;
-  // This is required as so the tooltip will display directly above the header cell
-  position: relative;
-}
-
-.headerRowCellNoWrap {
-  .headerRowCellLabel {
-    // It appears that this ellipsis is not showing 🤔
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-}
-
-.headerRowCellAlignCenter {
-  .headerRowCellLabelAndIcons {
-    text-align: center;
-    justify-content: center;
-  }
-}
-
-.headerRowCellAlignEnd {
-  .headerRowCellLabelAndIcons {
-    text-align: end;
-    justify-content: flex-end;
-  }
-}
-
-.headerRowCellCheckbox {
-  margin-right: 10px;
-}
-
-// The .headerRowCell wrapper is required to increase the specificity, as so
-// we can override the `Tooltip` component's styling.
-.headerRowCell .headerRowCellTooltip {
-  flex: 1 1 100%;
-  width: 100%;
-  display: flex;
-  align-items: stretch;
-}
-
-.headerRowCellButton {
-  @include button-reset;
-  composes: anchorReset;
-}
-
-.headerRowCellButton,
-.headerRowCellNoButton {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  // Ensures that the 100% doesn't go outside of the `headerRowCell` width
-  box-sizing: border-box;
-}
-
-.headerRowCellLabelAndIcons {
-  display: flex;
-  align-items: center;
-  flex: 1 1 100%;
-  width: 100%;
-}
-
-.headerRowCellTooltipIcon {
-  color: $color-blue-500;
-  margin-right: $spacing-xs;
-}
-
-.headerRowCellIcon {
-  color: rgba($color-purple-800-rgb, 0.7);
-  height: 20px;
-
-  .headerRowCellActive & {
-    color: $color-purple-800;
-  }
-}
-
-.card {
-  @include button-reset;
-  background: $color-white;
-  border: solid 1px rgba($color-purple-700-rgb, 0.1);
-  transition: box-shadow $animation-duration-rapid,
-    border-color $animation-duration-rapid, margin $animation-duration-rapid,
-    padding $animation-duration-rapid, width $animation-duration-rapid;
-
-  // This is an optical hack to stop the card shadow from overlapping over
-  // the proceeding cards
-  box-shadow: 0px 4px 6px rgba(53, 55, 74, 0.04);
-
-  // These css properties are required for when the rows are anchor elements
-  composes: anchorReset;
-
-  &:not(:first-child) {
-    margin-top: -1px;
-  }
-
-  &:last-child {
-    border-bottom-left-radius: $border-solid-border-radius;
-    border-bottom-right-radius: $border-solid-border-radius;
-  }
-
-  &:hover {
-    will-change: box-shadow, border-color, margin, padding, width;
-  }
-
-  &.well {
-    margin-top: $spacing-sm;
-  }
-}
-
-// target the first child card when there is a heading present
-[role="rowgroup"] + .card {
-  border-top-left-radius: $border-solid-border-radius;
-  border-top-right-radius: $border-solid-border-radius;
-  box-shadow: $shadow-small-box-shadow;
-}
-
-.card:first-child {
-  border-top-left-radius: $border-solid-border-radius;
-  border-top-right-radius: $border-solid-border-radius;
-  box-shadow: $shadow-small-box-shadow;
-}
-
-.row {
-  display: flex;
-}
-
-.well {
-  border-color: $border-borderless-border-color;
-  box-shadow: none;
-  border-radius: $border-solid-border-radius;
-  background-color: $color-gray-300;
-  margin-bottom: $spacing-sm;
-}
-
-.popout {
-  box-shadow: $shadow-large-box-shadow;
-}
-
-.expanded {
-  position: relative;
-  z-index: 1;
-  margin-left: calc(#{$spacing-sm} * -1);
-  margin-right: calc(#{$spacing-sm} * -1);
-  padding-left: $spacing-sm;
-  padding-right: $spacing-sm;
-}
-
-.hasHoverState {
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
-
-  &.expanded {
-    width: calc(100% + #{$spacing-md});
-  }
-
-  &:focus,
-  &:hover {
-    background-color: $color-gray-100;
-  }
-}
-
-.rowCell {
-  min-height: $row-height;
-  padding: 0 $spacing-md;
-  display: flex;
-  align-items: center;
-  // These css properties are required for when the cells are anchor elements
-  composes: anchorReset;
-
-  .defaultSpacing & {
-    padding: $spacing-sm $spacing-md;
-  }
-
-  .dataVariant & {
-    min-height: $row-height-data-variant;
-  }
-}
-
-.rowCellAlignCenter {
-  justify-content: center;
-  text-align: center;
-}
-
-.rowCellAlignEnd {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-.headerRowCellIconAlignCenter,
-.headerRowCellIconAlignEnd {
-  //makes sure the label doesn't move on hover when not left aligned
-  margin-right: -20px;
-}