@kaizen/components 1.4.21 → 1.4.22-canary.1

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

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

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

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

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

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

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

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

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

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

@@ -1,24 +0,0 @@
-@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/Pagination.module-U5S6WZ5K.scss

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

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