@kaizen/components 1.4.20-canary.3469 → 1.4.21

package/dist/iife/ConfirmationModal.module-RN2H7KPL.scss

@@ -0,0 +1,157 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/layout";
+
+$dt-positive-header-background: $color-green-100;
+$dt-informative-header-background: $color-blue-100;
+$dt-negative-header-background: $color-red-100;
+$dt-cautionary-header-background: $color-yellow-100;
+$dt-heading-text-color: $color-purple-800;
+$dt-cautionary-heading-text-color: $color-purple-800;
+$dt-assertive-header-background: $color-orange-100;
+
+.modal {
+  composes: genericModal from "../Primitives/GenericModal.module.scss";
+  min-width: 300px;
+  max-width: 600px;
+}
+
+.header {
+  color: $color-white;
+  text-align: left;
+  border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
+
+  &.padded {
+    padding: $spacing-md $spacing-lg;
+    @media (max-width: $layout-breakpoints-medium) {
+      padding: $spacing-md;
+    }
+  }
+
+  // override Murmur global styles :(
+  h1 {
+    color: $dt-heading-text-color;
+  }
+}
+
+.positiveHeader,
+.informativeHeader,
+.negativeHeader,
+.cautionaryHeader,
+.assertiveHeader {
+  display: grid;
+  grid-template-columns: 0.2fr 2fr;
+  align-items: center;
+  &.prominent {
+    grid-template-columns: 1.1fr 2fr;
+    @media (max-width: $layout-breakpoints-medium) {
+      display: flex;
+      flex-direction: column;
+      align-content: flex-start;
+      justify-content: center;
+      align-items: flex-start;
+    }
+    .iconContainer {
+      position: absolute;
+      top: 8%;
+      @media (max-width: $layout-breakpoints-medium) {
+        position: relative;
+        top: 0;
+        margin-bottom: $spacing-sm;
+      }
+    }
+    .spotIcon,
+    .svgIcon > svg {
+      width: 155px;
+      height: 155px;
+      margin: 0 auto;
+      color: $color-purple-800;
+      @media (max-width: $layout-breakpoints-medium) {
+        width: 86px;
+        height: 86px;
+      }
+    }
+  }
+  .iconContainer {
+    align-self: flex-start;
+    @media (min-width: $layout-breakpoints-medium) {
+      align-self: center;
+    }
+  }
+  .spotIcon,
+  .svgIcon > svg {
+    width: 30px;
+    height: 30px;
+    @media (max-width: $layout-breakpoints-medium) {
+      margin-right: 0.9375rem;
+      position: relative;
+      top: 0.125rem;
+    }
+  }
+}
+
+.positiveHeader {
+  background-color: $dt-positive-header-background;
+
+  .spotIcon,
+  .svgIcon > svg {
+    color: $color-green-500;
+  }
+}
+
+.assertiveHeader {
+  background-color: $dt-assertive-header-background;
+
+  .spotIcon,
+  .svgIcon > svg {
+    color: $color-orange-500;
+  }
+}
+
+.informativeHeader {
+  background-color: $dt-informative-header-background;
+
+  .spotIcon,
+  .svgIcon > svg {
+    color: $color-blue-500;
+  }
+}
+
+.negativeHeader {
+  background-color: $dt-negative-header-background;
+
+  .spotIcon,
+  .svgIcon > svg {
+    color: $color-red-500;
+  }
+}
+
+.cautionaryHeader {
+  background-color: $dt-cautionary-header-background;
+
+  .spotIcon,
+  .svgIcon > svg {
+    color: $color-yellow-500;
+  }
+}
+
+.prominent {
+  display: grid;
+  grid-template-columns: 1.1fr 2fr;
+  align-items: center;
+  @media (max-width: $layout-breakpoints-medium) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.padded {
+  padding: $spacing-md $spacing-lg $spacing-md $spacing-lg;
+  @media (max-width: $layout-breakpoints-medium) {
+    padding: $spacing-md;
+  }
+}
+
+.iconContainer {
+  position: relative;
+}

package/dist/iife/Content.module-6CTLBAHR.scss

@@ -0,0 +1,25 @@
+@import "~@kaizen/design-tokens/sass/layout";
+@import "../variables";
+
+.container {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  * {
+    &,
+    &:after,
+    &:before {
+      box-sizing: border-box;
+    }
+  }
+}
+
+.content {
+  max-width: $layout-content-max-width;
+  margin: 0 $layout-content-side-margin;
+  width: 100%;
+
+  @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
+    margin: 0 $content-margin-width-on-medium-and-small;
+  }
+}

package/dist/iife/ContextModal.module-TTFVPUPU.scss

@@ -0,0 +1,77 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/layout";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.modal {
+  composes: genericModal from "../Primitives/GenericModal.module.scss";
+  min-width: 300px;
+  max-width: 840px;
+
+  @media (min-width: $layout-breakpoints-medium) {
+    width: 90%;
+  }
+}
+
+.header {
+  color: $color-purple-800;
+  text-align: left;
+  &.padded {
+    padding: $spacing-md;
+    @media (min-width: $layout-breakpoints-medium) {
+      padding: $spacing-md $spacing-lg;
+    }
+  }
+}
+
+.footer {
+  white-space: initial;
+  @media (min-width: $layout-breakpoints-medium) {
+    white-space: nowrap;
+  }
+}
+
+.footerWithSecondaryAction {
+  composes: footer;
+  margin-left: calc(-1 * #{$spacing-sm});
+}
+
+.emptyFooter {
+  height: $spacing-sm;
+}
+
+.portraitContentlayout {
+  padding: $spacing-md;
+  display: block;
+  box-sizing: content-box;
+  @media (min-width: $layout-breakpoints-medium) {
+    display: grid;
+    max-width: 800px;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    column-gap: $spacing-xl;
+    padding: $spacing-md $spacing-lg;
+  }
+}
+
+.landscapeContentlayout {
+  display: flex;
+  padding: $spacing-md;
+  flex-direction: column;
+  @media (min-width: $layout-breakpoints-medium) {
+    padding: $spacing-md $spacing-lg;
+  }
+
+  .image {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .content {
+    padding-left: 0rem;
+    @media (min-width: $layout-breakpoints-medium) {
+      max-width: 100%;
+    }
+  }
+}

package/dist/iife/DateInput.module-YBXARKD2.scss

@@ -0,0 +1,3 @@
+.dateInput {
+  width: 100%;
+}

package/dist/iife/DateInputDescription.module-SGAJNB7K.scss

@@ -0,0 +1,19 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.dateInputDescription {
+  display: inline;
+}
+
+.dateInputFormatContainer {
+  margin-inline-start: $spacing-xs;
+  white-space: nowrap;
+}
+
+.descriptionInputFormat {
+  display: inline-flex;
+  white-space: nowrap;
+}
+
+.labelSeparator {
+  margin-inline-end: $spacing-xs;
+}

package/dist/iife/DateInputField.module-2LG4I24X.scss

@@ -0,0 +1,5 @@
+$input-disabled-opacity: 0.3;
+
+.disabled {
+  opacity: $input-disabled-opacity;
+}

package/dist/iife/DateInputWithIconButton.module-RSUEQ345.scss

@@ -0,0 +1,53 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/component-library/styles/animation";
+@import "../../mixins";
+
+$input-disabled-opacity: 0.3;
+
+.iconButton {
+  @include button-reset;
+
+  display: inherit;
+  padding: 0.25rem $spacing-xs;
+  border: $border-solid-border-width $border-solid-border-style transparent;
+  border-radius: $border-solid-border-radius;
+  position: relative;
+  right: -0.35rem;
+  top: -40%;
+
+  [dir="rtl"] & {
+    right: 0.25rem;
+  }
+
+  &:hover:not([disabled]) {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
+  }
+
+  :focus {
+    outline: none;
+  }
+
+  &:focus-visible,
+  :global(.js-focus-visible) &:global(.focus-visible) {
+    outline-offset: -2px;
+    outline: $color-blue-500 $border-focus-ring-border-style
+      $border-focus-ring-border-width;
+  }
+
+  svg {
+    position: relative;
+    top: 2px;
+  }
+}
+
+.calendarActive {
+  color: $color-blue-500;
+  background-color: $color-blue-100;
+}
+
+.disabled {
+  opacity: $input-disabled-opacity;
+}

package/dist/iife/DateRangePicker.module-EIUGUIIA.scss

@@ -0,0 +1,115 @@
+@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";
+
+// Vars
+$button-height: 48px;
+$button-base-padding-horizontal: $spacing-sm;
+$button-icon-size: 1.25rem; // 20px
+
+$disabled-opacity: 0.5;
+$placeholder-opacity: 0.7;
+
+.button {
+  @include button-reset;
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: $button-height;
+  width: 100%;
+  color: $color-purple-800;
+  font-family: $typography-paragraph-body-font-family;
+  font-size: $typography-paragraph-body-font-size;
+  font-weight: $typography-paragraph-body-font-weight;
+  line-height: 1.5;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  text-align: left;
+  background-color: $color-white;
+  background-clip: padding-box;
+  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+  border-radius: $border-solid-border-radius;
+  padding: 0 $button-base-padding-horizontal;
+
+  &:global(.focus-visible):not([disabled]),
+  &:hover:not([disabled]) {
+    background-color: $color-gray-200;
+    border-color: $color-gray-600;
+    color: $color-purple-800;
+  }
+
+  &:global(.focus-visible):not([disabled]) {
+    outline: $color-blue-500 $border-focus-ring-border-style
+      $border-focus-ring-border-width;
+    outline-offset: 1px;
+  }
+
+  :focus:not([disabled]) {
+    outline: none;
+  }
+
+  &.disabled {
+    background: $color-white;
+    opacity: $disabled-opacity;
+    color: rgba($color-purple-800-rgb, $placeholder-opacity);
+    border-color: rgba($color-gray-500-rgb, 0.7);
+  }
+
+  .value {
+    padding-right: $button-base-padding-horizontal;
+    padding-left: 1.75rem;
+
+    &[dir="rtl"],
+    [dir="rtl"] & {
+      padding-right: 1.75rem;
+      padding-left: $button-base-padding-horizontal;
+    }
+  }
+}
+
+.startIconAdornment {
+  margin-top: -1px;
+}
+
+// Icon adornment styles
+@mixin vertically-center-icon {
+  position: absolute;
+  height: $button-icon-size;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.withStartIconAdornment {
+  .startIconAdornment {
+    @include vertically-center-icon;
+    color: $color-purple-800;
+    opacity: $disabled-opacity;
+    right: auto;
+    left: $spacing-sm;
+
+    &[dir="rtl"],
+    [dir="rtl"] & {
+      right: $spacing-sm;
+      left: auto;
+    }
+  }
+
+  &:focus-within:not(.disabled),
+  &:hover:not(.disabled) {
+    .startIconAdornment {
+      opacity: $placeholder-opacity;
+    }
+  }
+
+  .button {
+    padding-right: $button-base-padding-horizontal;
+    padding-left: calc(#{$spacing-md} + #{$button-icon-size});
+
+    &[dir="rtl"],
+    [dir="rtl"] & {
+      padding-right: calc(#{$spacing-md} + #{$button-icon-size});
+      padding-left: $button-base-padding-horizontal;
+    }
+  }
+}

package/dist/iife/DropdownButton.module-WZ6FRRPS.scss

@@ -0,0 +1,44 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "../variables";
+
+.dropdownButton {
+  display: inline-flex;
+  position: relative;
+  left: calc(-1 * #{$border-solid-border-width});
+  margin-left: $border-solid-border-width;
+  padding: $spacing-sm;
+  border-radius: 0 $border-solid-border-radius $border-solid-border-radius 0;
+  border-left-width: 0;
+
+  [dir="rtl"] & {
+    left: unset;
+    right: calc(-1 * #{$border-solid-border-width});
+    margin-left: unset;
+    margin-right: $border-solid-border-width;
+    border-radius: $border-solid-border-radius 0 0 $border-solid-border-radius;
+    border-left-width: $border-solid-border-width;
+    border-right-width: 0;
+  }
+
+  &:not(:disabled) {
+    &:hover,
+    &#{$story-className--hover},
+    &:active,
+    &#{$story-className--active},
+    &:focus-visible,
+    &#{$polyfill--focus-visible},
+    &#{$story-className__focus} {
+      left: calc(-1 * #{$border-solid-border-width});
+      margin-left: unset;
+      border-left-width: $border-solid-border-width;
+
+      [dir="rtl"] & {
+        left: unset;
+        right: calc(-1 * #{$border-solid-border-width});
+        margin-right: unset;
+        border-right-width: $border-solid-border-width;
+      }
+    }
+  }
+}

package/dist/iife/EditableRichTextContent.module-N2SFSI5C.scss

@@ -0,0 +1,25 @@
+@import "@kaizen/design-tokens/sass/animation";
+@import "@kaizen/design-tokens/sass/border";
+@import "@kaizen/design-tokens/sass/color";
+@import "@kaizen/design-tokens/sass/spacing";
+
+.editableContainer :global(.ProseMirror) {
+  padding: $spacing-sm;
+  position: relative;
+  border-radius: $border-solid-border-radius;
+  border: $border-focus-ring-border-width $border-focus-ring-border-style
+    transparent;
+  transition: background-color $animation-duration-immediate,
+    border-color $animation-duration-immediate;
+  background-color: $color-gray-200;
+}
+
+.editableContainer:hover :global(.ProseMirror) {
+  background-color: $color-gray-200;
+  border-color: $color-blue-500;
+}
+
+.editableContainer .hiddenButton:focus-within + * > :global(.ProseMirror) {
+  border: $border-focus-ring-border-width $border-focus-ring-border-style
+    $color-blue-500;
+}

package/dist/iife/EmptyState.module-DOSURL5X.scss

@@ -0,0 +1,156 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "./mixins";
+
+.container {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  padding-top: 2%;
+  padding-bottom: 2%;
+  padding-left: $spacing-md;
+  padding-right: $spacing-md;
+  color: $color-purple-800;
+  border: $border-solid-border-width $border-solid-border-style
+    $border-borderless-border-color-id;
+  border-radius: $border-solid-border-radius;
+
+  @include small {
+    flex-direction: column;
+    align-items: center;
+    padding-top: $spacing-md;
+    padding-bottom: $spacing-md;
+  }
+
+  &.straightCorners {
+    border-radius: 0;
+  }
+
+  // These class names must match the possible values of the component's layoutContext prop
+  &.sidebarAndContent {
+    @include large-sidebar-and-content {
+      padding-top: $spacing-md;
+      padding-bottom: $spacing-md;
+    }
+  }
+
+  &.contentOnly {
+    @include large-content-only {
+      padding-top: $spacing-md;
+      padding-bottom: $spacing-md;
+    }
+  }
+
+  &.positive {
+    background-color: $color-green-100;
+  }
+  &.negative {
+    background-color: $color-red-100;
+  }
+  &.action {
+    background-color: $color-orange-100;
+  }
+  &.neutral {
+    background-color: $color-purple-100;
+  }
+  &.informative {
+    background-color: $color-blue-100;
+  }
+}
+
+.illustrationSide,
+.textSide {
+  display: inline-block;
+}
+
+.illustrationSide {
+  min-width: 224px;
+  flex-grow: 0;
+  flex-shrink: 1;
+  margin-bottom: $spacing-md;
+
+  @include small {
+    width: 224px;
+  }
+
+  @include medium {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+    margin-bottom: 0;
+    min-width: 40%;
+    max-width: 50%;
+    flex-grow: 1;
+    box-sizing: border-box;
+    padding-inline-end: $spacing-md;
+  }
+
+  .sidebarAndContent & {
+    @include large-sidebar-and-content {
+      flex-shrink: 1;
+      flex-basis: auto;
+    }
+  }
+
+  .contentOnly & {
+    @include large-content-only {
+      flex-shrink: 1;
+      flex-basis: auto;
+    }
+  }
+}
+
+.illustration,
+.illustrationSide > video {
+  max-width: 100%;
+  max-height: 366px;
+  width: auto;
+
+  // Fixes for IE11 Flexbox issues
+  min-height: 196px;
+
+  @include small {
+    max-height: 196px;
+  }
+}
+
+.textSide {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  align-items: center;
+  -webkit-font-smoothing: antialiased;
+
+  @include medium {
+    flex-basis: 50%;
+    flex-grow: 0;
+  }
+}
+
+.textSideInner {
+  flex-grow: 0;
+  height: auto;
+  margin: 0 $spacing-sm;
+
+  @include small {
+    margin-bottom: 0;
+  }
+
+  @include medium {
+    max-width: 426px;
+  }
+}
+
+.heading {
+  margin-bottom: $spacing-md;
+
+  @media (max-width: (375px)) {
+    @include typography-heading-3-sm;
+  }
+}
+
+.description {
+  margin-bottom: $spacing-md;
+}