@kaizen/components 1.4.21 → 1.4.22-canary.1

package/dist/iife/ToggleIconButton.module-COM67MDC.scss

@@ -1,132 +0,0 @@
-@import "@kaizen/design-tokens/sass/animation";
-@import "@kaizen/design-tokens/sass/border";
-@import "@kaizen/design-tokens/sass/color";
-
-.button {
-  border: none;
-  background-color: $color-white;
-  width: 3rem;
-  height: 3rem;
-  border-radius: $border-solid-border-radius;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  transition: background-color $animation-duration-immediate;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:global(.focus-visible)::after,
-  &:focus-visible:after {
-    $focus-ring-offset: 3px;
-    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: $color-blue-500;
-    top: calc(-1 * #{$focus-ring-offset});
-    left: calc(-1 * #{$focus-ring-offset});
-    right: calc(-1 * #{$focus-ring-offset});
-    bottom: calc(-1 * #{$focus-ring-offset});
-  }
-
-  &.disabled {
-    opacity: 0.3;
-    &:global(.focus-visible)::after,
-    &:focus-visible:after {
-      color: rgba($color-purple-800-rgb, 0.3);
-      outline-offset: -2px;
-      background-color: transparent;
-      border-color: transparent;
-      opacity: 1;
-      outline-style: $border-dashed-border-style;
-      outline-width: $border-focus-ring-border-width;
-      outline-color: $color-purple-800;
-    }
-  }
-}
-
-.default {
-  background-color: $color-white;
-  color: $color-purple-800;
-
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:global(.focus-visible):not(.active) {
-      background-color: $color-gray-200;
-    }
-
-    &.active {
-      background-color: $color-gray-300;
-      color: $color-purple-800;
-    }
-  }
-}
-
-.secondary {
-  background-color: $color-white;
-  color: $color-blue-500;
-
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:global(.focus-visible):not(.active) {
-      background-color: $color-blue-100;
-    }
-
-    &.active {
-      background-color: $color-blue-200;
-    }
-  }
-}
-
-.primary {
-  background-color: $color-blue-500;
-  color: $color-white;
-
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:global(.focus-visible):not(.active) {
-      background-color: $color-blue-600;
-    }
-
-    &.active {
-      background-color: $color-blue-700;
-    }
-  }
-}
-
-.destructive {
-  background-color: $color-red-500;
-  color: $color-white;
-
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:global(.focus-visible):not(.active) {
-      background-color: $color-red-600;
-    }
-
-    &.active {
-      background-color: $color-red-700;
-    }
-  }
-}
-
-.secondary-destructive {
-  background-color: $color-white;
-  color: $color-red-600;
-
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:global(.focus-visible):not(.active) {
-      background-color: $color-red-100;
-    }
-
-    &.active {
-      background-color: $color-red-200;
-    }
-  }
-}

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/Toolbar.module-3BZYZE6H.scss

@@ -1,44 +0,0 @@
-@import "~@kaizen/component-library/styles/grid";
-@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
-@import "./mixins";
-
-.toolbar {
-  display: flex;
-  align-items: center;
-
-  .toolbarItem {
-    margin: 0 ($ca-grid / 4);
-
-    @include title-block-under-1024 {
-      margin: 0 ($ca-grid / 8);
-    }
-
-    &.noGap {
-      margin: 0;
-    }
-  }
-
-  .toolbarItem:first-of-type {
-    @include ca-margin($start: 0, $end: $ca-grid / 4);
-
-    @include title-block-under-1024 {
-      @include ca-margin($start: 0, $end: $ca-grid / 8);
-    }
-
-    &.noGap {
-      margin: 0;
-    }
-  }
-
-  .toolbarItem:last-of-type {
-    @include ca-margin($start: $ca-grid / 4, $end: 0);
-
-    @include title-block-under-1024 {
-      @include ca-margin($start: $ca-grid / 8, $end: 0);
-    }
-
-    &.noGap {
-      margin: 0;
-    }
-  }
-}

package/dist/iife/Toolbar.module-BP3GTBGW.scss

@@ -1,6 +0,0 @@
-@import "@kaizen/design-tokens/sass/color";
-
-.toolbar {
-  display: block;
-  border-bottom: 2px solid $color-gray-500;
-}

package/dist/iife/ToolbarSection.module-LZTHWGO7.scss

@@ -1,15 +0,0 @@
-@import "@kaizen/design-tokens/sass/color";
-@import "@kaizen/design-tokens/sass/spacing";
-
-.toolbarSection {
-  display: inline-flex;
-  align-items: center;
-  gap: $spacing-xs;
-  margin: $spacing-xs 0;
-  padding: 0 $spacing-xs;
-  flex-wrap: wrap;
-}
-
-.toolbarSection + .toolbarSection {
-  border-inline-start: 1px solid rgba($color-gray-600-rgb, 0.1);
-}

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

package/dist/iife/TriggerButton.module-ML4U7VQL.scss

@@ -1,139 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "./mixins";
-@import "./variables";
-
-.button {
-  @include button;
-  border-radius: $border-solid-border-radius;
-  margin-top: $spacing-xs;
-  width: 100%;
-  height: $spacing-xl;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-
-  &:hover .icon,
-  &:global(.story__button-hover) .icon,
-  &:active .icon,
-  &:global(.story__button-active) .icon,
-  &:focus .icon {
-    color: $color-gray-600;
-  }
-
-  &.placeholder {
-    color: rgba($color-purple-800-rgb, 0.7);
-  }
-}
-
-.icon {
-  margin-left: $spacing-sm;
-  color: $color-gray-500;
-}
-
-.error {
-  border: $border-solid-border-width $border-solid-border-style $color-red-500;
-}
-
-.caution {
-  border: $border-solid-border-width $border-solid-border-style
-    $color-yellow-600;
-}
-
-.disabled:not(.reversed) {
-  border: $border-solid-border-width $border-solid-border-style $color-gray-300;
-  background-color: $color-gray-100;
-  color: $color-gray-500;
-
-  .icon,
-  &:hover .icon {
-    color: $color-gray-400;
-  }
-}
-
-.value {
-  width: 100%;
-  text-align: start;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.reversed:not(.disabled) {
-  border: $border-solid-border-width $border-solid-border-style
-    rgba($color-white-rgb, 0.8);
-  background-color: transparent;
-  color: $color-white;
-
-  &.placeholder {
-    color: rgba($color-white-rgb, 0.65);
-  }
-
-  .icon {
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  #{$story-className--button-active},
-  #{$selectors--button-hover} {
-    background-color: rgba($color-white-rgb, 0.1);
-    border: $border-solid-border-width $border-solid-border-style $color-white;
-
-    .icon {
-      color: $color-white;
-    }
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  #{$selectors--button-focus} {
-    background-color: rgba($color-white-rgb, 0.1);
-    border: $border-solid-border-width $border-solid-border-style $color-white;
-
-    .icon {
-      color: $color-white;
-    }
-
-    &::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-      content: "";
-      position: absolute;
-      background: transparent;
-      border: $border-focus-ring-border-width $border-focus-ring-border-style
-        $color-blue-300;
-      border-radius: $border-focus-ring-border-radius;
-      top: calc(-1 * #{$focus-ring-offset});
-      left: calc(-1 * #{$focus-ring-offset});
-      right: calc(-1 * #{$focus-ring-offset});
-      bottom: calc(-1 * #{$focus-ring-offset});
-    }
-  }
-
-  .error {
-    border-color: $color-red-300;
-  }
-
-  .caution {
-    border-color: $color-yellow-400;
-  }
-}
-
-.reversed.disabled {
-  border-color: rgba($color-white-rgb, 0.3);
-  color: rgba($color-white-rgb, 0.3);
-
-  .icon,
-  &:hover .icon {
-    color: rgba($color-white-rgb, 0.3);
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &.placeholder {
-    color: rgba($color-white-rgb, 0.3);
-  }
-}

package/dist/iife/TriggerButtonBase.module-QFRV6YZQ.scss

@@ -1,14 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "../mixins";
-
-.button {
-  @include button;
-  border-radius: $border-solid-border-radius;
-
-  width: max-content;
-}
-
-.icon {
-  margin-left: $spacing-xs;
-}