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

package/dist/styles.css

@@ -0,0 +1,98 @@
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(1 104 179 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(1 104 179 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  
+}
+
+.bg-green-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(143 219 199 / var(--tw-bg-opacity))
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.4.22-canary.1+ba5ad0a0b",
+  "version": "1.4.22-canary.4+ddaa33e53",
   "description": "Kaizen component library",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -30,48 +30,48 @@
   "dependencies": {
     "@kaizen/a11y": "^1.7.1",
     "@kaizen/brand": "^1.5.4",
-    "@kaizen/brand-moment": "^1.12.65",
-    "@kaizen/button": "^2.0.21",
+    "@kaizen/brand-moment": "^1.12.66",
+    "@kaizen/button": "^2.0.22",
     "@kaizen/component-base": "^1.1.3",
     "@kaizen/component-library": "^16.4.1",
-    "@kaizen/date-picker": "^5.19.2",
-    "@kaizen/design-tokens": "^10.3.1",
-    "@kaizen/draft-avatar": "^2.8.27",
+    "@kaizen/date-picker": "^5.19.3",
+    "@kaizen/design-tokens": "^10.3.2-canary.40+ddaa33e53",
+    "@kaizen/draft-avatar": "^2.8.28",
     "@kaizen/draft-badge": "^1.13.6",
     "@kaizen/draft-card": "^3.2.6",
-    "@kaizen/draft-collapsible": "^3.5.20",
+    "@kaizen/draft-collapsible": "^3.5.21",
     "@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",
+    "@kaizen/draft-filter-menu-button": "^2.6.34",
+    "@kaizen/draft-form": "^10.3.2",
+    "@kaizen/draft-guidance-block": "^6.1.17",
     "@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",
+    "@kaizen/draft-likert-scale-legacy": "^1.10.42",
+    "@kaizen/draft-menu": "^4.8.33",
+    "@kaizen/draft-modal": "^10.6.3",
     "@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",
+    "@kaizen/draft-select": "^2.10.23",
+    "@kaizen/draft-table": "^5.6.18",
+    "@kaizen/draft-tabs": "^5.2.28",
+    "@kaizen/draft-tag": "^3.4.2",
+    "@kaizen/draft-tile": "^5.9.28",
+    "@kaizen/draft-title-block-zen": "^7.9.8",
+    "@kaizen/draft-tooltip": "^5.4.30",
     "@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",
+    "@kaizen/pagination": "^1.6.28",
+    "@kaizen/progress-bar": "^2.3.21",
     "@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/tailwind": "^0.5.1",
+    "@kaizen/rich-text-editor": "^1.19.32",
+    "@kaizen/select": "^6.13.9",
+    "@kaizen/split-button": "^1.3.35",
+    "@kaizen/tabs": "^1.5.32",
+    "@kaizen/tailwind": "^0.5.2-canary.40+ddaa33e53",
     "@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": "ba5ad0a0b1a0d4e3b98f2fda2a88e1036d9f4c28"
+  "gitHead": "ddaa33e53006e5debe849ec0411e1ea0ef3ef19a"
 }

package/dist/iife/Dropdown.module-4CIBZTRZ-4CIBZTRZ.scss

@@ -1,100 +0,0 @@
-@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/Layout.module-MZ6JYT46-MZ6JYT46.scss

@@ -1,58 +0,0 @@
-@import "./styles";
-@import "~@kaizen/component-library/styles/utils";
-
-.root {
-  @extend %root;
-}
-
-.navigationBar {
-  @extend %navigation-bar;
-  box-sizing: border-box;
-  top: 0;
-  z-index: $ca-z-index-fixed;
-}
-
-.page {
-  @extend %page;
-  box-sizing: border-box;
-  position: relative;
-}
-
-.header {
-  @extend %header;
-  box-sizing: border-box;
-}
-
-.body {
-  @extend %body;
-  box-sizing: border-box;
-}
-
-.bodyInner {
-  @extend %body-inner;
-}
-
-.sidebar {
-  @extend %sidebar;
-  box-sizing: border-box;
-}
-
-.content {
-  @extend %content;
-  box-sizing: border-box;
-}
-
-.footer {
-  @extend %footer;
-  box-sizing: border-box;
-}
-
-.toasts {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.announcers {
-  @include sr-only();
-}

package/dist/iife/Margin.module-DJURK5K7-DJURK5K7.scss

@@ -1,19 +0,0 @@
-@import "./Base.module.scss";
-
-@each $fraction, $margin in $spacing-list {
-  .m-#{$fraction} {
-    margin: $margin;
-  }
-  .mt-#{$fraction} {
-    margin-top: $margin;
-  }
-  .mr-#{$fraction} {
-    margin-right: $margin;
-  }
-  .mb-#{$fraction} {
-    margin-bottom: $margin;
-  }
-  .ml-#{$fraction} {
-    margin-left: $margin;
-  }
-}

package/dist/iife/Menu.module-N76N74LN-N76N74LN.scss

@@ -1,111 +0,0 @@
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
-@import "~@kaizen/deprecated-component-library-helpers/styles/type";
-@import "~@kaizen/deprecated-component-library-helpers/styles/color";
-@import "../../styles/border";
-@import "../../styles/layers";
-@import "../../styles/animation";
-
-$side-padding: calc(calc(3 / 4) * #{$ca-grid});
-
-.menuList {
-  background: white;
-  border: $border-solid-border-width $border-solid-border-style
-    $color-purple-200;
-  box-shadow: $shadow-small-box-shadow;
-  line-height: 40px;
-}
-
-.header {
-  padding: 10px $side-padding;
-  text-align: left;
-  color: rgba($color-purple-800-rgb, 0.4);
-  border-bottom: $ca-border-color 1px solid;
-}
-
-.header__title {
-  @include kz-typography-heading-6;
-  @include ca-inherit-baseline;
-  display: block;
-}
-
-.menuItem {
-  @include kz-typography-paragraph-body;
-  @include ca-inherit-baseline;
-  composes: interactiveIconWrapper from "../Icon/Icon.module.scss";
-  background: transparent;
-  color: $color-purple-800;
-  cursor: pointer;
-  text-align: left;
-
-  transition: $ca-duration-immediate background-color ease,
-    $ca-duration-immediate color ease;
-
-  padding: 10px $side-padding;
-  text-decoration: none;
-  display: flex;
-  flex: 0 0 100%;
-
-  [dir="rtl"] & {
-    text-align: right;
-  }
-
-  &.menuItem--active,
-  &:hover,
-  &:focus {
-    background: $color-gray-100;
-    color: $color-blue-500;
-    // override Murmur global styles :(
-    text-decoration: none;
-
-    .menuItem__Icon {
-      color: $color-blue-500;
-    }
-  }
-}
-
-.menuItem--active {
-  composes: active from "../Icon/Icon.module.scss";
-}
-
-.menuItem--destructive {
-  color: $color-red-600;
-  .menuItem__Icon {
-    color: $color-red-600;
-  }
-}
-
-.menuItem__Label {
-  flex: 1;
-
-  :not(:only-child) {
-    @include ca-margin($end: calc(#{$ca-grid} / 2));
-  }
-}
-
-.menuItem__Icon {
-  text-align: right;
-  color: $color-purple-800;
-  position: relative;
-  top: 3px;
-
-  .hoverIcon & {
-    opacity: 0;
-  }
-  .menuItem--active &,
-  .hoverIcon:hover &,
-  .hoverIcon:focus & {
-    opacity: 1;
-  }
-}
-
-.separator {
-  height: 1px;
-  width: 100%;
-  border: 0;
-  background: $color-purple-200;
-  visibility: visible;
-  margin: 5px 0;
-}

package/dist/iife/Padding.module-QSNUEZBU-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/Text.module-SXGFOHGJ-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;
-}