@kaizen/components 1.4.23 → 1.4.25

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

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

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

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

@@ -1,115 +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";
-
-// 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

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

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

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

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

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

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

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

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

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

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