@kaizen/components 1.4.23 → 1.4.25

package/dist/iife/Input.module-FBWZRX37.scss

@@ -1,336 +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 "../../variables";
-@import "../mixins";
-
-$input-height: 48px;
-$input-base-padding-horizontal: $spacing-sm;
-$input-icon-size: 1.25rem; // 20px
-$input-placeholder-opacity: 0.5;
-$input-disabled-background: $color-gray-300;
-$input-disabled-opacity: 0.3;
-$input-disabled-border-alpha: 50%;
-$input-with-icon-padding: calc(
-  #{$input-icon-size} + calc(#{$spacing-md} * 0.75)
-);
-
-.wrapper {
-  position: relative;
-
-  &.hasStatus {
-    z-index: 1;
-  }
-
-  &:hover {
-    z-index: 2;
-  }
-
-  &:focus-within {
-    z-index: 3;
-  }
-}
-
-.input {
-  @include form-input-reset;
-  background-color: transparent;
-  background-clip: padding-box;
-  border: $border-solid-border-width $border-solid-border-style transparent;
-  border-radius: $border-solid-border-radius;
-  display: block;
-  font-size: 1rem;
-  line-height: 1.5;
-  padding: 0 $input-base-padding-horizontal;
-  height: $input-height;
-  width: 100%;
-  margin-bottom: 2px;
-
-  @include form-input-placeholder {
-    opacity: 1;
-  }
-
-  &:focus:not([disabled]),
-  &:hover:focus:not([disabled]) {
-    @include form-input-placeholder {
-      opacity: 0;
-    }
-  }
-
-  &.disabled {
-    &:not(.reversed) {
-      background: $input-disabled-background;
-    }
-
-    @include form-input-placeholder {
-      color: rgba($color-purple-800-rgb, $input-disabled-opacity);
-    }
-  }
-}
-
-.input: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;
-}
-
-///////////////////////////////////////////////////
-// ICON ADORNMENT STYLES
-///////////////////////////////////////////////////
-
-@mixin vertically-center-icon {
-  position: absolute;
-  height: $input-icon-size;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 1;
-}
-
-.withStartIconAdornment {
-  .startIconAdornment {
-    @include vertically-center-icon;
-    right: auto;
-    left: $spacing-sm;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      right: $spacing-sm;
-      left: auto;
-    }
-  }
-
-  &.withDisabled {
-    .startIconAdornment {
-      opacity: $input-disabled-opacity;
-    }
-  }
-
-  .input {
-    padding-right: $input-base-padding-horizontal;
-    padding-left: $input-with-icon-padding;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      padding-right: $input-with-icon-padding;
-      padding-left: $input-base-padding-horizontal;
-    }
-  }
-}
-
-.withEndIconAdornment {
-  .endIconAdornment {
-    @include vertically-center-icon;
-    right: $spacing-sm;
-    left: auto;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      right: auto;
-      left: $spacing-sm;
-    }
-  }
-
-  &.isDisabled {
-    .endIconAdornment {
-      opacity: $input-disabled-opacity;
-    }
-  }
-
-  .input {
-    padding-right: $input-with-icon-padding;
-    padding-left: $input-base-padding-horizontal;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      padding-right: $input-base-padding-horizontal;
-      padding-left: $input-with-icon-padding;
-    }
-  }
-}
-
-.withStartIconAdornment.withEndIconAdornment {
-  .input {
-    padding-right: $input-with-icon-padding;
-    padding-left: $input-with-icon-padding;
-
-    &[dir="rtl"],
-    [dir="rtl"] & {
-      padding-right: $input-with-icon-padding;
-      padding-left: $input-with-icon-padding;
-    }
-  }
-}
-
-// Default theme
-/* stylelint-disable-next-line no-duplicate-selectors */
-.withStartIconAdornment {
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  .startIconAdornment {
-    color: $color-purple-800;
-    opacity: 0.5;
-  }
-
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  &.withDisabled {
-    /* stylelint-disable-next-line no-duplicate-selectors */
-    .startIconAdornment {
-      opacity: 0.3;
-    }
-  }
-
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  &:hover:not(.withDisabled),
-  &:focus-within:not(.withDisabled) {
-    .startIconAdornment {
-      opacity: 0.7;
-    }
-  }
-}
-
-// Reversed
-.withStartIconAdornment.withReversed {
-  .startIconAdornment {
-    color: $color-white;
-    opacity: 1;
-  }
-
-  &.withDisabled {
-    .startIconAdornment {
-      opacity: 0.3;
-    }
-  }
-
-  &:hover:not(.withDisabled),
-  &:focus-within:not(.withDisabled) {
-    .startIconAdornment {
-      opacity: 1;
-    }
-  }
-}
-///////////////////////////////////////////////////
-// THEMES
-///////////////////////////////////////////////////
-
-// Default
-.input.default {
-  background-color: $color-white;
-  color: $color-purple-800;
-  display: flex;
-  align-items: center;
-
-  @include form-input-placeholder {
-    color: $color-purple-800;
-    opacity: $input-placeholder-opacity;
-  }
-
-  @include form-input-focus-state {
-    background-color: $color-gray-200;
-  }
-
-  &:focus + .focusRing {
-    border-color: $color-blue-500;
-  }
-
-  &.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;
-    }
-  }
-
-  &:not(.error):not(.caution) {
-    border-color: $color-gray-500;
-
-    &:disabled {
-      border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
-    }
-
-    @include form-input-focus-state {
-      border-color: $color-gray-600;
-    }
-  }
-
-  &.error {
-    border-color: $color-red-500;
-
-    &.disabled {
-      border-color: rgba($color-red-500-rgb, $input-disabled-opacity);
-    }
-  }
-
-  &.caution {
-    border-color: $color-yellow-600;
-
-    &.disabled {
-      border-color: rgba($color-yellow-600-rgb, $input-disabled-opacity);
-    }
-  }
-}
-
-// Reversed (Dark Backgrounds)
-.input.reversed {
-  background: transparent;
-  color: $color-white;
-
-  @include form-input-placeholder {
-    color: $color-white;
-    opacity: $input-placeholder-opacity;
-  }
-
-  @include form-input-focus-state {
-    background: rgba($color-white-rgb, 0.1);
-  }
-
-  &:focus + .focusRing {
-    border-color: $color-blue-300;
-  }
-
-  &:not(.error):not(.caution) {
-    border-color: rgba($color-white-rgb, 0.65);
-
-    &:disabled {
-      border-color: rgba($color-white-rgb, $input-disabled-opacity);
-    }
-
-    @include form-input-focus-state {
-      border-color: $color-white;
-    }
-  }
-
-  &.disabled {
-    background: transparent;
-    color: rgba($color-white-rgb, $input-disabled-opacity);
-
-    @include form-input-placeholder {
-      opacity: $input-disabled-opacity;
-    }
-  }
-
-  &.error {
-    border-color: $color-red-300;
-
-    &.disabled {
-      border-color: rgba($color-red-300-rgb, $input-disabled-opacity);
-    }
-  }
-
-  &.caution {
-    border-color: $color-yellow-400;
-
-    &.disabled {
-      border-color: rgba($color-yellow-400-rgb, $input-disabled-opacity);
-    }
-  }
-}

package/dist/iife/InputEditModal.module-X3TLJPFO.scss

@@ -1,36 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/layout";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.modal {
-  composes: genericModal from "../Primitives/GenericModal.module.scss";
-  min-width: 300px;
-  max-width: 600px;
-}
-
-.header {
-  color: $color-purple-800;
-  text-align: left;
-
-  &.textAlignRTL {
-    text-align: right;
-  }
-
-  &.padded {
-    padding: $spacing-md $spacing-lg;
-    @media (max-width: $layout-breakpoints-medium) {
-      padding: $spacing-md;
-    }
-  }
-}
-
-.body {
-  background: $color-gray-200;
-
-  &.padded {
-    padding: $spacing-md $spacing-lg $spacing-md $spacing-lg;
-    @media (max-width: $layout-breakpoints-medium) {
-      padding: $spacing-md;
-    }
-  }
-}

package/dist/iife/InputRange.module-RGISUI4D.scss

@@ -1,181 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-
-$thumb-color: $color-blue-500;
-$thumb-color-hover: $color-blue-600;
-$thumb-radius: 100%;
-$thumb-border-width: 4px;
-$thumb-border-color: $color-white;
-$thumb-height: 26px;
-$thumb-width: 26px;
-$thumb-height-with-border: $thumb-height + ($thumb-border-width * 2);
-$thumb-width-with-border: $thumb-width + ($thumb-border-width * 2);
-
-// The range
-$track-color: $color-gray-500;
-$track-radius: 4px;
-
-@mixin track {
-  width: auto;
-  height: 0;
-  box-sizing: border-box;
-  border-top: 1px solid $track-color;
-  border-bottom: 2px solid $track-color;
-  border-radius: $track-radius;
-}
-
-@mixin thumb {
-  box-sizing: content-box;
-  width: $thumb-width;
-  height: $thumb-height;
-  border: $thumb-border-width solid $thumb-border-color;
-  border-radius: $thumb-radius;
-  background: $thumb-color;
-
-  &:not(:disabled) {
-    transition: all 0.2s;
-    transition-property: background, height, width;
-
-    &:hover {
-      background: $thumb-color-hover;
-      width: $thumb-height + 6px;
-      height: $thumb-width + 6px;
-    }
-  }
-}
-
-@mixin hiddenThumb {
-  width: 0;
-  height: 0;
-  border: none;
-}
-
-//extra input[type="range"] is required to override materialize.css in performance-ui
-input[type="range"].ratingScaleRange {
-  all: unset;
-  appearance: none;
-  width: 100%;
-  margin: 0; //performance-ui materialize override
-
-  &.disabled {
-    opacity: 0.4;
-  }
-
-  &::-moz-focus-outer {
-    border: 0;
-  }
-
-  &:focus {
-    outline: 0;
-  }
-
-  :global(.js-focus-visible) &:global(.focus-visible) {
-    outline: 2px solid $color-blue-500;
-  }
-
-  &::-webkit-slider-runnable-track {
-    @include track;
-    margin: $spacing-sm 0;
-  }
-
-  &::-moz-range-track {
-    @include track;
-  }
-
-  &::-webkit-slider-thumb {
-    @include thumb;
-    -webkit-appearance: none;
-    margin-top: ($thumb-height-with-border/2) * -1;
-  }
-  &::-moz-range-thumb {
-    @include thumb;
-  }
-
-  &.hideThumb::-webkit-slider-thumb {
-    @include hiddenThumb;
-  }
-  &.hideThumb::-moz-range-thumb {
-    @include hiddenThumb;
-  }
-
-  &::-ms-track {
-    @include track;
-    color: transparent;
-    border-width: $thumb-width 0;
-    border-color: transparent;
-    background: transparent;
-  }
-
-  &::-ms-fill-lower {
-    border: none;
-    border-radius: $track-radius * 2;
-    background: $track-color;
-  }
-
-  &::-ms-fill-upper {
-    border: none;
-    border-radius: $track-radius * 2;
-    background: $track-color;
-  }
-
-  &::-ms-thumb {
-    @include thumb;
-  }
-}
-
-.spokes {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 $thumb-width-with-border/2 $spacing-sm;
-}
-
-.spokes.disabled {
-  opacity: 0.4;
-}
-
-.spokeContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1px;
-}
-
-.spoke {
-  width: 0;
-  height: 0;
-  background: $track-color;
-  border: 2px solid $track-color;
-  border-radius: 100%;
-}
-
-.labelsContainer {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
-.sliderLabels {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-}
-
-.sliderLabels.disabled {
-  opacity: 0.4;
-}
-
-// If the .visually-hidden class is applied to natively focusable elements
-// (such as a, button, input, etc) they must become visible when they receive
-// keyboard focus. Otherwise, a sighted keyboard user would have to try and
-// figure out where their visible focus indicator had gone to.
-.visuallyHidden:not(:focus):not(:active) {
-  clip: rect(0, 0, 0, 0);
-  clip-path: inset(50%);
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  border: 0;
-}