@kaizen/components 1.4.21 → 1.4.22-canary.1

package/dist/iife/ListBoxSection.module-D2PXJRKU.scss

@@ -1,20 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.sectionWrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-.sectionHeading {
-  padding-left: 4px;
-}
-
-.sectionList {
-  display: flex;
-  flex-direction: column;
-  padding: $spacing-xs 0px 0px 0px;
-}
-
-.sectionWrapper + .sectionWrapper {
-  margin-top: 0.5rem;
-}

package/dist/iife/LoadMoreButton.module-ANUUS5ER.scss

@@ -1,5 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.container {
-  padding: $spacing-sm $spacing-sm 0;
-}

package/dist/iife/LoadingGraphic.module-URCRSF4P.scss

@@ -1,10 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-
-.graphic {
-  background-color: rgba($color-gray-600-rgb, 0.1);
-  border-radius: 50%;
-
-  &.reversed {
-    background-color: rgba($color-white-rgb, 0.1);
-  }
-}

package/dist/iife/LoadingHeading.module-OV5P5QHZ.scss

@@ -1,67 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/typography";
-
-.heading {
-  background-color: rgba($color-gray-500-rgb, 0.2);
-
-  &.display-0 {
-    height: $typography-display-0-font-size;
-    margin-bottom: calc(
-      #{$typography-display-0-line-height} - #{$typography-display-0-font-size}
-    );
-  }
-
-  &.heading-1 {
-    height: $typography-heading-1-font-size;
-    margin-bottom: calc(
-      #{$typography-heading-1-line-height} - #{$typography-heading-1-font-size}
-    );
-  }
-
-  &.heading-2 {
-    height: $typography-heading-2-font-size;
-    margin-bottom: calc(
-      #{$typography-heading-2-line-height} - #{$typography-heading-2-font-size}
-    );
-  }
-
-  &.heading-3 {
-    height: $typography-heading-3-font-size;
-    margin-bottom: calc(
-      #{$typography-heading-3-line-height} - #{$typography-heading-3-font-size}
-    );
-  }
-
-  &.heading-4 {
-    height: $typography-heading-4-font-size;
-    margin-bottom: calc(
-      #{$typography-heading-4-line-height} - #{$typography-heading-4-font-size}
-    );
-  }
-
-  &.heading-5 {
-    height: $typography-heading-5-font-size;
-    margin-bottom: calc(
-      #{$typography-heading-5-line-height} - #{$typography-heading-5-font-size}
-    );
-  }
-
-  &.heading-6 {
-    height: $typography-heading-6-font-size;
-    margin-bottom: calc(
-      #{$typography-heading-6-line-height} - #{$typography-heading-6-font-size}
-    );
-  }
-
-  &.reversed:not(.link) {
-    background-color: rgba($color-white-rgb, 0.2);
-  }
-
-  &.link {
-    background-color: rgba($color-blue-500-rgb, 0.2);
-  }
-
-  &.link.reversed {
-    background-color: rgba($color-white-rgb, 0.65);
-  }
-}

package/dist/iife/LoadingInput.module-7NL2PX46.scss

@@ -1,9 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-
-.input {
-  background-color: rgba($color-gray-600-rgb, 0.1);
-
-  &.reversed {
-    background-color: rgba($color-white-rgb, 0.1);
-  }
-}

package/dist/iife/LoadingParagraph.module-43NZVIEE.scss

@@ -1,50 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.paragraph {
-  background-color: $color-gray-300;
-  height: calc(#{$spacing-md} * 0.625);
-  margin-bottom: calc(#{$spacing-md} * 0.5);
-
-  &.reversed:not(.link) {
-    background-color: rgba($color-white-rgb, 0.1);
-  }
-
-  &.link {
-    background-color: rgba($color-blue-500-rgb, 0.2);
-  }
-
-  &.link.reversed {
-    background-color: rgba($color-white-rgb, 0.65);
-  }
-}
-
-.centered {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.inline {
-  display: inline-block;
-  margin-bottom: calc(#{$spacing-md} * 0.35);
-}
-
-.inline + .inline {
-  margin-right: 0;
-  margin-left: $spacing-md;
-
-  &[dir="rtl"],
-  [dir="rtl"] & {
-    margin-right: $spacing-md;
-    margin-left: 0;
-  }
-}
-
-.noBottomMargin {
-  margin-bottom: 0;
-}
-
-// We double the class selector to increase specificity above rules like `h1.default-style`
-.inheritBaseline.inheritBaseline {
-  position: static;
-}

package/dist/iife/LoadingSpinner.module-VMTNZETE.scss

@@ -1,31 +0,0 @@
-@import "~@kaizen/design-tokens/sass/animation";
-
-@mixin sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.wrapper {
-  display: flex;
-}
-
-.visuallyHidden {
-  @include sr-only();
-}
-
-.spinner {
-  animation: spinner $animation-duration-deliberate
-    $animation-easing-function-ease-in-out infinite;
-}
-
-@keyframes spinner {
-  100% {
-    transform: rotate(360deg);
-  }
-}

package/dist/iife/MainActions.module-T43D33YO.scss

@@ -1,16 +0,0 @@
-@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
-@import "./mixins";
-
-.mainActionsContainer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-grow: 1;
-  flex-shrink: 0;
-
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
-  @include title-block-small {
-    display: none;
-  }
-}

package/dist/iife/MenuDropdown.module-DYV6JLT6.scss

@@ -1,26 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-$menu-container-width: 248px;
-$dropdown-index: 1000;
-
-.menuContainer {
-  z-index: $dropdown-index;
-  box-sizing: border-box;
-  background: $color-white;
-  color: $color-purple-800;
-  border-radius: $border-solid-border-radius;
-  box-shadow: $shadow-large-box-shadow;
-  padding: $spacing-xs 0;
-  text-align: left;
-
-  [dir="rtl"] & {
-    text-align: right;
-  }
-}
-
-.defaultWidth {
-  width: $menu-container-width;
-}

package/dist/iife/MenuFooter.module-7J44RW5D.scss

@@ -1,9 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.footer {
-  border-top: 1px solid rgba($color-gray-600-rgb, 0.1);
-  gap: $spacing-xs;
-  display: flex;
-  padding: $spacing-sm $spacing-sm 0;
-}

package/dist/iife/MenuItem.module-LD7ZYX4T.scss

@@ -1,99 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/typography";
-
-.menuListItem {
-  display: flex;
-}
-
-.menuItem {
-  display: flex;
-  align-items: center;
-  flex: 1 1 auto;
-  box-sizing: border-box;
-  background: none;
-  border: 2px transparent solid;
-  text-align: left;
-  padding: 6px calc(#{$spacing-sm} - 2px);
-  margin: 0 $spacing-xs;
-  min-height: calc(1.75 * #{$spacing-md});
-  border-radius: 4px;
-  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;
-  text-decoration: none;
-  color: $color-purple-800;
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  &:not(.menuItem--disabled):hover,
-  &:focus {
-    background: $color-blue-100;
-    color: $color-blue-500;
-
-    .menuItem__Icon {
-      color: $color-blue-500;
-    }
-
-    &.menuItem--destructive {
-      background: $color-red-100;
-      color: $color-red-600;
-
-      .menuItem__Icon {
-        color: $color-red-600;
-      }
-    }
-  }
-
-  &:focus-visible,
-  &.focus-visible {
-    border-color: $color-blue-500;
-    outline: none;
-  }
-
-  [dir="rtl"] & {
-    text-align: right;
-  }
-}
-
-.menuItem--disabled {
-  color: rgba($color-purple-800-rgb, 0.3);
-  .menuItem__Icon {
-    color: rgba($color-purple-800-rgb, 0.3);
-  }
-}
-
-.menuItem--active {
-  color: $color-blue-500;
-  font-weight: $typography-paragraph-bold-font-weight;
-}
-
-.menuItem--destructive {
-  color: $color-red-600;
-  .menuItem__Icon {
-    color: $color-red-600;
-  }
-}
-
-.menuItem--destructive.menuItem--disabled {
-  color: rgba($color-red-600-rgb, 0.3);
-  .menuItem__Icon {
-    color: rgba($color-red-600-rgb, 0.3);
-  }
-}
-
-.menuItem__Label {
-  flex-grow: 1;
-}
-
-.menuItem__Icon {
-  margin-inline-end: calc(#{$spacing-md} / 3);
-  display: flex;
-  align-self: flex-start;
-  transform: translateY(0.2em);
-  color: rgba($color-purple-800-rgb, 0.75);
-}

package/dist/iife/MenuList.module-44RMG7CF.scss

@@ -1,35 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/typography";
-
-$gutter: calc(#{$spacing-md} * 1 / 6);
-
-.header {
-  padding: 10px $spacing-sm 5px;
-  color: $color-purple-800;
-  margin: 0 $gutter;
-  font-family: $typography-heading-6-font-family;
-  font-weight: $typography-heading-6-font-weight;
-  font-size: $typography-heading-6-font-size;
-  line-height: $typography-heading-6-line-height;
-  letter-spacing: $typography-heading-6-letter-spacing;
-  display: block;
-}
-
-.menuSection {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  &:not(:last-of-type) {
-    &::after {
-      width: 100%;
-      height: 1px;
-      background-color: $border-solid-border-color;
-      content: "";
-      display: block;
-      margin: 5px 0;
-    }
-  }
-}

package/dist/iife/MenuLoadingSkeleton.module-DH3I5Z2J.scss

@@ -1,9 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-.loadingInput {
-  margin-bottom: $spacing-sm;
-}
-
-.loadingContainer {
-  margin-left: $spacing-sm;
-  margin-right: $spacing-sm;
-}

package/dist/iife/MenuPopup.module-NQRYVXAG.scss

@@ -1,27 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-
-// figma hard coded: https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%E2%9D%A4%EF%B8%8F-UI-Kit%3A-Heart?node-id=22814%3A96966
-$menu-container-width: 294px;
-$menu-container-max-height: 312px;
-
-.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;
-  padding: $spacing-sm 0;
-  margin-top: $spacing-xs;
-  text-align: left;
-
-  width: $menu-container-width;
-
-  [dir="rtl"] & {
-    text-align: right;
-  }
-}

package/dist/iife/MobileActions.module-Z6PD4VIR.scss

@@ -1,198 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/layout";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/component-library/styles/grid";
-@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
-@import "~@kaizen/component-library/styles/layers";
-@import "./mixins";
-
-$expand-button-width: 3.75rem;
-$focus-spacing: 2px;
-$focus-ring-border-width: 2px;
-// ^should be $border-focus-ring-border-width but CSS vars makes this hard
-$space-for-focus-ring: ($focus-ring-border-width * 2) + ($focus-spacing * 2);
-
-.mobileActionsContainer {
-  display: none;
-  z-index: $ca-z-index-fixed;
-  flex-direction: column;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border-start-start-radius: $border-solid-border-radius;
-  border-start-end-radius: $border-solid-border-radius;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  overflow: hidden;
-  transform: translateY(calc(100% - #{$layout-mobile-actions-drawer-height}));
-  transition: 0.4s ease;
-  animation: slide-up 1s ease;
-
-  &.isOpen {
-    transform: translateY(0%);
-  }
-
-  @include title-block-small {
-    display: flex;
-  }
-}
-
-.mobileActionsTopRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: $layout-mobile-actions-drawer-height;
-}
-
-.mobileActionsTopRow.mobileActionsTopRowSingleButton {
-  justify-content: center;
-}
-
-.mobileActionsMenuContainer {
-  display: block;
-  width: 100%;
-  background: $color-white;
-  padding: $spacing-xs 0;
-}
-
-.drawerHandleIcon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  @include ca-margin($end: calc(#{$ca-grid} / 2));
-
-  .drawerHandleLabelText + & {
-    @include ca-margin($start: calc(#{$ca-grid} / 2));
-  }
-}
-
-.mobileActionsPrimaryLabel {
-  @include ca-padding($start: $ca-grid * 0.75);
-  text-align: left;
-  text-decoration: none;
-
-  color: $color-white;
-  font-family: $typography-button-primary-font-family;
-  font-weight: $typography-button-primary-font-weight;
-  font-size: $typography-button-primary-font-size;
-  line-height: $typography-button-primary-line-height;
-  letter-spacing: $typography-button-primary-letter-spacing;
-}
-
-.mobileActionsPrimaryButton,
-.mobileActionsExpandButton {
-  display: flex;
-  position: relative;
-  justify-content: flex-start;
-  align-items: center;
-  background-color: transparent;
-  height: 100%;
-  border: 0;
-  box-sizing: border-box;
-  color: $color-white;
-  background-color: $color-blue-500;
-
-  &:focus {
-    background-color: $color-blue-600;
-    outline: none;
-  }
-
-  &:global(.focus-visible) {
-    height: $layout-mobile-actions-drawer-height - $space-for-focus-ring;
-
-    &::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2));
-      content: "";
-      position: absolute;
-      background: transparent;
-      border-width: $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});
-    }
-  }
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-// Full width versions
-.mobileActionsPrimaryButton:only-child,
-.mobileActionsExpandButton:only-child {
-  flex-basis: 100%;
-  border-start-start-radius: $border-solid-border-radius;
-  border-start-end-radius: $border-solid-border-radius;
-
-  &:global(.focus-visible) {
-    flex-basis: calc(100% - #{$space-for-focus-ring});
-
-    &::after {
-      border-start-start-radius: $border-focus-ring-border-radius;
-      border-start-end-radius: $border-focus-ring-border-radius;
-    }
-  }
-}
-
-// Non full width versions
-.mobileActionsPrimaryButton:not(:only-child) {
-  flex: 0 0 calc(100% - #{$expand-button-width});
-
-  &:global(.focus-visible) {
-    flex-basis: calc(100% - #{$expand-button-width} - #{$space-for-focus-ring});
-    margin-left: $focus-ring-border-width * 2;
-    border-start-start-radius: $border-solid-border-radius;
-
-    & + .mobileActionsExpandButton {
-      border-color: $color-white;
-    }
-
-    &::after {
-      border-start-start-radius: $border-focus-ring-border-radius;
-    }
-  }
-}
-
-.mobileActionsExpandButton:not(:only-child) {
-  flex: 0 0 $expand-button-width;
-  border-left: 2px solid $color-blue-200;
-  justify-content: center;
-
-  &:global(.focus-visible) {
-    border-color: $color-white;
-    flex-basis: calc(#{$expand-button-width} - #{$space-for-focus-ring});
-    margin-right: $focus-ring-border-width * 2;
-    border-start-end-radius: $border-solid-border-radius;
-
-    &::after {
-      border-start-end-radius: $border-focus-ring-border-radius;
-    }
-  }
-}
-
-.mobileActionsChevronSquare {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  position: absolute;
-  @include ca-position($end: 20px);
-}
-
-@keyframes slide-up {
-  0% {
-    transform: translateY(100%);
-  }
-  50% {
-    transform: translateY(100%);
-  }
-  100% {
-    transform: translateY(calc(100% - #{$layout-mobile-actions-drawer-height}));
-  }
-}

package/dist/iife/ModalAccessibleDescription.module-NIJNKHHO.scss

@@ -1,3 +0,0 @@
-.modalDescription {
-  grid-column-start: 2;
-}

package/dist/iife/ModalAccessibleLabel.module-NG26HDU4.scss

@@ -1,58 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/layout";
-
-//TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
-$ca-breakpoint-small-mobile: 375px;
-
-@mixin ca-media-small-mobile {
-  @media (max-width: #{$ca-breakpoint-small-mobile}) {
-    @content;
-  }
-}
-
-.modalLabel {
-  position: relative;
-
-  //TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
-  h2 {
-    @media (max-width: $layout-breakpoints-medium) {
-      font-size: 1.625rem;
-      line-height: 2rem;
-    }
-    @include ca-media-small-mobile {
-      font-size: 1.5rem;
-      line-height: 1.875rem;
-    }
-  }
-
-  &.prominent {
-    grid-column-start: 2;
-    text-align: left;
-  }
-
-  // Use JS polyfill to simulate :focus-visible, not yet supported by browsers
-  // https://github.com/WICG/focus-visible#backwards-compatibility
-  :global(.js-focus-visible) & {
-    // hide native focus ring when :focus but not :focus-visible
-    &:focus {
-      outline: none;
-    }
-
-    // show custom focus ring when :focus-visible
-    &:global(.focus-visible)::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-      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});
-    }
-  }
-}