@kaizen/components 1.4.20-canary.3469 → 1.4.21

package/dist/iife/BrandMoment.module-4P7H2D3W.scss

@@ -0,0 +1,196 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/layout";
+
+$breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and replace this out
+
+// --------------------------------
+// Body
+// --------------------------------
+
+.body {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &.informative {
+    background: $color-blue-100;
+  }
+
+  &.positive {
+    background: $color-green-100;
+  }
+
+  &.negative {
+    background: $color-red-100;
+  }
+}
+
+// --------------------------------
+// Reusable container
+// --------------------------------
+
+.container {
+  max-width: $layout-content-max-width;
+  margin: 0 auto;
+  padding: 0 $spacing-md;
+}
+
+@media (min-width: $layout-breakpoints-large) {
+  .container {
+    padding: 0 $spacing-xxl;
+  }
+}
+
+@media (min-width: $breakpoint-xl) {
+  .container {
+    padding: 0 $spacing-xxxxl;
+  }
+}
+
+// --------------------------------
+// Header
+// --------------------------------
+
+.header {
+  inline-size: 100%;
+  margin-block-end: $spacing-md;
+}
+
+// --------------------------------
+// Main
+// --------------------------------
+
+.main {
+  flex: 1 0 auto;
+  display: flex;
+  align-items: center;
+  margin-block-end: $spacing-xxl;
+}
+
+.mainInner {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-xl $spacing-lg;
+  align-items: center;
+}
+
+@media (min-width: $layout-breakpoints-medium) {
+  .mainInner {
+    row-gap: $spacing-xxl;
+  }
+}
+
+@media (min-width: $layout-breakpoints-large) {
+  .mainInner {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: $breakpoint-xl) {
+  .mainInner {
+    column-gap: $spacing-xxxxl;
+  }
+}
+
+.left {
+  display: flex;
+  justify-content: center;
+}
+
+.leftInner {
+  width: 100%;
+  max-width: 525px;
+}
+
+.right {
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.rightInner {
+  max-width: 543px;
+}
+
+.secondaryAction {
+  margin-block-start: $spacing-sm;
+}
+
+@media (min-width: $layout-breakpoints-medium) {
+  .actions {
+    display: flex;
+  }
+
+  .secondaryAction {
+    margin-block-start: 0;
+    margin-inline-start: $spacing-sm;
+  }
+}
+
+@media (min-width: $layout-breakpoints-large) {
+  .left {
+    justify-content: flex-end;
+  }
+
+  .right {
+    align-items: flex-start;
+  }
+}
+
+// --------------------------------
+// Footer
+// --------------------------------
+
+.footer {
+  flex: 0 0 auto;
+}
+
+.footerInner {
+  display: flex;
+  flex-direction: column;
+  border-block-start: 1px solid $color-purple-800;
+  border-inline-start: 1px solid $color-purple-800;
+  padding: $spacing-sm $spacing-md;
+  margin-block-end: $spacing-lg;
+}
+
+.poweredByContainer {
+  flex: 0 0 auto;
+  order: 2;
+  display: flex;
+}
+
+.footerTextContainer {
+  flex: 1 1 auto;
+  order: 1;
+  margin-block-end: $spacing-md;
+}
+
+.poweredByLogo {
+  margin-inline-start: $spacing-xs;
+
+  > img {
+    max-width: 133px;
+  }
+}
+
+@media (min-width: $layout-breakpoints-large) {
+  .footerInner {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .footerTextContainer {
+    order: initial;
+    margin-block-end: 0;
+    margin-inline-start: $spacing-md;
+  }
+
+  .poweredByContainer {
+    order: initial;
+  }
+}

package/dist/iife/Calendar.module-H7XBQXTA.scss

@@ -0,0 +1,211 @@
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/border";
+@import "../../mixins";
+
+$button-border-radius: 3px;
+$rdp-cell-size: 40px;
+
+$polyfill--focus-visible: ":global(.js-focus-visible) &:global(.focus-visible)";
+$selectors--button-focus: "&:focus-visible, #{$polyfill--focus-visible}";
+
+%focus-ring {
+  position: relative;
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
+  #{$selectors--button-focus} {
+    &::after {
+      $focus-ring-offset: calc(
+        -1 * calc((#{$border-focus-ring-border-width} * 2) + 1px)
+      );
+      content: "";
+      position: absolute;
+      top: $focus-ring-offset;
+      bottom: $focus-ring-offset;
+      left: $focus-ring-offset;
+      right: $focus-ring-offset;
+      border-radius: $button-border-radius;
+    }
+  }
+}
+
+%focus-ring--enabled {
+  @extend %focus-ring;
+
+  #{$selectors--button-focus} {
+    &::after {
+      border: $border-focus-ring-border-width $border-focus-ring-border-style
+        $color-blue-500;
+    }
+  }
+}
+
+.root {
+  display: inline-flex;
+}
+
+.months {
+  display: flex;
+}
+
+.buttonReset {
+  @include button-reset;
+}
+
+.button {
+  cursor: pointer;
+}
+
+.caption {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0 $spacing-xs;
+}
+
+.captionLabel {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0 0.25em;
+  white-space: nowrap;
+  font-family: $typography-heading-4-font-family;
+  font-size: $typography-heading-4-font-size;
+  font-weight: $typography-heading-5-font-weight;
+  line-height: $typography-heading-4-line-height;
+  letter-spacing: $typography-heading-4-letter-spacing;
+  color: $color-purple-800;
+}
+
+.navButton {
+  @extend %focus-ring--enabled;
+
+  display: inherit;
+  padding: 0.25rem $spacing-xs;
+  border: $border-solid-border-width $border-solid-border-style transparent;
+  border-radius: $button-border-radius;
+
+  &:hover,
+  &:global(.story__datepicker__calendar--hover) {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
+  }
+
+  #{$selectors--button-focus} {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
+  }
+
+  [dir="rtl"] & {
+    transform: rotate(180deg);
+  }
+}
+
+.table {
+  border-collapse: separate;
+  border-spacing: 1px;
+  margin: 0;
+  max-width: calc(#{$rdp-cell-size} * 7);
+}
+
+.tbody {
+  border: 0;
+  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;
+}
+
+.weekday {
+  padding: 0.5rem 0;
+  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;
+  color: $color-purple-800;
+}
+
+.cell {
+  width: $rdp-cell-size;
+  height: $rdp-cell-size;
+  padding: 0;
+  text-align: center;
+}
+
+.day {
+  @extend %focus-ring--enabled;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: $rdp-cell-size;
+  max-width: $rdp-cell-size;
+  height: $rdp-cell-size;
+  margin: 0;
+  border: $border-borderless-border-width $border-borderless-border-style
+    $border-borderless-border-color;
+  border-radius: $button-border-radius;
+  padding: calc(#{$spacing-md} / 3) 0.625rem;
+  color: $color-purple-800;
+
+  &:hover,
+  &:global(.story__datepicker__calendar--hover) {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
+  }
+
+  #{$selectors--button-focus} {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
+  }
+}
+
+.dayToday {
+  color: $color-blue-500;
+  font-weight: bold;
+}
+
+.daySelected {
+  background-color: $color-blue-500;
+  color: $color-white;
+
+  &:hover,
+  &:global(.story__datepicker__calendar--hover),
+  #{$selectors--button-focus} {
+    background-color: $color-blue-400;
+    color: $color-white;
+  }
+}
+
+.dayDisabled {
+  // Focus ring styles have been removed as react-day-picker has been updated such that
+  // disabled days do not receive focus, and keyboard navigation only lands on available days.
+  // https://github.com/gpbl/react-day-picker/pull/1519
+  // https://github.com/gpbl/react-day-picker/issues/1449#issuecomment-1149942033
+
+  background: none;
+  pointer-events: none;
+  color: rgba($color-purple-800-rgb, 0.3);
+  opacity: 1;
+
+  #{$selectors--button-focus} {
+    color: rgba($color-purple-800-rgb, 0.3);
+    background-color: transparent;
+    opacity: 1;
+  }
+}
+
+.vHidden {
+  @include visually-hidden;
+}

package/dist/iife/CalendarRange.module-QWW624PJ.scss

@@ -0,0 +1,64 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+$cell-border-radius: 3px;
+
+.month {
+  padding: 0 $spacing-sm;
+
+  &:first-child {
+    padding-inline-start: 0;
+  }
+
+  &:last-child {
+    padding-inline-end: 0;
+  }
+}
+
+.monthWithDivider {
+  position: relative;
+  padding: 0 $spacing-md;
+
+  &:not(:first-child) {
+    &::before {
+      position: absolute;
+      content: "";
+      top: calc(-1 * #{$spacing-md});
+      bottom: calc(-1 * #{$spacing-md});
+      left: 0;
+      right: 0;
+      border-inline-start: 1px solid $color-gray-300;
+    }
+  }
+
+  &:first-child {
+    padding-inline-start: 0;
+  }
+
+  &:last-child {
+    padding-inline-end: 0;
+  }
+}
+
+.nav {
+  position: absolute;
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+  color: $color-purple-800;
+
+  .captionEnd & {
+    flex-direction: row-reverse;
+  }
+}
+
+.dayRangeStart,
+.dayRangeEnd {
+  background-color: $color-blue-500;
+  color: $color-white;
+}
+
+.dayRangeMiddle {
+  background-color: $color-blue-100;
+  color: $color-blue-500;
+}

package/dist/iife/CalendarSingle.module-N2P3DWLM.scss

@@ -0,0 +1,18 @@
+@import "~@kaizen/design-tokens/sass/color";
+
+.nav {
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  color: $color-purple-800;
+}
+
+.navButtonNext {
+  right: 0;
+
+  [dir="rtl"] & {
+    left: 0;
+    right: auto;
+  }
+}

package/dist/iife/Card.module-VEUOO2LT.scss

@@ -0,0 +1,38 @@
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+
+.wrapper {
+  color: $color-purple-800;
+  background-color: $color-white;
+  border-radius: $border-borderless-border-radius;
+  box-shadow: $shadow-small-box-shadow;
+
+  &.informative {
+    background-color: $color-blue-100;
+  }
+
+  &.positive {
+    background-color: $color-green-100;
+  }
+
+  &.cautionary {
+    background-color: $color-yellow-100;
+  }
+
+  &.destructive {
+    background-color: $color-red-100;
+  }
+
+  &.assertive {
+    background-color: $color-orange-100;
+  }
+
+  &.highlight {
+    background-color: $color-purple-100;
+  }
+
+  &.elevated {
+    box-shadow: $shadow-large-box-shadow;
+  }
+}

package/dist/iife/Collapsible.module-ZJNVWQIB.scss

@@ -0,0 +1,119 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/animation";
+
+$heading-active-color: $color-gray-200;
+// ^This is just a temporary hex to get us by for now until we rearrange our neutrals and introduce something that can used here.
+$border-color: rgba($color-gray-600-rgb, 0.2);
+
+// We need a full border radius on this container element, then have classes
+// beneath to toggle nested borders off and on for different use cases.
+.container {
+  background-color: $color-white;
+  box-shadow: $shadow-small-box-shadow;
+  border-radius: $border-borderless-border-radius;
+}
+
+.single {
+  .header {
+    border-radius: $border-borderless-border-radius;
+  }
+}
+
+.separated {
+  & + .separated {
+    margin-top: calc(#{$spacing-md} * 0.3);
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .header {
+    border-radius: $border-borderless-border-radius;
+  }
+}
+
+// When a collapsible group is rendered, we need the first group to have a rounded
+// on top and the last group to have a rounded bottom edge. Then when the last group
+// is open we remove the rounded edge as the content sits beneath and needs to be straight.
+.groupItem {
+  & + .groupItem {
+    border-top: 1px $border-solid-border-style $border-color;
+  }
+
+  &:first-of-type > .header {
+    border-top-left-radius: $border-borderless-border-radius;
+    border-top-right-radius: $border-borderless-border-radius;
+  }
+
+  &:last-of-type > .header:not(.open) {
+    border-bottom-left-radius: $border-borderless-border-radius;
+    border-bottom-right-radius: $border-borderless-border-radius;
+  }
+}
+
+// Round the bottom corners of the header so when the container is open, the
+// header background is not rounded on the corners and flush with the content beneath.
+.open .header {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  text-align: left;
+  background-color: $color-white;
+  border: none;
+  transition: background-color $animation-duration-rapid;
+  padding-top: $spacing-sm;
+  padding-bottom: $spacing-sm;
+  padding-left: $spacing-md;
+  padding-right: $spacing-sm;
+
+  &:hover {
+    background-color: $heading-active-color;
+  }
+
+  [dir="rtl"] & {
+    text-align: right;
+    padding-left: $spacing-sm;
+    padding-right: $spacing-md;
+  }
+}
+
+.chevronButton:hover {
+  // hack to get rid of the IconButton hover styling because it clashes with the hover styling on the Collapsible header
+  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.title {
+  flex: 1 1 auto;
+}
+
+.defaultVariant {
+  background-color: $heading-active-color;
+}
+
+.clearVariant {
+  border-bottom: 1px $border-solid-border-style $border-color;
+}
+
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 10;
+}
+
+.section {
+  padding: $spacing-md;
+}
+
+.noPadding {
+  padding: 0;
+}
+
+.hide {
+  display: none;
+}

package/dist/iife/CollapsibleGroup.module-UR2SIYLJ.scss

@@ -0,0 +1,10 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/shadow";
+
+// We need a full border radius on this container element, then have classes
+// beneath to toggle nested borders off and on for different use cases.
+.container {
+  background-color: white;
+  box-shadow: $shadow-small-box-shadow;
+  border-radius: $border-borderless-border-radius;
+}