@kaizen/components 1.4.13 → 1.4.15

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

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

@@ -0,0 +1,16 @@
+@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/Margin.module-DJURK5K7.scss

@@ -0,0 +1,19 @@
+@import "./Base.module.scss";
+
+@each $fraction, $margin in $spacing-list {
+  .m-#{$fraction} {
+    margin: $margin;
+  }
+  .mt-#{$fraction} {
+    margin-top: $margin;
+  }
+  .mr-#{$fraction} {
+    margin-right: $margin;
+  }
+  .mb-#{$fraction} {
+    margin-bottom: $margin;
+  }
+  .ml-#{$fraction} {
+    margin-left: $margin;
+  }
+}

package/dist/iife/Menu.module-N76N74LN.scss

@@ -0,0 +1,111 @@
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
+@import "~@kaizen/deprecated-component-library-helpers/styles/type";
+@import "~@kaizen/deprecated-component-library-helpers/styles/color";
+@import "../../styles/border";
+@import "../../styles/layers";
+@import "../../styles/animation";
+
+$side-padding: calc(calc(3 / 4) * #{$ca-grid});
+
+.menuList {
+  background: white;
+  border: $border-solid-border-width $border-solid-border-style
+    $color-purple-200;
+  box-shadow: $shadow-small-box-shadow;
+  line-height: 40px;
+}
+
+.header {
+  padding: 10px $side-padding;
+  text-align: left;
+  color: rgba($color-purple-800-rgb, 0.4);
+  border-bottom: $ca-border-color 1px solid;
+}
+
+.header__title {
+  @include kz-typography-heading-6;
+  @include ca-inherit-baseline;
+  display: block;
+}
+
+.menuItem {
+  @include kz-typography-paragraph-body;
+  @include ca-inherit-baseline;
+  composes: interactiveIconWrapper from "../Icon/Icon.module.scss";
+  background: transparent;
+  color: $color-purple-800;
+  cursor: pointer;
+  text-align: left;
+
+  transition: $ca-duration-immediate background-color ease,
+    $ca-duration-immediate color ease;
+
+  padding: 10px $side-padding;
+  text-decoration: none;
+  display: flex;
+  flex: 0 0 100%;
+
+  [dir="rtl"] & {
+    text-align: right;
+  }
+
+  &.menuItem--active,
+  &:hover,
+  &:focus {
+    background: $color-gray-100;
+    color: $color-blue-500;
+    // override Murmur global styles :(
+    text-decoration: none;
+
+    .menuItem__Icon {
+      color: $color-blue-500;
+    }
+  }
+}
+
+.menuItem--active {
+  composes: active from "../Icon/Icon.module.scss";
+}
+
+.menuItem--destructive {
+  color: $color-red-600;
+  .menuItem__Icon {
+    color: $color-red-600;
+  }
+}
+
+.menuItem__Label {
+  flex: 1;
+
+  :not(:only-child) {
+    @include ca-margin($end: calc(#{$ca-grid} / 2));
+  }
+}
+
+.menuItem__Icon {
+  text-align: right;
+  color: $color-purple-800;
+  position: relative;
+  top: 3px;
+
+  .hoverIcon & {
+    opacity: 0;
+  }
+  .menuItem--active &,
+  .hoverIcon:hover &,
+  .hoverIcon:focus & {
+    opacity: 1;
+  }
+}
+
+.separator {
+  height: 1px;
+  width: 100%;
+  border: 0;
+  background: $color-purple-200;
+  visibility: visible;
+  margin: 5px 0;
+}

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

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

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

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

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

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

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

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

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

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

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