@kaizen/components 1.4.23 → 1.4.25

package/dist/iife/Padding.module-QSNUEZBU.scss

@@ -1,19 +0,0 @@
-@import "./Base.module.scss";
-
-@each $fraction, $padding in $spacing-list {
-  .p-#{$fraction} {
-    padding: $padding;
-  }
-  .pt-#{$fraction} {
-    padding-top: $padding;
-  }
-  .pr-#{$fraction} {
-    padding-right: $padding;
-  }
-  .pb-#{$fraction} {
-    padding-bottom: $padding;
-  }
-  .pl-#{$fraction} {
-    padding-left: $padding;
-  }
-}

package/dist/iife/Pagination.module-U5S6WZ5K.scss

@@ -1,124 +0,0 @@
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/component-library/styles/border";
-@import "~@kaizen/deprecated-component-library-helpers/styles/type";
-
-// Pagination
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.arrowIconWrapper {
-  height: 36px;
-  width: 36px;
-  border-radius: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: $border-focus-ring-border-width $border-focus-ring-border-style
-    $color-blue-300;
-  margin: 0 5px;
-  background-color: transparent;
-  color: $color-blue-500;
-  box-sizing: border-box;
-
-  &:disabled {
-    opacity: 0.35;
-    pointer-events: none;
-  }
-
-  &:hover {
-    background-color: $color-blue-100;
-  }
-
-  &:focus {
-    background-color: $color-blue-200;
-    &:focus-visible {
-      outline: none;
-    }
-    .pageIndicatorFocusRing {
-      border: $border-focus-ring-border-width $border-focus-ring-border-style
-        $color-blue-500;
-    }
-  }
-}
-
-// Page indicator
-.pagesIndicatorWrapper {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-}
-
-.pageIndicator,
-.pageIndicatorSelected {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 36px;
-  width: 36px;
-  border-radius: 18px;
-  border: $border-focus-ring-border-width $border-focus-ring-border-style
-    transparent;
-  background-color: transparent;
-  color: $color-blue-500;
-  margin: 0 5px;
-  font-family: $typography-paragraph-body-font-family;
-  font-weight: $typography-paragraph-body-font-weight;
-  font-size: $typography-paragraph-body-font-size;
-}
-
-.pageIndicatorFocusRing {
-  position: absolute;
-  padding: 1px;
-  border-radius: 50%;
-  width: inherit;
-  height: inherit;
-}
-
-.pageIndicator {
-  &:hover {
-    background-color: $color-blue-100;
-  }
-  &:focus-visible {
-    outline: none;
-  }
-  &:focus {
-    &:not(.pageIndicatorSelected) {
-      background-color: $color-blue-100;
-      .pageIndicatorFocusRing {
-        border: $border-focus-ring-border-width $border-focus-ring-border-style
-          $color-blue-500;
-      }
-    }
-  }
-}
-
-.pageIndicatorSelected {
-  background-color: $color-blue-500;
-  color: $color-white;
-  &:focus {
-    .pageIndicatorFocusRing {
-      border: $border-focus-ring-border-width $border-focus-ring-border-style
-        $color-blue-500;
-    }
-  }
-  &:hover {
-    background-color: $color-blue-500;
-  }
-}
-
-// Truncate indicator
-.truncateIndicatorWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 36px;
-  width: 36px;
-  background-color: transparent;
-  color: rgba($color-purple-800-rgb, 0.7);
-  margin: 0 5px;
-}

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/Popover.module-5ZQUBHXG.scss

@@ -1,264 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-// Sync with PopoverModern.tsx
-$arrow-width: 14px;
-$arrow-height: 7px;
-
-$large-width: 450px;
-
-@mixin button-reset {
-  appearance: none;
-  display: inline;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
-// Suggestion: with this implementation, the anchor point of the popover is at the base of the triangle. But,
-// we would ideally want it at the tip of the triangle. Otherwise, when using the popover, the consumer needs to manually
-// add something like a `margin-top: 8px` to get the popover properly positioned.
-// I didn't update this, as I didn't want to introduce a breaking change.
-@mixin arrow($background-color, $border-color) {
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    border-left: ($arrow-width / 2) solid transparent;
-    border-right: ($arrow-width / 2) solid transparent;
-    top: 0;
-    left: 0;
-  }
-
-  &::before {
-    border-top: $arrow-height solid $border-color;
-  }
-
-  /* The white fill of the triangle */
-  &::after {
-    border-top: $arrow-height solid $background-color;
-    margin-top: -2px;
-    z-index: 1;
-  }
-}
-
-.root {
-  width: 220px;
-  position: absolute;
-  left: 50%;
-  // also see the component file under getRootStyle, which will transform the element
-}
-
-%box {
-  background: $color-white;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-300;
-  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.1));
-  border-radius: $border-solid-border-radius;
-  color: $color-purple-800;
-  text-align: left;
-  padding: $spacing-sm 1rem 1rem;
-}
-
-.defaultBox {
-  @extend %box;
-}
-
-.defaultArrow {
-  @include arrow(white, $color-gray-300);
-}
-
-$informative-box-border-color: $color-blue-300;
-
-.informativeBox {
-  @extend %box;
-  background: $color-blue-100;
-  border-color: $informative-box-border-color;
-}
-
-.informativeArrow {
-  @include arrow($color-blue-100, $informative-box-border-color);
-}
-
-$positive-box-border-color: $color-green-300;
-
-.positiveBox {
-  @extend %box;
-  background: $color-green-100;
-  border-color: $positive-box-border-color;
-}
-
-.positiveArrow {
-  @include arrow($color-green-100, $positive-box-border-color);
-}
-
-$negative-box-border-color: $color-red-300;
-
-.negativeBox {
-  @extend %box;
-  background: $color-red-100;
-  border-color: $negative-box-border-color;
-}
-
-.negativeArrow {
-  @include arrow($color-red-100, $negative-box-border-color);
-}
-
-.cautionaryBox {
-  @extend %box;
-  background: $color-yellow-100;
-  border-color: $color-yellow-400;
-}
-
-.cautionaryArrow {
-  @include arrow($color-yellow-100, $color-yellow-400);
-}
-
-.header {
-  position: relative;
-  margin-bottom: $spacing-xs;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  padding-right: $spacing-md;
-}
-
-.container {
-  position: relative;
-  white-space: pre-line;
-}
-
-.icon {
-  display: inherit;
-  margin-right: $spacing-xs;
-}
-
-.informativeIcon {
-  color: $color-blue-500;
-}
-
-.positiveIcon {
-  color: $color-green-400;
-}
-
-.negativeIcon {
-  color: $color-red-500;
-}
-
-.cautionaryIcon {
-  color: $color-yellow-500;
-}
-
-.close {
-  @include button-reset;
-  position: absolute;
-  right: 0;
-  margin-left: auto;
-  display: inherit;
-  color: rgba($color-purple-800-rgb, 0.7);
-
-  &:hover {
-    color: $color-purple-800;
-  }
-
-  &:global(.focus-visible) {
-    color: $color-purple-800;
-    outline: $color-blue-500 $border-focus-ring-border-style
-      $border-focus-ring-border-width;
-    outline-offset: calc(-1 * #{$border-focus-ring-border-width});
-    border-radius: $border-borderless-border-radius;
-  }
-
-  :focus {
-    outline: none;
-  }
-}
-
-.arrowWrapper {
-  position: absolute;
-  // Needed by popper, so it measures the size of the arrow correctly
-  width: $arrow-width;
-  height: $arrow-height;
-}
-
-.arrow {
-  // Needed by popper, so it measures the size of the arrow correctly
-  width: $arrow-width;
-  height: $arrow-height;
-}
-
-/**
- * In the legacy popover, the "side" described the location of the arrow, and
- * we use css classes to determine the placement.
- * In the modern popover, the "side" describes the location of the popover
- * relative to the reference element, and we use data attributes to determine
- * the placement.
- * Hence, the confusion below.
- */
-.arrowSideTop,
-[data-popper-placement^="bottom"] .arrowWrapper {
-  bottom: 100%;
-  left: 50%;
-  margin-top: -9px;
-
-  .arrow {
-    transform: rotate(180deg);
-  }
-}
-
-.arrowSideLeft,
-[data-popper-placement^="left"] .arrowWrapper {
-  right: 0;
-  margin-right: -10px;
-
-  .arrow {
-    transform: rotate(270deg);
-  }
-}
-.arrowSideRight,
-[data-popper-placement^="right"] .arrowWrapper {
-  left: 0;
-  margin-left: -10px;
-
-  .arrow {
-    transform: rotate(90deg);
-  }
-}
-
-.arrowSideBottom,
-[data-popper-placement^="top"] .arrowWrapper {
-  top: 100%;
-  left: 50%;
-}
-
-// Legacy component only
-.arrowPositionCenter {
-  transform: translateX(-50%);
-}
-
-// Legacy component only
-.arrowPositionStart {
-  left: $spacing-md;
-  right: auto;
-}
-
-// Legacy component only
-.arrowPositionEnd {
-  right: $spacing-md;
-  left: auto;
-}
-
-.large {
-  width: auto;
-  max-width: $large-width;
-}
-
-.singleLine {
-  text-overflow: ellipsis;
-  /* white-space and overflow are required for text-overflow to do anything */
-  white-space: nowrap;
-  overflow: hidden;
-}

package/dist/iife/ProgressBar.module-RL2UWVEH.scss

@@ -1,91 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-
-$height: 10px;
-
-@mixin animation-background($color) {
-  background: linear-gradient(90deg, transparent, #{$color} 75%, transparent);
-}
-
-.label {
-  color: $color-purple-800;
-  text-align: center;
-}
-
-.subtext {
-  color: $color-purple-800;
-  text-align: center;
-  opacity: 0.8;
-}
-
-.progressBackground {
-  width: 100%;
-  background: $color-gray-300;
-  border-radius: $height;
-  height: $height;
-  overflow: hidden;
-  position: relative;
-}
-
-@keyframes pulse {
-  0% {
-    transform: translateX(-100%);
-  }
-
-  100% {
-    transform: translateX(200%);
-  }
-}
-
-.progress {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  border-radius: $height;
-  overflow: hidden;
-  right: 0;
-  transition: transform 200ms ease;
-}
-
-.positive {
-  composes: progress;
-  background: $color-green-400;
-  &::after {
-    @include animation-background($color-green-300);
-  }
-}
-
-.informative {
-  composes: progress;
-  background: $color-blue-400;
-  &::after {
-    @include animation-background($color-blue-300);
-  }
-}
-
-.cautionary {
-  composes: progress;
-  background: $color-yellow-400;
-  &::after {
-    @include animation-background($color-yellow-300);
-  }
-}
-
-.negative {
-  composes: progress;
-  background: $color-red-400;
-}
-
-.isAnimating {
-  &::after {
-    opacity: 1;
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 50%;
-    animation: pulse 2s infinite;
-    transition: opacity 0.2s;
-  }
-}

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