@kaizen/components 1.4.22-canary.0 → 1.4.22-canary.1

package/dist/iife/MultiSelectOption.module-TIZIGUVB.scss

@@ -1,115 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.option {
-  height: fit-content;
-
-  align-items: flex-start;
-  display: inline-grid;
-  grid-template-columns: $spacing-md 1fr auto;
-  gap: $spacing-xs;
-  padding: $spacing-xs;
-  position: relative;
-
-  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;
-
-  border: $border-solid-border-width $border-solid-border-style;
-  border-color: $border-borderless-border-color;
-  border-radius: $border-solid-border-radius;
-
-  cursor: default;
-
-  &:hover,
-  &:active,
-  &:focus {
-    background-color: $color-blue-100;
-    .badge {
-      background-color: $color-white;
-    }
-    .icon {
-      border-color: $color-gray-600;
-      background-color: $color-gray-200;
-    }
-  }
-
-  &.isFocused,
-  &:focus-visible,
-  &:global(.js-focus-visible) &:global(.focus-visible) {
-    background-color: $color-blue-100;
-    &::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-      content: "";
-      position: absolute;
-      background: transparent;
-      border: $border-focus-ring-border-width $border-focus-ring-border-style
-        $color-blue-500;
-      border-radius: $border-focus-ring-border-radius;
-      top: calc(-1 * #{$focus-ring-offset});
-      left: calc(-1 * #{$focus-ring-offset});
-      right: calc(-1 * #{$focus-ring-offset});
-      bottom: calc(-1 * #{$focus-ring-offset});
-      z-index: 1; // show border when sibling option is hovered
-    }
-  }
-
-  &:focus {
-    outline: none; // cancel browser style
-  }
-
-  &.isDisabled {
-    opacity: 0.3;
-    background: none;
-    &:hover {
-      .icon {
-        border-color: $color-gray-500;
-      }
-      .badge {
-        background-color: $color-gray-300;
-      }
-    }
-  }
-}
-
-$iconAndBadgeHeight: $spacing-md;
-
-.icon {
-  line-height: 1;
-  height: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
-  width: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
-  border: $border-solid-border-width $border-solid-border-style;
-  border-color: $color-gray-500;
-  border-radius: $border-solid-border-radius;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.badgeContainer {
-  // Must be the same height as .icon, so they align vertically
-  height: $iconAndBadgeHeight;
-  display: flex;
-  align-items: center;
-}
-
-.isSelected {
-  font-weight: $typography-paragraph-bold-font-weight;
-
-  &.icon {
-    background-color: $color-gray-500;
-    color: $color-white;
-  }
-
-  &:hover,
-  &:active,
-  &:focus {
-    .icon {
-      background-color: $color-gray-600;
-    }
-  }
-}

package/dist/iife/NoResults.module-3FUWBVUH.scss

@@ -1,3 +0,0 @@
-.container {
-  padding: 1.125rem; // There's no spacing token for 18px -_-
-}

package/dist/iife/Option.module-O2QRLWHC.scss

@@ -1,87 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.option {
-  height: fit-content;
-
-  align-items: center;
-  display: inline-grid;
-  grid-template-columns: auto $spacing-md;
-  gap: $spacing-xs;
-  padding: 0.5rem $spacing-xs 0.5rem $spacing-sm;
-  position: relative;
-
-  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;
-
-  border: $border-solid-border-width $border-solid-border-style;
-  border-color: $border-borderless-border-color;
-  border-radius: 4px;
-
-  cursor: default;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:hover:not(.disabled),
-  &:active:not(.disabled),
-  &:global(.story__option-hover):not(.disabled) {
-    background-color: $color-blue-100;
-    color: $color-blue-500;
-    .icon {
-      color: $color-blue-500;
-    }
-  }
-
-  &.isFocusVisible,
-  &:global(.story__option-focus) {
-    background-color: $color-blue-100;
-    color: $color-blue-500;
-    &::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-      content: "";
-      position: absolute;
-      background: transparent;
-      border: $border-focus-ring-border-width $border-focus-ring-border-style
-        $color-blue-500;
-      border-radius: 4px;
-      top: calc(-1 * #{$focus-ring-offset});
-      left: calc(-1 * #{$focus-ring-offset});
-      right: calc(-1 * #{$focus-ring-offset});
-      bottom: calc(-1 * #{$focus-ring-offset});
-      z-index: 1; // show border when sibling option is hovered
-    }
-    .icon {
-      color: $color-blue-500;
-    }
-  }
-}
-
-$iconAndBadgeHeight: $spacing-md;
-
-.icon {
-  line-height: 1;
-  height: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
-  width: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.isSelected {
-  font-weight: $typography-paragraph-bold-font-weight;
-  color: $color-blue-500;
-  &.icon {
-    color: $color-blue-500;
-  }
-}
-
-.disabled {
-  color: $color-gray-500;
-}

package/dist/iife/Overlay.module-W7K5DWH6.scss

@@ -1,24 +0,0 @@
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-
-.menuPopup {
-  position: absolute;
-  z-index: 1000; // from $ca-z-index-dropdown
-  box-sizing: border-box;
-  background: $color-white;
-  color: $color-purple-800;
-  border-radius: $border-solid-border-radius;
-  box-shadow: $shadow-large-box-shadow;
-  margin-top: 0.5rem;
-  text-align: left;
-  width: 100%;
-  min-width: 248px;
-
-  [dir="rtl"] & {
-    text-align: right;
-  }
-
-  // Allow horizontal scroll for long text options
-  overflow: auto;
-}

package/dist/iife/Paragraph.module-J7DMUCVE.scss

@@ -1,71 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "../fonts.scss";
-
-.paragraph {
-  margin: 0;
-
-  strong {
-    font-weight: $typography-paragraph-bold-font-weight;
-  }
-}
-
-.intro-lede {
-  font-family: $typography-paragraph-intro-lede-font-family;
-  font-weight: $typography-paragraph-intro-lede-font-weight;
-  font-size: $typography-paragraph-intro-lede-font-size;
-  line-height: $typography-paragraph-intro-lede-line-height;
-  letter-spacing: $typography-paragraph-intro-lede-letter-spacing;
-}
-
-.body {
-  font-family: $typography-paragraph-body-font-family;
-  font-weight: $typography-paragraph-body-font-weight;
-  font-size: $typography-paragraph-body-font-size;
-  line-height: $typography-paragraph-body-line-height;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-}
-
-.small {
-  font-family: $typography-paragraph-small-font-family;
-  font-weight: $typography-paragraph-small-font-weight;
-  font-size: $typography-paragraph-small-font-size;
-  line-height: $typography-paragraph-small-line-height;
-  letter-spacing: $typography-paragraph-small-letter-spacing;
-}
-
-.extra-small {
-  font-family: $typography-paragraph-extra-small-font-family;
-  font-weight: $typography-paragraph-extra-small-font-weight;
-  font-size: $typography-paragraph-extra-small-font-size;
-  line-height: $typography-paragraph-extra-small-line-height;
-  letter-spacing: $typography-paragraph-extra-small-letter-spacing;
-}
-
-.dark {
-  color: $color-purple-800;
-  opacity: 1;
-}
-
-.dark-reduced-opacity {
-  color: $color-purple-800;
-  opacity: 0.7;
-}
-
-.white {
-  color: $color-white;
-  opacity: 1;
-}
-
-.white-reduced-opacity {
-  color: $color-white;
-  opacity: 0.8;
-}
-
-.positive {
-  color: $color-green-600;
-}
-
-.negative {
-  color: $color-red-600;
-}

package/dist/iife/Radio.module-DCWPHVKW.scss

@@ -1,99 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/component-library/styles/mixins/forms";
-@import "../../variables";
-
-$radio-size: 24px;
-$icon-size: 10px;
-$icon-offset: 5px;
-$focus-ring-offset: 2px;
-
-$dt-color-radio-background-color-hover: $color-gray-100;
-$dt-color-radio-disc-color-base: $color-gray-600;
-$dt-color-radio-border-color-focus: $color-blue-500;
-$dt-color-radio-border-color-focus-reversed: $color-blue-300;
-
-.radioInput {
-  @include form-input-visually-hidden();
-}
-
-.icon {
-  top: $icon-offset;
-  left: $icon-offset;
-  width: $icon-size;
-  height: $icon-size;
-  border-radius: 50%;
-  background: $dt-color-radio-disc-color-base;
-  position: absolute;
-
-  &.reversed {
-    background: $color-white;
-  }
-}
-
-.box {
-  display: block;
-  position: relative;
-  background: $color-white;
-  height: $radio-size;
-  width: $radio-size;
-  top: 0;
-  border: $border-solid-border-width $border-solid-border-style
-    $dt-color-form-border-color;
-  box-sizing: border-box;
-  border-radius: 50%;
-
-  .radioInput:focus:not([disabled]) + & {
-    border-color: $dt-color-radio-disc-color-base;
-  }
-
-  .radioInput:focus:not([disabled]) + &::after {
-    pointer-events: none;
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    background: transparent;
-    border-radius: $radio-size + $focus-ring-offset;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $dt-color-radio-border-color-focus;
-    top: -$focus-ring-offset - ($radio-size / 8);
-    left: -$focus-ring-offset - ($radio-size / 8);
-    width: calc(
-      #{$radio-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2
-    );
-    height: calc(
-      #{$radio-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2
-    );
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .radioInput:not([disabled]) + &:hover {
-      border-color: $dt-color-form-border-color-hover;
-      background-color: $dt-color-radio-background-color-hover;
-    }
-  }
-
-  &.reversed {
-    border: $border-solid-border-width $border-solid-border-style
-      rgba($color-white-rgb, 0.65);
-    background: transparent;
-
-    .radioInput:focus:not([disabled]) + & {
-      border-color: $color-white;
-    }
-    .radioInput:focus:not([disabled]) + &::after {
-      border-color: $dt-color-radio-border-color-focus-reversed;
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-      .radioInput:not([disabled]) + &:hover {
-        border-color: $color-white;
-        background-color: transparent;
-      }
-    }
-  }
-  &.error {
-    border-color: $color-red-500;
-  }
-}

package/dist/iife/RadioField.module-C2XRADW5.scss

@@ -1,50 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "../variables";
-
-$dt-color-radio-background-color-hover: $color-gray-100;
-
-.container {
-  position: relative;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-  margin-bottom: $spacing-sm;
-
-  label {
-    -webkit-tap-highlight-color: transparent;
-
-    :global(.ideal-sans) & {
-      // This is to override bootstrap styles. Remove when appropriate
-      font-size: $typography-paragraph-body-font-size;
-      padding-top: 0;
-    }
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    &:not(.reversed) label:hover {
-      input:not([disabled]) + span {
-        border-color: $dt-color-form-border-color-hover;
-        background-color: $dt-color-radio-background-color-hover;
-      }
-    }
-    &.reversed label:hover {
-      input:not([disabled]) + span {
-        border-color: $color-white;
-        background-color: transparent;
-      }
-    }
-  }
-
-  &.selected {
-    label {
-      font-family: $typography-paragraph-body-font-family;
-      font-size: $typography-paragraph-body-font-size;
-      line-height: $typography-paragraph-body-line-height;
-      letter-spacing: $typography-paragraph-body-letter-spacing;
-      font-weight: $typography-paragraph-bold-font-weight;
-      position: static;
-    }
-  }
-}

package/dist/iife/RadioGroup.module-PDLRO572.scss

@@ -1,23 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.radioGroupLabel {
-  margin-bottom: $spacing-sm;
-  label {
-    :global(.ideal-sans) & {
-      // This is to override bootstrap styles. Remove when appropriate
-      padding-top: 0;
-    }
-  }
-  &.reversed {
-    color: $color-white;
-  }
-}
-.radioGroupContainer {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: $spacing-sm;
-  &.noBottomMargin {
-    margin-bottom: 0;
-  }
-}

package/dist/iife/RemovableFilterTrigger.module-SJ37V6UZ.scss

@@ -1,29 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "../mixins";
-
-.trigger {
-  display: inline-flex;
-
-  .triggerButton {
-    border-top-left-radius: $border-solid-border-radius;
-    border-bottom-left-radius: $border-solid-border-radius;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .removeButton {
-    @include button;
-    width: $spacing-xl;
-    justify-content: center;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-top-right-radius: $border-solid-border-radius;
-    border-bottom-right-radius: $border-solid-border-radius;
-  }
-
-  .divider {
-    border-left: 1px solid $color-blue-300;
-  }
-}

package/dist/iife/SearchField.module-2EV6HGZE.scss

@@ -1,6 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.label {
-  display: block;
-  margin-bottom: $spacing-xs; // @note: add gap between label and input
-}

package/dist/iife/SearchInput.module-RQEF3FWR.scss

@@ -1,6 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.inputSearchContainer {
-  position: relative;
-  margin: 0 $spacing-sm;
-}

package/dist/iife/SectionDivider.module-AN4OA4O3.scss

@@ -1,3 +0,0 @@
-.divider {
-  margin: 0.5rem 0;
-}

package/dist/iife/Select.module-WOGFQRYI.scss

@@ -1,8 +0,0 @@
-.container {
-  position: relative;
-  width: 100%;
-}
-
-.notFullWidth {
-  width: 180px;
-}

package/dist/iife/SelectionControlButton.module-HO7BZ2UP.scss

@@ -1,81 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "../../../mixins";
-
-$focus-ring-offset: 1px;
-
-.button {
-  @include button-reset;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  font-family: $typography-button-secondary-font-family;
-  font-weight: $typography-button-secondary-font-weight;
-  font-size: $typography-button-secondary-font-size;
-  line-height: $typography-button-secondary-line-height;
-  letter-spacing: $typography-button-secondary-letter-spacing;
-  position: relative;
-
-  color: $color-blue-500;
-
-  border: $border-solid-border-width $border-solid-border-style;
-  border-color: $border-borderless-border-color;
-  border-radius: $border-solid-border-radius;
-
-  //       4px       8px
-  padding: 0.25rem 0.5rem;
-
-  &:hover,
-  &:active,
-  &:focus {
-    &:not(.isDisabled) {
-      background-color: $color-blue-100;
-    }
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:global(.focus-visible)::after {
-    $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-    content: "";
-    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: $color-blue-500;
-    top: calc(-1 * #{$focus-ring-offset});
-    left: calc(-1 * #{$focus-ring-offset});
-    right: calc(-1 * #{$focus-ring-offset});
-    bottom: calc(-1 * #{$focus-ring-offset});
-  }
-
-  display: inline-flex;
-  gap: $spacing-xs;
-  align-items: center;
-
-  // TODO: copied from Calendar button since the design is not settled
-  &.isDisabled {
-    pointer-events: none;
-    color: rgba($color-purple-800-rgb, 0.3);
-    opacity: 1;
-
-    :global(.js-focus-visible) & {
-      // hide native focus ring when :focus but not :focus-visible
-      &:focus {
-        outline: none;
-        border: 2px solid transparent;
-      }
-
-      &:global(.focus-visible)::after {
-        border-style: $border-dashed-border-style;
-        border-color: $color-gray-400;
-      }
-    }
-  }
-}

package/dist/iife/Slider.module-EIBFJ2LP.scss

@@ -1,42 +0,0 @@
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/layout";
-
-.wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-.labelWrapper {
-  margin-bottom: $spacing-sm;
-}
-
-@media (min-width: $layout-breakpoints-medium) {
-  .labelInline {
-    &.wrapper {
-      align-items: center;
-      flex-direction: row;
-    }
-
-    .labelWrapper {
-      flex: 1;
-    }
-
-    .inputWrapper {
-      flex-basis: 50%;
-    }
-  }
-}
-
-.descriptionDisabled {
-  opacity: 0.3;
-}
-
-.readOnlyMessage {
-  text-align: center;
-  font-family: $typography-paragraph-small-font-family;
-  font-size: $typography-paragraph-small-font-size;
-  font-weight: $typography-paragraph-bold-font-weight;
-  line-height: $typography-paragraph-body-line-height;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-}