@kaizen/components 1.4.22-canary.5 → 1.4.23

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

@@ -0,0 +1,132 @@
+@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

@@ -0,0 +1,128 @@
+@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

@@ -0,0 +1,15 @@
+@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

@@ -0,0 +1,44 @@
+@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

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

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

@@ -0,0 +1,15 @@
+@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

@@ -0,0 +1,184 @@
+@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

@@ -0,0 +1,139 @@
+@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

@@ -0,0 +1,14 @@
+@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;
+}