@kaizen/components 1.4.22-canary.5 → 1.4.23

package/dist/iife/ModalFooter.module-TK3HAXMB.scss

@@ -0,0 +1,69 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/layout";
+
+.actions {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+}
+
+.actionsAlignStart {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
+.padded {
+  padding: $spacing-md;
+  flex-direction: column;
+  @media (min-width: $layout-breakpoints-medium) {
+    padding: 0 $spacing-lg $spacing-lg $spacing-lg;
+    flex-direction: row-reverse;
+  }
+}
+.actionButton {
+  width: 100%;
+  @media (min-width: $layout-breakpoints-medium) {
+    width: inherit;
+  }
+}
+.actionButton + .actionButton {
+  margin-right: $spacing-sm;
+  @media (max-width: $layout-breakpoints-medium - 1px) {
+    margin-top: $spacing-sm;
+  }
+}
+
+.footerWrap {
+  align-items: baseline;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+}
+
+.border {
+  border-top: 1px solid $border-solid-border-color;
+}
+
+.start {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.fixed {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+.filler {
+  visibility: hidden;
+}

package/dist/iife/ModalHeader.module-6SW7KZ22.scss

@@ -0,0 +1,23 @@
+@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
+@import "~@kaizen/component-library/styles/layers";
+@import "~@kaizen/deprecated-component-library-helpers/styles/type";
+
+.dismissButton {
+  @include ca-position($end: 0, $top: 0);
+  position: absolute;
+  z-index: $ca-z-index-popover;
+}
+
+.layout {
+  width: 100%;
+}
+
+.fixed {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.filler {
+  visibility: hidden;
+}

package/dist/iife/MultiActionTile.module-4Y2NA4H6.scss

@@ -0,0 +1,3 @@
+.actions {
+  display: flex;
+}

package/dist/iife/MultiSelectOption.module-TIZIGUVB.scss

@@ -0,0 +1,115 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.option {
+  height: fit-content;
+
+  align-items: flex-start;
+  display: inline-grid;
+  grid-template-columns: $spacing-md 1fr auto;
+  gap: $spacing-xs;
+  padding: $spacing-xs;
+  position: relative;
+
+  font-family: $typography-paragraph-body-font-family;
+  font-size: $typography-paragraph-body-font-size;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  font-weight: $typography-paragraph-body-font-weight;
+  line-height: $typography-paragraph-body-line-height;
+
+  border: $border-solid-border-width $border-solid-border-style;
+  border-color: $border-borderless-border-color;
+  border-radius: $border-solid-border-radius;
+
+  cursor: default;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: $color-blue-100;
+    .badge {
+      background-color: $color-white;
+    }
+    .icon {
+      border-color: $color-gray-600;
+      background-color: $color-gray-200;
+    }
+  }
+
+  &.isFocused,
+  &:focus-visible,
+  &:global(.js-focus-visible) &:global(.focus-visible) {
+    background-color: $color-blue-100;
+    &::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-500;
+      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});
+      z-index: 1; // show border when sibling option is hovered
+    }
+  }
+
+  &:focus {
+    outline: none; // cancel browser style
+  }
+
+  &.isDisabled {
+    opacity: 0.3;
+    background: none;
+    &:hover {
+      .icon {
+        border-color: $color-gray-500;
+      }
+      .badge {
+        background-color: $color-gray-300;
+      }
+    }
+  }
+}
+
+$iconAndBadgeHeight: $spacing-md;
+
+.icon {
+  line-height: 1;
+  height: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
+  width: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
+  border: $border-solid-border-width $border-solid-border-style;
+  border-color: $color-gray-500;
+  border-radius: $border-solid-border-radius;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.badgeContainer {
+  // Must be the same height as .icon, so they align vertically
+  height: $iconAndBadgeHeight;
+  display: flex;
+  align-items: center;
+}
+
+.isSelected {
+  font-weight: $typography-paragraph-bold-font-weight;
+
+  &.icon {
+    background-color: $color-gray-500;
+    color: $color-white;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    .icon {
+      background-color: $color-gray-600;
+    }
+  }
+}

package/dist/iife/NavigationTabs.module-VDIXMFXJ.scss

@@ -0,0 +1,108 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/color";
+@import "./mixins";
+
+.container {
+  display: flex;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.linkAnchor {
+  display: flex;
+  align-items: center;
+  padding: 0 $spacing-sm;
+  position: relative;
+  color: rgba($color-white-rgb, 0.7);
+  font-family: $typography-heading-4-font-family;
+  font-weight: $typography-heading-4-font-weight;
+  font-size: $typography-heading-4-font-size;
+  line-height: $typography-heading-4-line-height;
+  letter-spacing: $typography-heading-4-letter-spacing;
+  text-decoration: none;
+  white-space: nowrap;
+  margin-right: $spacing-md;
+
+  &[dir="rtl"],
+  [dir="rtl"] & {
+    margin-left: $spacing-md;
+    margin-right: 0;
+  }
+
+  &:hover {
+    color: $color-white;
+    text-decoration: none;
+  }
+
+  @include title-block-under-1366 {
+    font-family: $typography-heading-5-font-family;
+    font-weight: $typography-heading-5-font-weight;
+    font-size: $typography-heading-5-font-size;
+    line-height: $typography-heading-5-line-height;
+    letter-spacing: $typography-heading-5-letter-spacing;
+  }
+
+  @include title-block-under-1440 {
+    margin-right: $spacing-xs;
+
+    &[dir="rtl"],
+    [dir="rtl"] & {
+      margin-left: $spacing-xs;
+      margin-right: 0;
+    }
+  }
+
+  @media (max-width: 1189px) {
+    margin: 0;
+  }
+
+  &.active {
+    color: $color-white;
+
+    &::before {
+      content: "";
+      display: block;
+      height: 5px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      background-color: $color-white;
+      transition: transform cubic-bezier(0.55, 0.085, 0.68, 0.53) 150ms;
+      border-radius: 0 0 $border-solid-border-radius $border-solid-border-radius;
+
+      @include title-block-medium-and-small {
+        top: auto;
+        bottom: 0;
+        border-radius: $border-solid-border-radius $border-solid-border-radius 0
+          0;
+      }
+    }
+  }
+}
+
+.linkAnchor.lightBackground {
+  color: rgba($color-purple-800-rgb, 0.75);
+
+  &:hover {
+    color: $color-blue-500;
+  }
+
+  &.active {
+    color: $color-blue-500;
+
+    &::before {
+      background-color: $color-blue-500;
+      top: 3px;
+
+      @include title-block-medium-and-small {
+        top: auto;
+        bottom: 0;
+        border-radius: $border-solid-border-radius $border-solid-border-radius 0
+          0;
+      }
+    }
+  }
+}

package/dist/iife/NoResults.module-3FUWBVUH.scss

@@ -0,0 +1,3 @@
+.container {
+  padding: 1.125rem; // There's no spacing token for 18px -_-
+}

package/dist/iife/Option.module-O2QRLWHC.scss

@@ -0,0 +1,87 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.option {
+  height: fit-content;
+
+  align-items: center;
+  display: inline-grid;
+  grid-template-columns: auto $spacing-md;
+  gap: $spacing-xs;
+  padding: 0.5rem $spacing-xs 0.5rem $spacing-sm;
+  position: relative;
+
+  font-family: $typography-paragraph-body-font-family;
+  font-size: $typography-paragraph-body-font-size;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  font-weight: $typography-paragraph-body-font-weight;
+  line-height: $typography-paragraph-body-line-height;
+
+  border: $border-solid-border-width $border-solid-border-style;
+  border-color: $border-borderless-border-color;
+  border-radius: 4px;
+
+  cursor: default;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover:not(.disabled),
+  &:active:not(.disabled),
+  &:global(.story__option-hover):not(.disabled) {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
+    .icon {
+      color: $color-blue-500;
+    }
+  }
+
+  &.isFocusVisible,
+  &:global(.story__option-focus) {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
+    &::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-500;
+      border-radius: 4px;
+      top: calc(-1 * #{$focus-ring-offset});
+      left: calc(-1 * #{$focus-ring-offset});
+      right: calc(-1 * #{$focus-ring-offset});
+      bottom: calc(-1 * #{$focus-ring-offset});
+      z-index: 1; // show border when sibling option is hovered
+    }
+    .icon {
+      color: $color-blue-500;
+    }
+  }
+}
+
+$iconAndBadgeHeight: $spacing-md;
+
+.icon {
+  line-height: 1;
+  height: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
+  width: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.isSelected {
+  font-weight: $typography-paragraph-bold-font-weight;
+  color: $color-blue-500;
+  &.icon {
+    color: $color-blue-500;
+  }
+}
+
+.disabled {
+  color: $color-gray-500;
+}

package/dist/iife/Overlay.module-W7K5DWH6.scss

@@ -0,0 +1,24 @@
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+
+.menuPopup {
+  position: absolute;
+  z-index: 1000; // from $ca-z-index-dropdown
+  box-sizing: border-box;
+  background: $color-white;
+  color: $color-purple-800;
+  border-radius: $border-solid-border-radius;
+  box-shadow: $shadow-large-box-shadow;
+  margin-top: 0.5rem;
+  text-align: left;
+  width: 100%;
+  min-width: 248px;
+
+  [dir="rtl"] & {
+    text-align: right;
+  }
+
+  // Allow horizontal scroll for long text options
+  overflow: auto;
+}

package/dist/iife/Padding.module-QSNUEZBU.scss

@@ -0,0 +1,19 @@
+@import "./Base.module.scss";
+
+@each $fraction, $padding in $spacing-list {
+  .p-#{$fraction} {
+    padding: $padding;
+  }
+  .pt-#{$fraction} {
+    padding-top: $padding;
+  }
+  .pr-#{$fraction} {
+    padding-right: $padding;
+  }
+  .pb-#{$fraction} {
+    padding-bottom: $padding;
+  }
+  .pl-#{$fraction} {
+    padding-left: $padding;
+  }
+}

package/dist/iife/Pagination.module-U5S6WZ5K.scss

@@ -0,0 +1,124 @@
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/component-library/styles/border";
+@import "~@kaizen/deprecated-component-library-helpers/styles/type";
+
+// Pagination
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.arrowIconWrapper {
+  height: 36px;
+  width: 36px;
+  border-radius: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: $border-focus-ring-border-width $border-focus-ring-border-style
+    $color-blue-300;
+  margin: 0 5px;
+  background-color: transparent;
+  color: $color-blue-500;
+  box-sizing: border-box;
+
+  &:disabled {
+    opacity: 0.35;
+    pointer-events: none;
+  }
+
+  &:hover {
+    background-color: $color-blue-100;
+  }
+
+  &:focus {
+    background-color: $color-blue-200;
+    &:focus-visible {
+      outline: none;
+    }
+    .pageIndicatorFocusRing {
+      border: $border-focus-ring-border-width $border-focus-ring-border-style
+        $color-blue-500;
+    }
+  }
+}
+
+// Page indicator
+.pagesIndicatorWrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.pageIndicator,
+.pageIndicatorSelected {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  width: 36px;
+  border-radius: 18px;
+  border: $border-focus-ring-border-width $border-focus-ring-border-style
+    transparent;
+  background-color: transparent;
+  color: $color-blue-500;
+  margin: 0 5px;
+  font-family: $typography-paragraph-body-font-family;
+  font-weight: $typography-paragraph-body-font-weight;
+  font-size: $typography-paragraph-body-font-size;
+}
+
+.pageIndicatorFocusRing {
+  position: absolute;
+  padding: 1px;
+  border-radius: 50%;
+  width: inherit;
+  height: inherit;
+}
+
+.pageIndicator {
+  &:hover {
+    background-color: $color-blue-100;
+  }
+  &:focus-visible {
+    outline: none;
+  }
+  &:focus {
+    &:not(.pageIndicatorSelected) {
+      background-color: $color-blue-100;
+      .pageIndicatorFocusRing {
+        border: $border-focus-ring-border-width $border-focus-ring-border-style
+          $color-blue-500;
+      }
+    }
+  }
+}
+
+.pageIndicatorSelected {
+  background-color: $color-blue-500;
+  color: $color-white;
+  &:focus {
+    .pageIndicatorFocusRing {
+      border: $border-focus-ring-border-width $border-focus-ring-border-style
+        $color-blue-500;
+    }
+  }
+  &:hover {
+    background-color: $color-blue-500;
+  }
+}
+
+// Truncate indicator
+.truncateIndicatorWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  width: 36px;
+  background-color: transparent;
+  color: rgba($color-purple-800-rgb, 0.7);
+  margin: 0 5px;
+}

package/dist/iife/Paragraph.module-J7DMUCVE.scss

@@ -0,0 +1,71 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "../fonts.scss";
+
+.paragraph {
+  margin: 0;
+
+  strong {
+    font-weight: $typography-paragraph-bold-font-weight;
+  }
+}
+
+.intro-lede {
+  font-family: $typography-paragraph-intro-lede-font-family;
+  font-weight: $typography-paragraph-intro-lede-font-weight;
+  font-size: $typography-paragraph-intro-lede-font-size;
+  line-height: $typography-paragraph-intro-lede-line-height;
+  letter-spacing: $typography-paragraph-intro-lede-letter-spacing;
+}
+
+.body {
+  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;
+}
+
+.small {
+  font-family: $typography-paragraph-small-font-family;
+  font-weight: $typography-paragraph-small-font-weight;
+  font-size: $typography-paragraph-small-font-size;
+  line-height: $typography-paragraph-small-line-height;
+  letter-spacing: $typography-paragraph-small-letter-spacing;
+}
+
+.extra-small {
+  font-family: $typography-paragraph-extra-small-font-family;
+  font-weight: $typography-paragraph-extra-small-font-weight;
+  font-size: $typography-paragraph-extra-small-font-size;
+  line-height: $typography-paragraph-extra-small-line-height;
+  letter-spacing: $typography-paragraph-extra-small-letter-spacing;
+}
+
+.dark {
+  color: $color-purple-800;
+  opacity: 1;
+}
+
+.dark-reduced-opacity {
+  color: $color-purple-800;
+  opacity: 0.7;
+}
+
+.white {
+  color: $color-white;
+  opacity: 1;
+}
+
+.white-reduced-opacity {
+  color: $color-white;
+  opacity: 0.8;
+}
+
+.positive {
+  color: $color-green-600;
+}
+
+.negative {
+  color: $color-red-600;
+}