@kaizen/components 1.4.22-canary.0 → 1.4.22-canary.1

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

package/dist/iife/TabPanel.module-2YHJE4CY.scss

@@ -1,14 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-
-.tabPanel {
-  border: 2px solid transparent;
-
-  &:focus {
-    outline: none;
-  }
-  &:global(.focus-visible) {
-    border-color: $color-blue-500;
-    border-radius: $border-focus-ring-border-radius;
-  }
-}

package/dist/iife/TextArea.module-JLTW3M73.scss

@@ -1,138 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "../../variables";
-@import "../mixins";
-
-// Vars
-$input-disabled-opacity: 0.3;
-$input-disabled-border-alpha: 50%;
-
-.wrapper {
-  position: relative;
-}
-
-.textarea {
-  @include form-input-reset;
-  border-radius: $border-solid-border-radius;
-  width: 100%;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
-  padding: $spacing-sm;
-  color: $color-purple-800-rgb;
-  display: block;
-  resize: vertical;
-
-  @include form-input-placeholder {
-    line-height: 1.5;
-    color: $dt-color-form-text-color-placeholder;
-  }
-
-  &:disabled {
-    resize: none;
-  }
-}
-
-.textarea:focus + .focusRing {
-  $focus-ring-offset: 3px;
-  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: -$focus-ring-offset;
-  left: -$focus-ring-offset;
-  right: -$focus-ring-offset;
-  bottom: -$focus-ring-offset;
-  pointer-events: none;
-}
-
-.textarea.default {
-  @include form-input-focus-state {
-    background-color: $color-gray-200;
-    border-color: $color-gray-600;
-  }
-
-  &:focus + .focusRing {
-    border-color: $color-blue-500;
-  }
-
-  &:not(.error):not(.caution) {
-    &:disabled {
-      border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
-    }
-  }
-
-  &.error {
-    border-color: $color-red-500;
-
-    @include form-input-focus-state {
-      border-color: $color-red-500;
-    }
-  }
-
-  &.caution {
-    border-color: $color-yellow-600;
-
-    @include form-input-focus-state {
-      border-color: $color-yellow-600;
-    }
-  }
-
-  &.disabled {
-    background-color: $color-white;
-    border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
-    color: rgba($color-purple-800-rgb, $input-disabled-opacity);
-
-    @include form-input-placeholder {
-      opacity: $input-disabled-opacity;
-    }
-  }
-}
-
-// Reversed (Dark Backgrounds)
-.textarea.reversed {
-  @include form-input-focus-state {
-    background: rgba($color-white-rgb, 0.1);
-    border-color: $color-white;
-  }
-
-  border-color: rgba($color-white-rgb, 0.65);
-  background: transparent;
-  color: $color-white;
-
-  @include form-input-placeholder {
-    line-height: 1.5;
-    color: $color-white;
-  }
-
-  &:focus + .focusRing {
-    border-color: $color-blue-300;
-  }
-
-  &.error {
-    border-color: $color-red-300;
-
-    @include form-input-focus-state {
-      border-color: $color-red-300;
-    }
-  }
-
-  &.caution {
-    border-color: $color-yellow-400;
-
-    @include form-input-focus-state {
-      border-color: $color-yellow-400;
-    }
-  }
-
-  &.disabled {
-    background: transparent;
-    border-color: rgba($color-white-rgb, $input-disabled-opacity);
-    color: rgba($color-white-rgb, $input-disabled-opacity);
-
-    @include form-input-placeholder {
-      opacity: $input-disabled-opacity;
-    }
-  }
-}

package/dist/iife/TextAreaField.module-4K35MSCT.scss

@@ -1,20 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-
-$input-disabled-background: $color-gray-300;
-$input-disabled-opacity: 0.3;
-$input-disabled-border-alpha: 50%;
-
-.message {
-  &.disabled {
-    opacity: $input-disabled-opacity;
-  }
-}
-
-.textareaLabel {
-  margin-bottom: $spacing-xs;
-}
-
-.textareaLabelProminent {
-  margin-bottom: 0;
-}

package/dist/iife/TextField.module-KFAPVZZK.scss

@@ -1,49 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/component-library/styles/animation";
-@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
-@import "~@kaizen/deprecated-component-library-helpers/styles/type";
-@import "~@kaizen/deprecated-component-library-helpers/styles/color";
-@import "~@kaizen/component-library/styles/utils";
-@import "~@kaizen/component-library/styles/mixins/forms";
-
-@mixin input-icon($color, $reversed) {
-  color: $color;
-
-  .withReversed & {
-    color: $reversed;
-  }
-}
-
-$input-disabled-opacity: 0.3;
-
-///////////////////////////////////////////////////
-// VALIDATION STYLES
-///////////////////////////////////////////////////
-
-.success {
-  @include input-icon($color-green-500, $color-green-400);
-  @include ca-animation-fade(in);
-
-  &.disabled {
-    @include input-icon(
-      rgba($color-green-500-rgb, $input-disabled-opacity),
-      rgba($color-green-400-rgb, $input-disabled-opacity)
-    );
-  }
-}
-
-.error {
-  @include input-icon($color-red-100, $color-purple-700);
-  @include ca-animation-fade(in);
-}
-
-.caution {
-  @include input-icon($color-yellow-200, $color-purple-700);
-  @include ca-animation-fade(in);
-}
-
-.message {
-  &.disabled {
-    opacity: $input-disabled-opacity;
-  }
-}

package/dist/iife/ToggleSwitch.module-3YDF4MLF.scss

@@ -1,128 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/animation";
-@import "~@kaizen/component-library/styles/mixins/forms";
-@import "../../variables";
-
-$animation-timing: $animation-duration-immediate
-  $animation-easing-function-linear;
-$focus-ring-offset: 1px;
-
-.checkbox {
-  @include form-input-visually-hidden();
-}
-
-.track {
-  position: relative;
-  background-color: $color-gray-400;
-  border: $border-borderless-border-width $border-borderless-border-style
-    $border-borderless-border-color;
-  border-radius: $spacing-md;
-  box-sizing: content-box;
-  width: calc((#{$spacing-md} * 1.05) * 2);
-  height: calc(#{$spacing-md} * 1.25);
-  padding: 0 calc(#{$spacing-md} * 0.15);
-  display: flex;
-  align-items: center;
-  transition: background-color $animation-timing;
-
-  .checkbox:focus:not([disabled]) + &,
-  .checkbox:hover:focus:not([disabled]) + & {
-    border-color: transparent;
-    outline: 2px solid $color-blue-500;
-    outline-offset: $focus-ring-offset;
-    background-color: $color-gray-500;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .checkbox:not([disabled]) + &:hover,
-    label:hover .checkbox:not([disabled]) + & {
-      // if kz-color-iron-500-rgb-params fails, it will fallback to wisteria-500
-      // (the non-css variable token)
-      background-color: $color-purple-500;
-      background-color: $color-gray-500;
-    }
-  }
-}
-
-.thumb {
-  background-color: $color-white;
-  border: $border-borderless-border-width $border-borderless-border-style
-    $border-borderless-border-color;
-  box-sizing: content-box;
-  width: calc(#{$spacing-md} * 0.9);
-  height: calc(#{$spacing-md} * 0.9);
-  border-radius: $spacing-md;
-  transition: left $animation-timing, right $animation-timing;
-}
-
-.on {
-  .checkbox + .track {
-    border-color: $border-borderless-border-color;
-    background-color: $color-green-400;
-  }
-
-  .checkbox:focus:not([disabled]) + .track {
-    border-color: transparent;
-    background-color: $color-green-500;
-  }
-
-  .thumb {
-    position: relative;
-    right: auto;
-    left: calc(#{$spacing-md} * 1.1);
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      right: calc(#{$spacing-md} * 1.1);
-      left: auto;
-    }
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .checkbox:not([disabled]) + .track:hover,
-    label:hover & .checkbox:not([disabled]) + .track {
-      background-color: $color-green-500;
-    }
-  }
-}
-
-.off {
-  .thumb {
-    position: relative;
-    right: auto;
-    left: calc(#{$spacing-md} * -0.05);
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      right: calc(#{$spacing-md} * -0.05);
-      left: auto;
-    }
-  }
-}
-
-.reversed {
-  .checkbox:focus:not([disabled]) + .track,
-  .checkbox:hover:focus:not([disabled]) + .track {
-    outline-color: $color-blue-300;
-  }
-
-  &.off {
-    .track {
-      background-color: rgba($color-white-rgb, 0.2);
-    }
-
-    .checkbox:focus:not([disabled]) + .track,
-    .checkbox:hover:focus:not([disabled]) + .track {
-      background-color: rgba($color-white-rgb, 0.65);
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-      .checkbox:not([disabled]) + .track:hover,
-      label:hover & .checkbox:not([disabled]) + .track {
-        background-color: rgba($color-white-rgb, 0.65);
-      }
-    }
-  }
-}

package/dist/iife/ToggleSwitchField.module-BJOL7O7U.scss

@@ -1,15 +0,0 @@
-@import "~@kaizen/design-tokens/sass/typography";
-
-.container {
-  display: flex;
-}
-
-.fullWidth {
-  .inner {
-    width: 100%;
-  }
-}
-
-.on label {
-  font-weight: $typography-paragraph-bold-font-weight;
-}

package/dist/iife/Tooltip.module-YU7VOTNZ.scss

@@ -1,184 +0,0 @@
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/animation";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/component-library/styles/layers";
-@import "./variables";
-
-.tooltip {
-  position: relative; // Make this a positioned element so z-index works. (Note: Popper overrides this to absolute.)
-  pointer-events: none;
-  z-index: $ca-z-index-tooltip;
-}
-
-.tooltipContent {
-  max-width: 400px;
-  padding: 0.4375rem 0.53125rem;
-  color: $color-purple-800;
-  text-align: center;
-  font-family: $typography-paragraph-body-font-family;
-  font-size: $typography-heading-6-font-size;
-  font-weight: $typography-paragraph-body-font-weight;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  line-height: $typography-paragraph-small-line-height;
-  border-radius: $border-solid-border-radius;
-  transition: opacity $animation-duration-fast,
-    transform $animation-duration-fast;
-  box-shadow: $shadow-small-box-shadow;
-
-  &.default {
-    background-color: $color-white;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-gray-300;
-  }
-
-  &.informative {
-    background-color: $color-blue-100;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-blue-300;
-  }
-
-  &.positive {
-    background-color: $color-green-100;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-green-300;
-  }
-
-  &.cautionary {
-    background-color: $color-yellow-100;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-yellow-300;
-  }
-
-  &.highlight {
-    background-color: $color-purple-100;
-    border: $border-solid-border-width $border-solid-border-style
-      $color-purple-300;
-  }
-}
-
-.arrow {
-  // Ensure the arrow always sits on top of the tooltipContent
-  z-index: 1;
-
-  // This is required by popper, otherwise positioning issues will exist.
-  // https://github.com/popperjs/react-popper/issues/354#issuecomment-616540651
-  position: absolute;
-
-  [data-popper-placement^="top"] & {
-    bottom: 0;
-  }
-
-  [data-popper-placement^="bottom"] & {
-    top: 0;
-
-    // There is a conflict with the popper arrow styling, which also
-    // adds a transform to the arrow. Hence, we need this additional
-    // wrapper, just to rotate it.
-    .arrowInner {
-      transform: rotate(180deg);
-    }
-  }
-
-  [data-popper-placement^="left"] & {
-    right: 0;
-    .arrowInner {
-      transform: rotate(270deg);
-    }
-  }
-  [data-popper-placement^="right"] & {
-    left: 0;
-    .arrowInner {
-      transform: rotate(90deg);
-    }
-  }
-}
-
-.arrowMain::before,
-.arrowMain::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  border-left: calc(#{$arrow-width} / 2) solid transparent;
-  border-right: calc(#{$arrow-width} / 2) solid transparent;
-  margin-left: calc(#{$arrow-width} / -2);
-}
-
-.arrowMain {
-  // before styles
-  &.default::before {
-    border-top: $arrow-height solid $color-gray-300;
-  }
-
-  &.informative::before {
-    border-top: $arrow-height solid $color-blue-300;
-  }
-
-  &.positive::before {
-    border-top: $arrow-height solid $color-green-300;
-  }
-
-  &.highlight::before {
-    border-top: $arrow-height solid $color-purple-300;
-  }
-
-  &.cautionary::before {
-    border-top: $arrow-height solid $color-yellow-300;
-  }
-  // after styles
-  &:after {
-    margin-top: -3px;
-  }
-
-  &.default::after {
-    border-top: $arrow-height solid white;
-  }
-
-  &.informative::after {
-    border-top: $arrow-height solid $color-blue-100;
-  }
-
-  &.positive::after {
-    border-top: $arrow-height solid $color-green-100;
-  }
-
-  &.highlight::after {
-    border-top: $arrow-height solid $color-purple-100;
-  }
-
-  &.cautionary::after {
-    border-top: $arrow-height solid $color-yellow-100;
-  }
-}
-
-.arrowShadow::before {
-  border-top: 0px solid $color-gray-300;
-}
-
-// Triangle portion is a little darker to bring out shadow
-.arrowShadow::after {
-  border-top: $arrow-height solid rgba($color-purple-800-rgb, 0.09);
-  margin-top: 1px;
-  filter: blur(4px);
-}
-
-.displayInline {
-  display: inline;
-}
-
-.displayBlock {
-  display: block;
-}
-
-.displayInlineBlock {
-  display: inline-block;
-}
-
-.displayFlex {
-  display: flex;
-}
-
-.displayInlineFlex {
-  display: inline-flex;
-}