@kaizen/components 1.4.22-canary.5 → 1.4.23

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/Divider.module-YXIUJPD4.scss

@@ -0,0 +1,40 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+
+// Use different tokens with different opacities across the Zen and Heart themes, by assuming that when Zen is applied there won't be any CSS variables declared.
+
+$dt-content-border-color: rgba($color-gray-600-rgb, 0.1);
+
+.wrapper {
+  width: 100%;
+  border: 0;
+  margin: 0;
+  border-radius: $border-solid-border-radius;
+  // This is here to protect against a global style in a consumer.
+  // https://github.com/cultureamp/murmur/blob/master/app/assets/stylesheets/legacy/modules/_body.scss
+  visibility: visible;
+}
+
+.content {
+  border-top: 1px solid;
+  border-color: $dt-content-border-color;
+
+  &.reversed {
+    border-color: rgba($color-white-rgb, 0.1);
+  }
+}
+
+.canvas {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  border-color: rgba($color-gray-600-rgb, 0.1);
+
+  &.reversed {
+    border-color: rgba($color-white-rgb, 0.1);
+  }
+}
+
+.menuSeparator {
+  @extend .content;
+  margin: 5px 0;
+}

package/dist/iife/Dropdown.module-4CIBZTRZ.scss

@@ -0,0 +1,100 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/deprecated-component-library-helpers/styles/color";
+@import "../../styles/layers";
+@import "~@kaizen/deprecated-component-library-helpers/styles/type";
+
+$width: 248px;
+$caButton-border-width: $border-solid-border-width;
+$caButton-verticalPadding: calc(
+  calc(#{$ca-grid} / 2) - #{$caButton-border-width}
+);
+
+.dropdown {
+  position: relative;
+  padding: $caButton-verticalPadding
+    calc(#{$ca-grid * 1} - #{$caButton-border-width});
+}
+
+.buttonReset {
+  appearance: none;
+  display: inline;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+// @TODO - this should be using Kaizen's button
+.dropdownButton {
+  @include kz-type-inter-button-primary;
+  @include ca-inherit-baseline;
+  composes: buttonReset;
+  cursor: pointer;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropdownControlAction {
+  @include kz-type-inter-button-primary;
+  @include ca-inherit-baseline;
+}
+
+.dropdownIcon {
+  box-sizing: border-box;
+  width: $ca-grid;
+  height: $ca-grid;
+  padding: 2px;
+}
+
+.dropdownIcon + .dropdownLabel {
+  margin-left: calc(#{$ca-grid} / 2 - 2px);
+
+  [dir="rtl"] & {
+    margin-left: 0;
+    margin-right: calc(#{$ca-grid} / 2 - 2px);
+  }
+}
+
+// If you would like the dropdown icon to only be visible when a certain area is hovered,
+// have you hover area use (or compose) the `dropdownHoverArea` class. The label will
+// always be visible.
+.dropdownHoverArea {
+  .dropdownIcon {
+    opacity: 0;
+    &.isOpen,
+    &:focus {
+      opacity: 1;
+    }
+  }
+  &:hover .dropdownIcon {
+    opacity: 1;
+  }
+}
+
+.chevronIcon {
+  position: relative;
+  top: 4px;
+}
+
+.menuContainer {
+  position: absolute;
+  width: $width;
+  z-index: $ca-z-index-dropdown;
+  right: 0;
+
+  [dir="rtl"] & {
+    right: auto;
+    left: 0;
+  }
+}
+
+.reversedColor {
+  color: $color-white;
+}

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;
+}

package/dist/iife/ExpertAdviceCollapsible.module-L554JCXB.scss

@@ -0,0 +1,47 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.expertAdviceContainer {
+  background-color: $color-purple-100;
+  border: 2px $border-solid-border-style $color-purple-300;
+  box-shadow: none;
+  color: $color-purple-800;
+  > div {
+    &:first-of-type {
+      background-color: $color-purple-100;
+      border-radius: $border-borderless-border-radius;
+      &:hover {
+        background-color: $color-purple-100;
+      }
+    }
+  }
+}
+
+.expertAdviceContainer:hover {
+  border-color: $color-purple-500;
+}
+
+.expertAdviceHeader {
+  background-color: $color-purple-100;
+  flex: 1 1 auto;
+  align-items: center;
+  display: flex;
+}
+
+.expertAdviceHeading {
+  color: $color-purple-600;
+  .expertAdviceContainer:hover & {
+    color: $color-purple-700;
+  }
+}
+
+.expertAdviceIcon {
+  margin-inline-end: $spacing-sm;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.expertAdviceSection {
+  padding: 0 $spacing-md $spacing-md;
+}

package/dist/iife/FieldGroup.module-SUPERNC6.scss

@@ -0,0 +1,10 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.group {
+  margin-bottom: $spacing-md;
+}
+
+.inline {
+  display: inline;
+  margin-bottom: 0;
+}

package/dist/iife/FieldMessage.module-6CWQV65E.scss

@@ -0,0 +1,73 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "../../variables";
+
+$message-icon-size: 1.25rem;
+$validation-message-padding: 0.5625rem;
+
+.message {
+  display: flex;
+  position: relative;
+  align-items: center;
+  gap: $spacing-xs;
+}
+
+.default {
+  color: $dt-color-form-text-color-label;
+
+  &.reversed {
+    color: $dt-color-form-text-color-label-reversed;
+  }
+}
+
+.error,
+.caution {
+  border-radius: $border-solid-border-radius;
+  padding: $validation-message-padding;
+  color: $color-purple-800;
+}
+
+.error {
+  background: $color-red-100;
+  opacity: 1;
+
+  &.reversed {
+    background: $color-red-300;
+  }
+}
+
+.caution {
+  background: $color-yellow-100;
+  opacity: 1;
+
+  &.reversed {
+    background: $color-yellow-400;
+  }
+}
+
+.positionBottom {
+  margin-top: $spacing-xs;
+}
+
+.positionTop {
+  margin-bottom: $spacing-xs;
+}
+
+.warningIcon {
+  display: inline-flex;
+  width: $message-icon-size;
+  align-self: flex-start;
+
+  .error & {
+    color: $color-red-500;
+  }
+
+  .caution & {
+    color: $color-yellow-500;
+  }
+
+  .reversed & {
+    color: $color-purple-800;
+  }
+}

package/dist/iife/FilterMenuButton.module-26EL5K3H.scss

@@ -0,0 +1,19 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
+@import "@kaizen/deprecated-component-library-helpers/styles/type";
+
+$gap: $spacing-sm;
+$menuContentHorizontalPadding: 4px; // this comes from the MenuContent component, which should be using tokens
+$menuContentVerticalPadding: 6px; // this comes from the MenuContent component, which should be using tokens
+
+.filterMenuButton {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0 calc(#{$gap} / -2);
+
+  > * {
+    margin: 0 calc(#{$gap} / 2);
+  }
+}