@kaizen/components 1.4.20-canary.2 → 1.4.20

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