@kaizen/components 1.4.21 → 1.4.22-canary.1

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

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

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

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

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

@@ -1,38 +0,0 @@
-@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/Checkbox.module-L2DRIMTV.scss

@@ -1,155 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/component-library/styles/mixins/forms";
-@import "../../variables";
-
-$checkbox-size: 24px;
-$icon-size: 24px;
-$focus-ring-offset: 2px;
-
-$dt-color-checkbox-background-color-checked: $color-gray-500;
-
-// override bootstrap styles
-.checkbox.checkbox {
-  @include form-input-visually-hidden();
-  width: $checkbox-size;
-  height: $checkbox-size;
-  margin: 0;
-}
-
-.icon {
-  height: $checkbox-size;
-  width: $checkbox-size;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  // .icon is inside .box so .box's border-box rule means
-  // .icon sits to the right of .box's left-side border
-  left: calc(-1 * #{$border-solid-border-width});
-  color: $color-white;
-}
-
-.icon.reversed {
-  color: $dt-color-form-color-icon-reversed;
-}
-
-.box {
-  display: block;
-  position: relative;
-  pointer-events: none;
-  background: $color-white;
-  height: $checkbox-size;
-  width: $checkbox-size;
-  top: 0;
-  border: $border-solid-border-width $border-solid-border-style
-    $dt-color-form-border-color;
-  border-radius: $border-solid-border-radius;
-  box-sizing: border-box;
-  background-color: white;
-  border-color: $dt-color-form-border-color;
-
-  .checkbox:checked + &,
-  .checkbox:indeterminate + & {
-    background: $dt-color-checkbox-background-color-checked;
-    background-color: $dt-color-form-border-color;
-  }
-
-  .checkbox:focus + & {
-    background: white;
-    border-color: $dt-color-form-border-color-hover;
-  }
-
-  .checkbox:checked:focus + &,
-  .checkbox:indeterminate:focus + & {
-    background: $dt-color-form-border-color-hover;
-    border-color: $dt-color-form-border-color-hover;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .checkbox:checked:not([disabled]):hover + &,
-    .checkbox:indeterminate:not([disabled]):hover + & {
-      background: $dt-color-form-border-color-hover;
-      border-color: $dt-color-form-border-color-hover;
-    }
-
-    .checkbox:not([disabled]):hover + & {
-      border-color: $dt-color-form-border-color-hover;
-    }
-  }
-
-  .checkbox:focus + &::after {
-    content: "";
-    box-sizing: border-box;
-    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: $dt-color-form-border-color-focus;
-    top: -$focus-ring-offset - ($checkbox-size / 8);
-    left: -$focus-ring-offset - ($checkbox-size / 8);
-    width: calc(
-      #{$checkbox-size} + #{$focus-ring-offset} + #{$border-solid-border-width} *
-        2
-    );
-    height: calc(
-      #{$checkbox-size} + #{$focus-ring-offset} + #{$border-solid-border-width} *
-        2
-    );
-  }
-}
-
-.box.reversed {
-  border: $border-solid-border-width $border-solid-border-style
-    rgba($color-white-rgb, 0.65);
-  background: transparent;
-
-  .checkbox:not([checked]):focus + & {
-    border-color: $color-white;
-    background: rgba($color-white-rgb, 0.1);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .checkbox:not([checked]):not([disabled]):hover + & {
-      border-color: $color-white;
-      background: rgba($color-white-rgb, 0.1);
-    }
-  }
-
-  .checkbox:checked + &,
-  .checkbox:indeterminate + & {
-    background: rgba($color-white-rgb, 0.65);
-  }
-
-  .checkbox:checked:focus + &,
-  .checkbox:indeterminate:focus + & {
-    background: $color-white;
-    border-color: $color-white;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .checkbox:indeterminate:not([disabled]):hover + &,
-    .checkbox:checked:not([disabled]):hover + & {
-      background: $color-white;
-      border-color: $color-white;
-    }
-  }
-
-  .checkbox:focus + &::after {
-    border-color: $dt-color-form-border-color-reversed-focus;
-  }
-}
-
-.box.error {
-  border-color: $color-red-300;
-
-  .checkbox:not([checked]):focus + & {
-    border-color: $color-red-300;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .checkbox:not([checked]):hover + & {
-      border-color: $color-red-300;
-    }
-  }
-}