@kaizen/components 1.4.21 → 1.4.22-canary.1

package/dist/iife/InputSearch.module-YAL2OSZP.scss

@@ -1,238 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/component-library/styles/mixins/forms";
-@import "../../mixins";
-@import "../mixins";
-
-$input-height: 48px;
-$input-padding-before-start-icon: 1rem;
-$input-padding-between-icon-input: $spacing-sm;
-$input-padding-after-end-icon: $spacing-sm;
-$input-icon-size: 1.25rem; // 20px
-$input-padding-with-icon: calc(
-  #{$input-padding-before-start-icon} + #{$input-icon-size} + #{$input-padding-between-icon-input}
-);
-$input-disabled-opacity: 0.3;
-$border-solid-border-radius-curved: $input-height;
-
-$input-placeholder-opacity--default: 0.7;
-$start-icon-opacity--default: $input-placeholder-opacity--default;
-$input-placeholder-opacity--reversed: 0.8;
-$start-icon-opacity--reversed: $input-placeholder-opacity--reversed;
-
-// [type="search"] is required to override performance-ui global materialize CSS >:|
-$classname--input: '.input[type="search"]';
-
-// Classnames to simulate pseudo states in storybook
-$story-className--input-search-hover: ":global(.story__input-search-hover)";
-$story-className--input-search-focus: ":global(.story__input-search-focus)";
-
-.wrapper {
-  position: relative;
-}
-
-#{$classname--input} {
-  @include form-input-reset;
-
-  @include form-input-placeholder {
-    opacity: 1;
-  }
-
-  display: flex;
-  align-items: center;
-  height: $input-height;
-  width: 100%;
-  border: $border-solid-border-width $border-solid-border-style transparent;
-  border-radius: $border-solid-border-radius-curved;
-  padding-block: 0;
-  padding-inline-start: $input-padding-with-icon;
-  padding-inline-end: $input-padding-after-end-icon;
-  font-size: 1rem;
-  line-height: 1.5;
-
-  &::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-  }
-
-  .hasEndIconAdornment & {
-    padding-inline-end: calc(
-      #{$input-padding-between-icon-input} + #{$input-icon-size} + #{$input-padding-after-end-icon}
-    );
-  }
-
-  &:focus,
-  #{$story-className--input-search-focus} &,
-  &:hover,
-  #{$story-className--input-search-hover} & {
-    @include form-input-placeholder {
-      opacity: 0;
-    }
-  }
-}
-
-.focusRing {
-  #{$classname--input}:focus + &,
-  #{$story-className--input-search-focus} & {
-    $focus-ring-offset: 3px;
-    position: absolute;
-    background: transparent;
-    border-radius: $border-solid-border-radius-curved;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    top: -$focus-ring-offset;
-    left: -$focus-ring-offset;
-    right: -$focus-ring-offset;
-    bottom: -$focus-ring-offset;
-    pointer-events: none;
-  }
-}
-
-@mixin vertically-center-icon {
-  position: absolute;
-  height: $input-icon-size;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 1;
-}
-
-.startIconAdornment {
-  @include vertically-center-icon;
-  inset-inline-start: $input-padding-before-start-icon;
-}
-
-.loadingSpinner {
-  margin-top: -2px;
-}
-
-.endIconAdornment {
-  @include vertically-center-icon;
-  inset-inline-end: $input-padding-after-end-icon;
-}
-
-.disabled {
-  pointer-events: none;
-  opacity: $input-disabled-opacity;
-}
-
-///////////////////////////////////////////////////
-// THEMES
-///////////////////////////////////////////////////
-
-// Default
-.default {
-  #{$classname--input} {
-    @include form-input-placeholder {
-      color: $color-purple-800;
-      opacity: $input-placeholder-opacity--default;
-    }
-
-    border-color: $color-gray-500;
-    background-color: $color-white;
-    color: $color-purple-800;
-  }
-
-  .focusRing {
-    border-color: $color-blue-500;
-  }
-
-  .startIconAdornment {
-    color: $color-purple-800;
-    opacity: $start-icon-opacity--default;
-  }
-
-  &:hover,
-  &#{$story-className--input-search-hover},
-  &:focus-within,
-  &#{$story-className--input-search-focus} {
-    #{$classname--input} {
-      @include form-input-placeholder {
-        opacity: 1;
-      }
-      border-color: $color-gray-600;
-      background-color: $color-gray-200;
-    }
-
-    .startIconAdornment {
-      opacity: 1;
-    }
-  }
-}
-
-// Secondary
-.secondary {
-  #{$classname--input} {
-    @include form-input-placeholder {
-      color: $color-purple-800;
-      opacity: $input-placeholder-opacity--default;
-    }
-
-    border-color: transparent;
-    background-color: $color-gray-200;
-    color: $color-purple-800;
-  }
-
-  .focusRing {
-    border-color: $color-blue-500;
-  }
-
-  .startIconAdornment {
-    color: $color-purple-800;
-    opacity: $start-icon-opacity--default;
-  }
-
-  &:hover,
-  &#{$story-className--input-search-hover},
-  &:focus-within,
-  &#{$story-className--input-search-focus} {
-    #{$classname--input} {
-      @include form-input-placeholder {
-        opacity: 1;
-      }
-      border-color: transparent;
-      background-color: $color-gray-300;
-    }
-
-    .startIconAdornment {
-      opacity: 1;
-    }
-  }
-}
-
-// Reversed
-.reversed {
-  #{$classname--input} {
-    @include form-input-placeholder {
-      color: $color-white;
-      opacity: $input-placeholder-opacity--reversed;
-    }
-
-    background: rgba($color-white-rgb, 0.1);
-    color: $color-white;
-  }
-
-  .focusRing {
-    border-color: $color-blue-300;
-  }
-
-  .startIconAdornment {
-    color: $color-white;
-    opacity: $start-icon-opacity--reversed;
-  }
-
-  &:hover,
-  &#{$story-className--input-search-hover},
-  &:focus-within,
-  &#{$story-className--input-search-focus} {
-    #{$classname--input} {
-      border-color: transparent;
-      background-color: rgba($color-white-rgb, 0.2);
-    }
-  }
-
-  &.default {
-    #{$classname--input} {
-      border-color: rgba($color-white-rgb, 0.65);
-    }
-  }
-}

package/dist/iife/Label.module-QP4J7I5H.scss

@@ -1,118 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/color";
-@import "../../variables";
-
-$label-start-margin: $spacing-xs;
-
-.label,
-:global(.ideal-sans) .label {
-  // override Murmur global styles :(
-  opacity: inherit;
-  color: $dt-color-form-text-color;
-  visibility: visible;
-  width: 100%;
-  text-align: left; // fallback for IE and Edge
-  text-align: start;
-
-  &[dir="rtl"],
-  [dir="rtl"] & {
-    text-align: right; // fallback for IE and Edge
-    text-align: start;
-  }
-}
-
-.reversed {
-  color: $color-white;
-  a {
-    color: $color-white;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
-.disabled {
-  opacity: 0.3;
-}
-
-///////////////////////////////////////////////////
-// LABEL TYPES
-///////////////////////////////////////////////////
-
-// This is to override bootstrap styles. Remove when appropriate
-.text,
-:global(.ideal-sans) .text {
-  font-family: $typography-heading-6-font-family;
-  font-size: $typography-heading-6-font-size;
-  line-height: $typography-heading-6-line-height;
-  letter-spacing: $typography-heading-6-letter-spacing;
-  font-weight: $typography-heading-6-font-weight;
-}
-
-%checkboxOrRadio,
-:global(.ideal-sans) %checkboxOrRadio {
-  display: flex;
-  font-family: $typography-paragraph-body-font-family;
-  font-size: $typography-paragraph-body-font-size;
-  line-height: $typography-paragraph-body-line-height;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  font-weight: $typography-paragraph-body-font-weight;
-}
-
-.checkbox {
-  @extend %checkboxOrRadio;
-}
-
-.radio {
-  @extend %checkboxOrRadio;
-}
-
-.toggle {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-family: $typography-paragraph-body-font-family;
-  font-size: $typography-paragraph-body-font-size;
-  line-height: $typography-paragraph-body-line-height;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  font-weight: $typography-paragraph-body-font-weight;
-}
-
-.checkbox,
-.radio,
-.toggle {
-  // apply padding when label is inline with form control
-  .prependedLabel {
-    order: -1; // place label before the control
-    margin-right: $label-start-margin;
-    margin-left: 0;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      margin-right: 0;
-      margin-left: $label-start-margin;
-    }
-  }
-
-  .appendedLabel {
-    margin-right: 0;
-    margin-left: $label-start-margin;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      margin-right: $label-start-margin;
-      margin-left: 0;
-    }
-  }
-}
-
-.prominent {
-  font-family: $typography-heading-4-font-family;
-  font-weight: $typography-heading-4-font-weight;
-  font-size: $typography-heading-4-font-size;
-  line-height: $typography-heading-4-line-height;
-  letter-spacing: $typography-heading-4-letter-spacing;
-  display: block;
-  margin-bottom: $spacing-xs;
-}

package/dist/iife/LikertScaleLegacy.module-JYCJ5CON.scss

@@ -1,298 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-@mixin respond-to($media) {
-  @if $media == print {
-    @media only print {
-      @content;
-    }
-  } @else if $media == iphone {
-    @media only screen and (max-width: 767px) {
-      @content;
-    }
-  } @else if $media == ipad {
-    @media only screen and (max-width: 959px) {
-      @content;
-    }
-  }
-}
-
-$block-height: 35px;
-$desktop-rater-width: 220px;
-$desktop-rater-height: 63px;
-
-$first: $color-yellow-300;
-$second: $color-yellow-400;
-$third: $color-orange-400;
-$fourth: $color-orange-500;
-$fifth: $color-red-500;
-
-@mixin pop {
-  -webkit-animation: pop cubic-bezier(0, 0.94, 0.32, 1) 0.7s 1;
-}
-
-@mixin fill($height) {
-  &:first-child .likertItemFill {
-    border-top-left-radius: $height;
-    border-bottom-left-radius: $height;
-
-    [dir="rtl"] & {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-top-right-radius: $height;
-      border-bottom-right-radius: $height;
-    }
-
-    &:after {
-      border-top-left-radius: $height;
-      border-bottom-left-radius: $height;
-
-      [dir="rtl"] & {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-top-right-radius: $height;
-        border-bottom-right-radius: $height;
-      }
-    }
-  }
-
-  &:last-child .likertItemFill {
-    border-top-right-radius: $height;
-    border-bottom-right-radius: $height;
-
-    [dir="rtl"] & {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-top-left-radius: $height;
-      border-bottom-left-radius: $height;
-    }
-
-    &:after {
-      border-top-right-radius: $height;
-      border-bottom-right-radius: $height;
-
-      [dir="rtl"] & {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-top-left-radius: $height;
-        border-bottom-left-radius: $height;
-      }
-    }
-  }
-}
-
-@keyframes pop {
-  0% {
-    opacity: 0.5;
-    -webkit-transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform: scale(1.78);
-  }
-}
-
-.container {
-  width: $desktop-rater-width;
-  position: relative;
-  box-sizing: border-box;
-
-  @include respond-to(iphone) {
-    width: 258px;
-    position: static;
-  }
-
-  &.rated .likertItem.unselected .likertItemFill {
-    transition: background 0.1s;
-  }
-
-  &.reversed.rated .likertItem.unselected .likertItemFill {
-    background-color: transparent;
-    border-color: rgba($color-white-rgb, 0.65);
-  }
-}
-
-:global(.js-focus-visible) {
-  .likertItem:focus,
-  .likertItemFill:focus {
-    outline: none;
-  }
-
-  .reversed:not(.rated)
-    :global([data-focus-visible-added]).likertItem:focus
-    .likertItemFill {
-    outline-color: $color-blue-300;
-  }
-
-  // React seems to be causing the .focus-visible class to only be added sometimes,
-  // so we need to use [data-focus-visible-added] here instead.
-  // See https://github.com/WICG/focus-visible#2-update-your-css
-
-  :global([data-focus-visible-added]).likertItem .likertItemFill {
-    outline-offset: 1px;
-    outline: $color-blue-500 $border-focus-ring-border-style
-      $border-focus-ring-border-width;
-  }
-
-  .reversed :global([data-focus-visible-added]).likertItem .likertItemFill {
-    outline-color: $color-blue-300;
-  }
-}
-
-.itemContainer {
-  width: 100%;
-  white-space: nowrap;
-  display: inline-block;
-  height: $block-height + 2px;
-  font-size: 0;
-}
-
-.legend {
-  text-align: center;
-  position: absolute;
-  top: calc(-1 * #{$spacing-md});
-  left: 0;
-  right: 0;
-
-  @include respond-to(iphone) {
-    position: initial;
-    top: 0;
-  }
-}
-
-.likertItem {
-  margin-right: 2px;
-  margin-left: 2px;
-
-  &[dir="rtl"],
-  [dir="rtl"] & {
-    margin-right: 2px;
-    margin-left: 2px;
-  }
-
-  @include fill($block-height);
-  font-size: 1px;
-  line-height: 1;
-  padding: 0;
-  overflow-x: visible;
-  display: inline-block;
-  width: 18.5%; // 5 columns
-  position: relative;
-
-  &:first-child {
-    margin-right: 2px;
-    margin-left: 0;
-  }
-  &:last-child {
-    margin-left: 2px;
-    margin-right: 0;
-  }
-
-  &.suggested,
-  &.selected {
-    .field1 {
-      background-color: $first;
-      &:after {
-        background-color: $first;
-      }
-    }
-    .field2 {
-      background-color: $second;
-      &:after {
-        background-color: $second;
-      }
-    }
-    .field3 {
-      background-color: $third;
-      &:after {
-        background-color: $third;
-      }
-    }
-    .field4 {
-      background-color: $fourth;
-      &:after {
-        background-color: $fourth;
-      }
-    }
-    .field5 {
-      background-color: $fifth;
-      &:after {
-        background-color: $fifth;
-      }
-    }
-  }
-}
-
-.likertItemFill {
-  transition: background 0.1s, border-color 0.1s;
-  height: $block-height;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
-
-  &:hover {
-    transition: background 0s, border-color 0s;
-  }
-  &:after {
-    content: " ";
-    display: block;
-    height: 100%;
-    width: 100%;
-    pointer-events: none;
-  }
-
-  &.pop:after {
-    @include pop;
-  }
-}
-
-.reversed .likertItemFill {
-  border-color: rgba($color-white-rgb, 0.65);
-}
-
-@media only screen and (max-width: 767px) {
-  $block-height: 48px;
-
-  .container {
-    min-width: 258px;
-  }
-
-  .itemContainer {
-    height: $block-height + 2px;
-  }
-
-  .likertItem {
-    @include fill($block-height);
-  }
-
-  .likertItemFill {
-    height: $block-height;
-  }
-}
-
-@media print {
-  .legend {
-    display: none;
-  }
-
-  .container {
-    top: 1em;
-    right: 2em;
-    width: 150px;
-
-    .likertItem {
-      .likertItemFill {
-        height: 25px;
-        background: white;
-        border: 1px solid #d7d8d8;
-      }
-
-      &:first-child,
-      &:last-child {
-        .likertItemFill {
-          background: white;
-          border-width: 2px;
-        }
-      }
-    }
-  }
-}

package/dist/iife/LinkPopover-7NCAPCQ3.scss

@@ -1,22 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-
-.popoverContent {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.popoverLink {
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.paragraphFlex {
-  display: inline-flex;
-}
-
-.popoverActions {
-  border-left: 1px solid rgba($color-gray-600-rgb, 0.1);
-}

package/dist/iife/ListBox.module-5GNTZUCX.scss

@@ -1,18 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.listBox {
-  list-style: none;
-  padding: $spacing-sm;
-  margin: 0 $spacing-sm 0 0;
-  display: grid;
-  max-height: 22rem;
-  overflow-y: auto;
-}
-
-.overflown {
-  padding-right: $spacing-sm;
-}
-
-.hidden {
-  display: none;
-}

package/dist/iife/ListBox.module-RXUZV2C4.scss

@@ -1,14 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.listBox {
-  list-style: none;
-  padding: $spacing-sm;
-  margin-top: 0;
-  margin-bottom: 0;
-  display: grid;
-  max-height: 22rem;
-
-  &.focus {
-    outline: none;
-  }
-}

package/dist/iife/ListBoxSection.module-53ABDKRS.scss

@@ -1,3 +0,0 @@
-.listBoxSection {
-  display: grid;
-}