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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.4.22-canary.0+95edeaebc",
+  "version": "1.4.22-canary.3+67c597aa1",
   "description": "Kaizen component library",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -28,49 +28,49 @@
   },
   "homepage": "https://github.com/cultureamp/kaizen-design-system#readme",
   "dependencies": {
-    "@kaizen/a11y": "^1.7.0",
+    "@kaizen/a11y": "^1.7.1-canary.3+67c597aa1",
     "@kaizen/brand": "^1.5.4",
-    "@kaizen/brand-moment": "^1.12.65",
-    "@kaizen/button": "^2.0.21",
+    "@kaizen/brand-moment": "^1.12.66-canary.3+67c597aa1",
+    "@kaizen/button": "^2.0.22-canary.3+67c597aa1",
     "@kaizen/component-base": "^1.1.3",
-    "@kaizen/component-library": "^16.4.0",
-    "@kaizen/date-picker": "^5.19.2",
+    "@kaizen/component-library": "^16.4.1-canary.3+67c597aa1",
+    "@kaizen/date-picker": "^5.19.3-canary.3+67c597aa1",
     "@kaizen/design-tokens": "^10.3.1",
-    "@kaizen/draft-avatar": "^2.8.27",
+    "@kaizen/draft-avatar": "^2.8.28-canary.3+67c597aa1",
     "@kaizen/draft-badge": "^1.13.6",
     "@kaizen/draft-card": "^3.2.6",
-    "@kaizen/draft-collapsible": "^3.5.20",
+    "@kaizen/draft-collapsible": "^3.5.21-canary.3+67c597aa1",
     "@kaizen/draft-divider": "^2.2.6",
-    "@kaizen/draft-empty-state": "^5.3.27",
-    "@kaizen/draft-filter-menu-button": "^2.6.33",
-    "@kaizen/draft-form": "^10.3.1",
-    "@kaizen/draft-guidance-block": "^6.1.16",
+    "@kaizen/draft-empty-state": "^5.3.28-canary.3+67c597aa1",
+    "@kaizen/draft-filter-menu-button": "^2.6.34-canary.3+67c597aa1",
+    "@kaizen/draft-form": "^10.3.2-canary.3+67c597aa1",
+    "@kaizen/draft-guidance-block": "^6.1.17-canary.3+67c597aa1",
     "@kaizen/draft-hero-card": "^2.2.15",
-    "@kaizen/draft-illustration": "^6.0.18",
-    "@kaizen/draft-likert-scale-legacy": "^1.10.41",
-    "@kaizen/draft-menu": "^4.8.32",
-    "@kaizen/draft-modal": "^10.6.2",
+    "@kaizen/draft-illustration": "^6.0.19-canary.3+67c597aa1",
+    "@kaizen/draft-likert-scale-legacy": "^1.10.42-canary.3+67c597aa1",
+    "@kaizen/draft-menu": "^4.8.33-canary.3+67c597aa1",
+    "@kaizen/draft-modal": "^10.6.3-canary.3+67c597aa1",
     "@kaizen/draft-page-layout": "^2.3.7",
-    "@kaizen/draft-popover": "^5.3.1",
-    "@kaizen/draft-select": "^2.10.22",
-    "@kaizen/draft-table": "^5.6.17",
-    "@kaizen/draft-tabs": "^5.2.27",
-    "@kaizen/draft-tag": "^3.4.1",
-    "@kaizen/draft-tile": "^5.9.27",
-    "@kaizen/draft-title-block-zen": "^7.9.7",
-    "@kaizen/draft-tooltip": "^5.4.29",
+    "@kaizen/draft-popover": "^5.3.2-canary.3+67c597aa1",
+    "@kaizen/draft-select": "^2.10.23-canary.3+67c597aa1",
+    "@kaizen/draft-table": "^5.6.18-canary.3+67c597aa1",
+    "@kaizen/draft-tabs": "^5.2.28-canary.3+67c597aa1",
+    "@kaizen/draft-tag": "^3.4.2-canary.3+67c597aa1",
+    "@kaizen/draft-tile": "^5.9.28-canary.3+67c597aa1",
+    "@kaizen/draft-title-block-zen": "^7.9.8-canary.3+67c597aa1",
+    "@kaizen/draft-tooltip": "^5.4.30-canary.3+67c597aa1",
     "@kaizen/draft-well": "^4.3.3",
     "@kaizen/hosted-assets": "^2.0.1",
     "@kaizen/loading-skeleton": "^2.0.2",
     "@kaizen/loading-spinner": "^2.3.6",
-    "@kaizen/notification": "^1.4.1",
-    "@kaizen/pagination": "^1.6.27",
-    "@kaizen/progress-bar": "^2.3.20",
+    "@kaizen/notification": "^1.4.2-canary.3+67c597aa1",
+    "@kaizen/pagination": "^1.6.28-canary.3+67c597aa1",
+    "@kaizen/progress-bar": "^2.3.21-canary.3+67c597aa1",
     "@kaizen/responsive": "^1.8.5",
-    "@kaizen/rich-text-editor": "^1.19.31",
-    "@kaizen/select": "^6.13.8",
-    "@kaizen/split-button": "^1.3.34",
-    "@kaizen/tabs": "^1.5.31",
+    "@kaizen/rich-text-editor": "^1.19.32-canary.3+67c597aa1",
+    "@kaizen/select": "^6.13.9-canary.3+67c597aa1",
+    "@kaizen/split-button": "^1.3.35-canary.3+67c597aa1",
+    "@kaizen/tabs": "^1.5.32-canary.3+67c597aa1",
     "@kaizen/tailwind": "^0.5.1",
     "@kaizen/typography": "^2.3.6",
     "classnames": "^2.3.2"
@@ -85,5 +85,5 @@
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "95edeaebc7e483222b1dc1cc52ab2e04723e2abe"
+  "gitHead": "67c597aa16007790e6a1cb1a04fc0c800fcdae4b"
 }

package/dist/iife/Badge.module-5JDAQSAV.scss

@@ -1,106 +0,0 @@
-@import "~@kaizen/design-tokens/sass/animation";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "./variables";
-
-$small: $spacing-md;
-
-.badge {
-  border-radius: $spacing-sm;
-  color: $color-purple-800;
-  display: inline-block;
-  position: relative;
-  font-family: $typography-paragraph-extra-small-font-family;
-  font-size: $typography-paragraph-extra-small-font-size;
-  font-weight: $typography-paragraph-bold-font-weight;
-  letter-spacing: $typography-paragraph-extra-small-letter-spacing;
-  line-height: $typography-paragraph-extra-small-line-height;
-  padding: 1px $spacing-xs;
-  min-width: 8px;
-  text-align: center;
-}
-
-.badge.large {
-  display: inline-flex;
-  justify-content: center;
-  border-radius: $spacing-xl;
-  font-size: $typography-data-medium-font-size;
-  line-height: $typography-data-medium-line-height;
-  letter-spacing: $typography-data-medium-letter-spacing;
-  padding: 2px 1.875rem;
-  width: 24px;
-}
-
-.default {
-  background-color: $dt-color-background-default;
-  color: $color-purple-800;
-}
-
-.active {
-  background-color: $color-blue-500;
-  color: $color-white;
-}
-
-.reversed.active {
-  background-color: $color-green-300;
-  color: $color-purple-800;
-}
-
-.dark {
-  background-color: rgba($color-purple-700-rgb, 0.1);
-  color: $color-purple-800;
-}
-
-.dot {
-  background-color: $color-green-300;
-  padding: $spacing-xs;
-  min-width: unset;
-}
-.dot.large {
-  background-color: $color-green-300;
-  padding: 1.875rem;
-  width: unset;
-}
-
-.reversed.dot {
-  background-color: $color-green-300;
-}
-
-.reversed.dark {
-  background-color: $color-purple-700;
-  color: $color-white;
-}
-
-.reversed {
-  background-color: rgba($color-white-rgb, 0.1);
-  color: $color-white;
-}
-
-$badge-duration-timing: ($animation-duration-slow / 2)
-  $animation-easing-function-ease-in;
-
-$badge-transition: transform $badge-duration-timing,
-  background-color $badge-duration-timing;
-
-.animation {
-  display: inherit;
-  .badge {
-    transition: $badge-transition;
-    transform-origin: center;
-    transform: scale3d(1, 1, 1);
-  }
-  &.animationOn .badge {
-    transform: scale3d(1.35, 1.35, 1.35);
-    &.dark {
-      background-color: rgba($color-purple-700-rgb, 0.2);
-    }
-    &.active {
-      background-color: $color-blue-500;
-      color: $color-white;
-    }
-    &.dot {
-      background-color: $color-green-300;
-    }
-  }
-}

package/dist/iife/Checkbox.module-L2DRIMTV.scss

@@ -1,155 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/component-library/styles/mixins/forms";
-@import "../../variables";
-
-$checkbox-size: 24px;
-$icon-size: 24px;
-$focus-ring-offset: 2px;
-
-$dt-color-checkbox-background-color-checked: $color-gray-500;
-
-// override bootstrap styles
-.checkbox.checkbox {
-  @include form-input-visually-hidden();
-  width: $checkbox-size;
-  height: $checkbox-size;
-  margin: 0;
-}
-
-.icon {
-  height: $checkbox-size;
-  width: $checkbox-size;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  // .icon is inside .box so .box's border-box rule means
-  // .icon sits to the right of .box's left-side border
-  left: calc(-1 * #{$border-solid-border-width});
-  color: $color-white;
-}
-
-.icon.reversed {
-  color: $dt-color-form-color-icon-reversed;
-}
-
-.box {
-  display: block;
-  position: relative;
-  pointer-events: none;
-  background: $color-white;
-  height: $checkbox-size;
-  width: $checkbox-size;
-  top: 0;
-  border: $border-solid-border-width $border-solid-border-style
-    $dt-color-form-border-color;
-  border-radius: $border-solid-border-radius;
-  box-sizing: border-box;
-  background-color: white;
-  border-color: $dt-color-form-border-color;
-
-  .checkbox:checked + &,
-  .checkbox:indeterminate + & {
-    background: $dt-color-checkbox-background-color-checked;
-    background-color: $dt-color-form-border-color;
-  }
-
-  .checkbox:focus + & {
-    background: white;
-    border-color: $dt-color-form-border-color-hover;
-  }
-
-  .checkbox:checked:focus + &,
-  .checkbox:indeterminate:focus + & {
-    background: $dt-color-form-border-color-hover;
-    border-color: $dt-color-form-border-color-hover;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .checkbox:checked:not([disabled]):hover + &,
-    .checkbox:indeterminate:not([disabled]):hover + & {
-      background: $dt-color-form-border-color-hover;
-      border-color: $dt-color-form-border-color-hover;
-    }
-
-    .checkbox:not([disabled]):hover + & {
-      border-color: $dt-color-form-border-color-hover;
-    }
-  }
-
-  .checkbox:focus + &::after {
-    content: "";
-    box-sizing: border-box;
-    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: $dt-color-form-border-color-focus;
-    top: -$focus-ring-offset - ($checkbox-size / 8);
-    left: -$focus-ring-offset - ($checkbox-size / 8);
-    width: calc(
-      #{$checkbox-size} + #{$focus-ring-offset} + #{$border-solid-border-width} *
-        2
-    );
-    height: calc(
-      #{$checkbox-size} + #{$focus-ring-offset} + #{$border-solid-border-width} *
-        2
-    );
-  }
-}
-
-.box.reversed {
-  border: $border-solid-border-width $border-solid-border-style
-    rgba($color-white-rgb, 0.65);
-  background: transparent;
-
-  .checkbox:not([checked]):focus + & {
-    border-color: $color-white;
-    background: rgba($color-white-rgb, 0.1);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .checkbox:not([checked]):not([disabled]):hover + & {
-      border-color: $color-white;
-      background: rgba($color-white-rgb, 0.1);
-    }
-  }
-
-  .checkbox:checked + &,
-  .checkbox:indeterminate + & {
-    background: rgba($color-white-rgb, 0.65);
-  }
-
-  .checkbox:checked:focus + &,
-  .checkbox:indeterminate:focus + & {
-    background: $color-white;
-    border-color: $color-white;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .checkbox:indeterminate:not([disabled]):hover + &,
-    .checkbox:checked:not([disabled]):hover + & {
-      background: $color-white;
-      border-color: $color-white;
-    }
-  }
-
-  .checkbox:focus + &::after {
-    border-color: $dt-color-form-border-color-reversed-focus;
-  }
-}
-
-.box.error {
-  border-color: $color-red-300;
-
-  .checkbox:not([checked]):focus + & {
-    border-color: $color-red-300;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .checkbox:not([checked]):hover + & {
-      border-color: $color-red-300;
-    }
-  }
-}

package/dist/iife/CheckboxField.module-MS76TDL7.scss

@@ -1,46 +0,0 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "../variables";
-
-// -----------------------------------------------
-// Checkbox Field
-// -----------------------------------------------
-///////////////////////////////////////////////////
-// LAYOUT
-///////////////////////////////////////////////////
-.container {
-  position: relative;
-  margin-bottom: $spacing-xs;
-
-  label {
-    // This is to override bootstrap styles. Remove when appropriate
-    padding-top: 0;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  &.noBottomMargin {
-    margin-bottom: 0;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    label:hover {
-      input:not([disabled]) + div {
-        border-color: $dt-color-form-border-color;
-        background-color: $color-gray-100;
-      }
-    }
-  }
-
-  &.checked,
-  &.mixed {
-    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/CheckboxGroup.module-AHAPICAN.scss

@@ -1,13 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.checkboxGroupLabel {
-  margin-bottom: $spacing-sm;
-}
-.checkboxGroupContainer {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: $spacing-sm;
-  &.noBottomMargin {
-    margin-bottom: 0;
-  }
-}

package/dist/iife/ClearButton.module-KVNHOLVT.scss

@@ -1,79 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "../../mixins";
-
-// Polyfill
-$polyfill--focus-visible: ":global(.js-focus-visible) &:global(.focus-visible)";
-
-// Classnames to simulate pseudo states in storybook
-$story-className--clear-button-hover: ":global(.story__clear-button-hover)";
-
-// Combined pseudo state classes
-$selectors--clear-button-hover: "&:hover, &#{$story-className--clear-button-hover}";
-$selectors--clear-button-focus: "&:focus-visible, #{$polyfill--focus-visible}";
-
-.clearButton {
-  @include button-reset;
-
-  position: relative;
-  display: inline-flex;
-
-  #{$selectors--clear-button-hover} {
-    cursor: pointer;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  #{$selectors--clear-button-focus} {
-    &::after {
-      $focus-ring-offset: -1px;
-
-      content: "";
-      position: absolute;
-      background: transparent;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      border-radius: 50%;
-      top: $focus-ring-offset;
-      left: $focus-ring-offset;
-      right: $focus-ring-offset;
-      bottom: $focus-ring-offset;
-    }
-  }
-}
-
-///////////////////////////////////////////////////
-// THEMES
-///////////////////////////////////////////////////
-
-.default {
-  color: $color-gray-500;
-
-  #{$selectors--clear-button-hover},
-  #{$selectors--clear-button-focus} {
-    color: $color-purple-800;
-  }
-
-  #{$selectors--clear-button-focus} {
-    &::after {
-      border-color: $color-blue-500;
-    }
-  }
-}
-
-.reversed {
-  color: rgba($color-white-rgb, 0.8);
-
-  #{$selectors--clear-button-hover},
-  #{$selectors--clear-button-focus} {
-    color: $color-white;
-  }
-
-  #{$selectors--clear-button-focus} {
-    &::after {
-      border-color: $color-blue-300;
-    }
-  }
-}

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/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/FilterTriggerButton.module-LGSTEFAE.scss

@@ -1,5 +0,0 @@
-@import "~@kaizen/design-tokens/sass/typography";
-
-.hasSelectedValues {
-  font-weight: $typography-button-primary-font-weight;
-}