@kaizen/components 1.4.21 → 1.4.22-canary.0

package/dist/iife/Tabs.module-BUPNPYW4.scss

@@ -1,172 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/component-library/styles/border";
-@import "~@kaizen/deprecated-component-library-helpers/styles/color";
-@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
-@import "~@kaizen/deprecated-component-library-helpers/styles/type";
-
-.container {
-  display: flex;
-}
-
-.tab {
-  @include ca-inherit-baseline;
-  font-family: $typography-heading-4-font-family;
-  font-size: $typography-heading-4-font-size;
-  line-height: $typography-heading-4-line-height;
-  letter-spacing: $typography-heading-4-letter-spacing;
-  text-decoration: none;
-  color: $color-purple-800;
-  cursor: pointer;
-  position: relative;
-  transition: background-color 0.1s;
-
-  &:hover {
-    color: $color-blue-500;
-    text-decoration: none;
-    background-color: $color-blue-100;
-    font-weight: $typography-heading-4-font-weight;
-  }
-
-  // Use JS polyfill to simulate :focus-visible, not yet supported by bhorizontalsers
-  // https://github.com/WICG/focus-visible#backwards-compatibility
-  :global(.js-focus-visible) & {
-    // hide native focus ring when :focus but not :focus-visible
-    &:focus {
-      outline: none;
-    }
-
-    &:global(.focus-visible) {
-      color: $color-blue-500;
-      text-decoration: none;
-      background-color: $color-blue-100;
-      font-weight: $typography-heading-4-font-weight;
-
-      &:after {
-        content: "";
-        position: absolute;
-        background: transparent;
-        $focus-ring-offset: calc(#{$border-focus-ring-border-width} - 1px);
-        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});
-      }
-    }
-  }
-}
-
-.horizontalTab {
-  composes: tab;
-  font-weight: $typography-heading-4-font-weight;
-  border-top-left-radius: $border-borderless-border-radius;
-  border-top-right-radius: $border-borderless-border-radius;
-  padding: 0 $ca-grid * 0.75;
-  height: 3 * $ca-grid;
-
-  top: 0; // this overrides baseline shift. @include ca-inherit-baseline does not work because
-  // we need to make this position: relative, for the absolutely positioned underline.
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 4.5rem - ($ca-grid * 0.75) * 2; // give tabs with short text some breathing room
-
-  :global(.js-focus-visible) &:global(.focus-visible):after {
-    border-radius: $border-borderless-border-radius
-      $border-borderless-border-radius 0 0;
-  }
-}
-
-.horizontalTabActive {
-  composes: tab;
-  composes: horizontalTab;
-  font-weight: $typography-heading-4-font-weight;
-  color: $color-blue-500;
-
-  &::before {
-    $underline-height: 5px;
-    content: "";
-    display: block;
-    border-top-left-radius: $underline-height;
-    border-top-right-radius: $underline-height;
-    background-color: currentColor;
-    height: $underline-height;
-    width: 100%;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-}
-
-.horizontalTabDisabled {
-  composes: tab;
-  composes: horizontalTab;
-  cursor: inherit;
-  opacity: 0.3;
-  font-weight: normal;
-
-  &.horizontalTabActive:hover {
-    background-color: transparent;
-  }
-
-  &:hover:not(.horizontalTabActive) {
-    color: $color-purple-800;
-    background-color: transparent;
-  }
-}
-
-.horizontalTab + .horizontalTab {
-  @include ca-margin($start: $ca-grid * 0.5);
-}
-
-.verticalTab {
-  composes: tab;
-  min-height: $spacing-xl;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  border-radius: $border-solid-border-radius;
-  font-weight: $typography-heading-4-font-weight;
-
-  [dir="rtl"] & {
-    padding-right: $spacing-sm;
-  }
-
-  [dir="ltr"] & {
-    padding-left: $spacing-sm;
-  }
-
-  :global(.js-focus-visible) &:global(.focus-visible):after {
-    border-radius: $border-borderless-border-radius;
-    z-index: 1; // pop the border out so sibling tabs don't overlap
-  }
-}
-
-.verticalTabActive {
-  composes: tab;
-  composes: verticalTab;
-  color: $color-blue-500;
-}
-
-.verticalTabDisabled {
-  composes: tab;
-  composes: verticalTab;
-  cursor: inherit;
-  opacity: 0.3;
-
-  &.verticalTabActive:hover {
-    background-color: transparent;
-  }
-
-  &:hover:not(.verticalTabActive) {
-    color: $color-purple-800;
-    background-color: transparent;
-  }
-}

package/dist/iife/Tag.module-T6PQJLSW.scss

@@ -1,268 +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";
-
-$medium: calc(#{$spacing-md} * 1.25);
-$small: $spacing-md;
-
-// reset user agent styles for button element type
-@mixin button-reset {
-  appearance: none;
-  background: transparent;
-  border: none;
-  font: inherit;
-  margin: 0;
-  padding: 0;
-  transition: none;
-}
-
-.root {
-  margin-inline-end: calc(#{$spacing-md} * 0.5);
-  font-size: $typography-paragraph-small-font-size;
-  font-weight: $typography-paragraph-small-font-weight;
-  letter-spacing: $typography-paragraph-small-letter-spacing;
-  color: $color-purple-800;
-  display: inline-block;
-  border: $border-borderless-border-width $border-borderless-border-style
-    $border-borderless-border-color;
-  border-radius: calc(#{$spacing-md} * 0.75);
-  padding: 0 calc(#{$spacing-md} * 0.4);
-  box-sizing: border-box;
-
-  &.profile {
-    padding-left: calc(#{$spacing-md} * 0.2);
-  }
-}
-
-.layoutContainer {
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.validationIcon {
-  align-items: center;
-  display: flex;
-  margin-inline-start: calc(#{$spacing-md} * -0.15);
-  margin-inline-end: $spacing-xs;
-}
-
-.profile {
-  margin-inline-start: calc(#{$spacing-md} * -0.15);
-  margin-inline-end: $spacing-xs;
-  display: flex;
-  align-items: center;
-}
-
-.textContent {
-  margin-top: -1px;
-  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;
-  white-space: nowrap;
-}
-
-.dismissButton {
-  @include button-reset;
-  position: relative;
-  display: flex;
-  height: 100%;
-  align-items: center;
-  padding: 0 $spacing-xs;
-  margin-inline-end: -0.6625rem;
-  margin-inline-start: -0.225rem;
-  color: rgba($color-purple-800-rgb, 0.7);
-  cursor: pointer;
-
-  &:hover {
-    color: $color-purple-800;
-  }
-
-  &:active {
-    color: $color-purple-800;
-  }
-
-  svg {
-    position: relative;
-  }
-
-  :global(.js-focus-visible) & {
-    outline: none;
-
-    // show custom focus ring when :focus-visible
-    &:global(.focus-visible) .iconWrapper {
-      color: $color-purple-800;
-
-      &::after {
-        $focus-ring-offset: calc((#{$border-focus-ring-border-width}));
-        content: "";
-        position: absolute;
-        background: transparent;
-        border-radius: 50%;
-        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});
-      }
-    }
-  }
-}
-
-.background {
-  // As our icons are only one-tone, this span places
-  // a white background under the dismissible icon to
-  // give the illusion of a background colour that is
-  // different to the rest of the tag
-  position: absolute;
-  display: inline-block;
-  width: calc(#{$spacing-xs} + 0.125rem); // optical adjustment
-  height: calc(#{$spacing-xs} + 0.125rem); // optical adjustment
-  background-color: white;
-  left: 10px;
-  top: 10px;
-}
-
-.iconWrapper {
-  position: relative;
-  height: 16px;
-  width: 16px;
-}
-
-.truncate {
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-  white-space: nowrap;
-}
-
-.inline {
-  margin: 0;
-}
-
-.medium {
-  height: $medium;
-}
-
-.small {
-  height: $small;
-}
-
-.default {
-  background-color: $color-gray-300;
-}
-
-.sentimentPositive {
-  background-color: $color-green-100;
-}
-
-.sentimentNeutral {
-  background-color: $color-gray-300;
-}
-
-.sentimentNegative {
-  background-color: $color-red-100;
-}
-
-.sentimentNone {
-  background-color: $color-white;
-  border-color: $color-gray-300;
-}
-
-.validationPositive {
-  background-color: $color-green-100;
-
-  .validationIcon {
-    color: $color-green-500;
-  }
-}
-
-.validationInformative {
-  background-color: $color-blue-100;
-
-  .validationIcon {
-    color: $color-blue-500;
-  }
-}
-
-.validationNegative {
-  background-color: $color-red-100;
-
-  .validationIcon {
-    color: $color-red-500;
-  }
-}
-
-.validationCautionary {
-  background-color: $color-yellow-100;
-
-  .validationIcon {
-    color: $color-yellow-500;
-  }
-}
-
-.statusLive {
-  background-color: $color-green-100;
-  color: $color-purple-800;
-}
-
-.statusAction {
-  background-color: $color-orange-100;
-  color: $color-purple-800;
-}
-
-.statusClosed {
-  background-color: $color-red-100;
-}
-
-.statusDraft {
-  background-color: $color-blue-100;
-  color: $color-purple-800;
-}
-
-$pulse-size-initial: 2px;
-$pulse-scale-factor: 9;
-$pulse-size-after: $pulse-size-initial * $pulse-scale-factor;
-$pulse-ring-position: calc(
-  -1 * (#{$pulse-size-after} / 2) + (#{$pulse-size-initial} / 2)
-);
-
-.pulse {
-  margin-inline-start: calc(#{$spacing-md} * 0.35);
-  margin-inline-end: calc(#{$spacing-md} * 0.15);
-  width: $pulse-size-initial;
-  height: $pulse-size-initial;
-  border-radius: 50%;
-  background-color: $color-blue-500;
-  display: inline-block;
-  position: relative;
-  opacity: 0.5;
-}
-
-.pulseRing {
-  position: absolute;
-  width: $pulse-size-after;
-  height: $pulse-size-after;
-  // this positioning has to be calculated as an exact value as scaling will mess with percentage values
-  left: $pulse-ring-position;
-  top: $pulse-ring-position;
-  border-radius: 50%;
-  background-color: $color-green-500;
-  animation: pulsate infinite 2.5s ease-out;
-}
-
-@keyframes pulsate {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  50%,
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}

package/dist/iife/Text.module-SXGFOHGJ.scss

@@ -1,173 +0,0 @@
-@import "~@kaizen/deprecated-component-library-helpers/styles/type";
-
-.page-title,
-h1.default-style {
-  @include ca-type-inter-page-title;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.title,
-h2.default-style {
-  @include ca-type-inter-title;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.display,
-h3.default-style {
-  @include ca-type-inter-display;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.heading,
-h4.default-style,
-h5.default-style,
-h6.default-style {
-  @include ca-type-inter-heading;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.lede {
-  @include ca-type-inter-lede;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.paragraph,
-p.default-style {
-  @include ca-type-inter-body;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.body,
-.default-style {
-  @include ca-type-inter-body;
-  margin: 0;
-}
-
-.body-bold {
-  @include ca-type-inter-body-bold;
-  margin: 0;
-}
-
-.small {
-  @include ca-type-inter-small;
-  margin: 0;
-}
-
-.small-bold {
-  @include ca-type-inter-small-bold;
-  margin: 0;
-}
-
-.notification {
-  @include ca-type-inter-notification;
-  margin: 0;
-}
-
-.label {
-  @include ca-type-inter-label;
-  margin: 0;
-}
-
-.control-action {
-  @include ca-type-inter-control-action;
-  margin: 0;
-}
-
-.button {
-  @include ca-type-inter-button;
-  margin: 0;
-}
-
-// We double the class selector to increase specificity above rules like `h1.default-style`
-.inheritBaseline.inheritBaseline {
-  @include ca-inherit-baseline;
-}
-
-// Required for aligning text alongside other elements e.g. Button
-.inline.inline {
-  display: inline-flex;
-  margin-bottom: 0;
-}
-
-// Alias classes for Elm CSS modules
-.defaultStyle {
-  composes: default-style;
-}
-.pageTitle {
-  composes: page-title;
-}
-.bodyBold {
-  composes: body-bold;
-}
-.smallBold {
-  composes: small-bold;
-}
-.controlAction {
-  composes: control-action;
-}
-
-.zen-display-0 {
-  @include kz-typography-display-0;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-heading-1 {
-  @include kz-typography-heading-1;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-heading-2 {
-  @include kz-typography-heading-2;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-heading-3 {
-  @include kz-typography-heading-3;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-data-large {
-  @include kz-typography-data-large;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-data-large-units {
-  @include kz-typography-data-large-units;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-data-medium {
-  @include kz-typography-data-medium;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-data-medium-units {
-  @include kz-typography-data-medium-units;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-data-small {
-  @include kz-typography-data-small;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}
-
-.zen-data-small-units {
-  @include kz-typography-data-small-units;
-  margin-bottom: $ca-grid;
-  margin-top: 0;
-}

package/dist/iife/TileGrid.module-NJQFVYRS.scss

@@ -1,23 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/component-library/styles/responsive";
-@import "./variables";
-
-.grid {
-  display: grid;
-  // the more we shave off the width here,
-  // the less the tiles will grow when they lose one from the row
-  grid-template-columns: repeat(auto-fill, minmax($tileWidth - 40px, 1fr));
-  grid-gap: $spacing-md;
-
-  @include ca-media-mobile {
-    grid-template-columns: repeat(2, minmax(226px, $tileHeight));
-
-    > * {
-      width: 100%;
-    }
-  }
-
-  @media (max-width: 480px) {
-    grid-template-columns: repeat(1, 100%);
-  }
-}

package/dist/iife/TimeField.module-B4WNYAUE.scss

@@ -1,75 +0,0 @@
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-$input-height: 48px;
-
-// Classnames to simulate pseudo states in storybook
-$story-className--timefield-hover: ":global(.story__timefield-hover)";
-$story-className--timefield-focus: ":global(.story__timefield-focus)";
-
-.wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  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;
-  color: $color-purple-800;
-}
-
-.input {
-  display: inline-flex;
-  align-items: center;
-  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;
-  font-size: $typography-paragraph-body-font-size;
-  line-height: $typography-paragraph-body-line-height;
-  padding: 0 $spacing-sm;
-  height: $input-height;
-  width: 100%;
-  box-sizing: border-box;
-
-  &:hover,
-  #{$story-className--timefield-hover} &,
-  &:focus-within,
-  #{$story-className--timefield-focus} & {
-    border-color: $color-gray-600;
-    background-color: $color-gray-200;
-  }
-}
-
-.input:focus-within,
-#{$story-className--timefield-focus} .input {
-  .focusRing {
-    $focus-ring-offset: 3px;
-    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: -$focus-ring-offset;
-    left: -$focus-ring-offset;
-    right: -$focus-ring-offset;
-    bottom: -$focus-ring-offset;
-    pointer-events: none;
-  }
-}
-
-.isDisabled {
-  pointer-events: none;
-  background-color: transparent;
-  border-color: $color-gray-500;
-  opacity: 0.3;
-}
-
-.error {
-  border: $border-solid-border-width $border-solid-border-style $color-red-500;
-}