@kaizen/components 1.4.23 → 1.4.25

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/TileGrid.module-NJQFVYRS.scss

@@ -1,23 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/component-library/styles/responsive";
-@import "./variables";
-
-.grid {
-  display: grid;
-  // the more we shave off the width here,
-  // the less the tiles will grow when they lose one from the row
-  grid-template-columns: repeat(auto-fill, minmax($tileWidth - 40px, 1fr));
-  grid-gap: $spacing-md;
-
-  @include ca-media-mobile {
-    grid-template-columns: repeat(2, minmax(226px, $tileHeight));
-
-    > * {
-      width: 100%;
-    }
-  }
-
-  @media (max-width: 480px) {
-    grid-template-columns: repeat(1, 100%);
-  }
-}

package/dist/iife/TimeField.module-B4WNYAUE.scss

@@ -1,75 +0,0 @@
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-$input-height: 48px;
-
-// Classnames to simulate pseudo states in storybook
-$story-className--timefield-hover: ":global(.story__timefield-hover)";
-$story-className--timefield-focus: ":global(.story__timefield-focus)";
-
-.wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  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;
-}
-
-.input {
-  display: inline-flex;
-  align-items: center;
-  background-color: $color-white;
-  background-clip: padding-box;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
-  border-radius: $border-solid-border-radius;
-  font-size: $typography-paragraph-body-font-size;
-  line-height: $typography-paragraph-body-line-height;
-  padding: 0 $spacing-sm;
-  height: $input-height;
-  width: 100%;
-  box-sizing: border-box;
-
-  &:hover,
-  #{$story-className--timefield-hover} &,
-  &:focus-within,
-  #{$story-className--timefield-focus} & {
-    border-color: $color-gray-600;
-    background-color: $color-gray-200;
-  }
-}
-
-.input:focus-within,
-#{$story-className--timefield-focus} .input {
-  .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: $color-blue-500;
-    top: -$focus-ring-offset;
-    left: -$focus-ring-offset;
-    right: -$focus-ring-offset;
-    bottom: -$focus-ring-offset;
-    pointer-events: none;
-  }
-}
-
-.isDisabled {
-  pointer-events: none;
-  background-color: transparent;
-  border-color: $color-gray-500;
-  opacity: 0.3;
-}
-
-.error {
-  border: $border-solid-border-width $border-solid-border-style $color-red-500;
-}

package/dist/iife/TimeSegment.module-TKOTKIXH.scss

@@ -1,53 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-
-$polyfill--focus-visible: ":global(.js-focus-visible) &:global(.focus-visible)";
-
-$className--timesegment-wrapper: ".timeSegmentWrapper";
-
-// Classnames to simulate pseudo states in storybook
-$story-className--timesegment-hover: ":global(.story__timefield-hover) #{$className--timesegment-wrapper}:first-child &";
-$story-className--timesegment-focus: ":global(.story__timefield-focus) #{$className--timesegment-wrapper}:first-child &";
-
-$selectors--timesegment-hover: "&:hover, #{$story-className--timesegment-hover}";
-$selectors--timesegment-focus: "&:focus-visible, #{$polyfill--focus-visible}, #{$story-className--timesegment-focus}";
-
-// Chrome has a bug where `contenteditable` elements receive focus from external clicks.
-// This (in combination with the invisible character ​) creates boundaries
-// for the element.
-// https://stackoverflow.com/a/34445203
-#{$className--timesegment-wrapper} {
-  white-space: nowrap;
-}
-
-.timeSegment {
-  padding: 0 4px;
-  text-align: end;
-  background-color: $color-gray-300;
-  border-radius: 3px;
-  color: $color-purple-800;
-
-  #{$selectors--timesegment-hover} {
-    background-color: $color-white;
-  }
-
-  #{$selectors--timesegment-focus} {
-    color: white;
-    background: $color-blue-500;
-    outline: none;
-  }
-}
-
-.placeholder {
-  color: rgba($color-purple-800-rgb, 0.7);
-}
-
-.literal {
-  &,
-  #{$selectors--timesegment-hover} {
-    background: none;
-  }
-}
-
-.dayPeriod {
-  margin-right: 4px;
-}

package/dist/iife/TitleBlockMenuItem.module-LWVSMJTH.scss

@@ -1,99 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/typography";
-
-// We're duplicating the CSS instead of manipulating the Menu package to accept the alternate props
-.menuListItem {
-  display: flex;
-}
-.menuItem {
-  display: flex;
-  align-items: center;
-  flex: 1 1 auto;
-  box-sizing: border-box;
-  background: none;
-  border: 2px transparent solid;
-  text-align: left;
-  padding: 6px calc(#{$spacing-sm} - 2px);
-  margin: 0 $spacing-xs;
-  min-height: calc(1.75 * #{$spacing-md});
-  border-radius: 4px;
-  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;
-  text-decoration: none;
-  color: $color-purple-800;
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  &:not(.menuItem--disabled):hover,
-  &:focus {
-    background: $color-blue-100;
-    color: $color-blue-500;
-
-    .menuItem__Icon {
-      color: $color-blue-500;
-    }
-
-    &.menuItem--destructive {
-      background: $color-red-100;
-      color: $color-red-600;
-
-      .menuItem__Icon {
-        color: $color-red-600;
-      }
-    }
-  }
-
-  &:focus-visible,
-  &.focus-visible {
-    border-color: $color-blue-500;
-    outline: none;
-  }
-
-  [dir="rtl"] & {
-    text-align: right;
-  }
-}
-
-.menuItem--disabled {
-  color: rgba($color-purple-800-rgb, 0.3);
-  .menuItem__Icon {
-    color: rgba($color-purple-800-rgb, 0.3);
-  }
-}
-
-.menuItem--active {
-  color: $color-blue-500;
-  font-weight: $typography-paragraph-bold-font-weight;
-}
-
-.menuItem--destructive {
-  color: $color-red-600;
-  .menuItem__Icon {
-    color: $color-red-600;
-  }
-}
-
-.menuItem--destructive.menuItem--disabled {
-  color: rgba($color-red-600-rgb, 0.3);
-  .menuItem__Icon {
-    color: rgba($color-red-600-rgb, 0.3);
-  }
-}
-
-.menuItem__Label {
-  flex-grow: 1;
-}
-
-.menuItem__Icon {
-  margin-inline-end: calc(#{$spacing-md} / 3);
-  display: flex;
-  align-self: flex-start;
-  transform: translateY(0.2em);
-  color: rgba($color-purple-800-rgb, 0.75);
-}