@kaizen/components 1.4.20-canary.3469 → 1.4.21

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.21](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.20...@kaizen/components@1.4.21) (2023-03-02)
+
+**Note:** Version bump only for package @kaizen/components
+
+
+
+
+
+## [1.4.20](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.19...@kaizen/components@1.4.20) (2023-03-01)
+
+**Note:** Version bump only for package @kaizen/components
+
+
+
+
+
 ## [1.4.19](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.18...@kaizen/components@1.4.19) (2023-02-28)
 
 **Note:** Version bump only for package @kaizen/components

package/dist/esm/index.js

@@ -19,12 +19,65 @@ import {
 
 // src/index.ts
 export * from "@kaizen/a11y";
+export * from "@kaizen/brand";
+export * from "@kaizen/brand-moment";
+export * from "@kaizen/button";
+export * from "@kaizen/component-base";
+import { Icon, Box, Spacing } from "@kaizen/component-library";
+export * from "@kaizen/date-picker";
+export * from "@kaizen/draft-avatar";
+export * from "@kaizen/draft-badge";
+export * from "@kaizen/draft-card";
+export * from "@kaizen/draft-collapsible";
+export * from "@kaizen/draft-divider";
+export * from "@kaizen/draft-empty-state";
+export * from "@kaizen/draft-filter-menu-button";
+export * from "@kaizen/draft-form";
+export * from "@kaizen/draft-guidance-block";
+export * from "@kaizen/draft-hero-card";
+export * from "@kaizen/draft-illustration";
+export * from "@kaizen/draft-likert-scale-legacy";
+export * from "@kaizen/draft-menu";
+export * from "@kaizen/draft-modal";
+export * from "@kaizen/draft-page-layout";
+export * from "@kaizen/draft-popover";
+export * from "@kaizen/draft-table";
+export * from "@kaizen/draft-tabs";
+export * from "@kaizen/draft-tag";
+export * from "@kaizen/draft-tile";
+export * from "@kaizen/draft-title-block-zen";
+export * from "@kaizen/draft-tooltip";
+export * from "@kaizen/draft-well";
+export * from "@kaizen/hosted-assets";
+export * from "@kaizen/loading-skeleton";
+export * from "@kaizen/loading-spinner";
+export * from "@kaizen/notification";
+export * from "@kaizen/pagination";
+export * from "@kaizen/progress-bar";
+export * from "@kaizen/responsive";
+export * from "@kaizen/rich-text-editor";
+export * from "@kaizen/split-button";
+export * from "@kaizen/typography";
+import {
+  makeCssVariableDefinitionsMap,
+  makeCSSVariableTheme,
+  mapLeafsOfObject
+} from "@kaizen/design-tokens";
+import { Select, AsyncSelect } from "@kaizen/draft-select";
 export {
+  AsyncSelect,
+  Box,
+  Icon,
   KaizenProvider,
+  Select,
+  Spacing,
   ThemeContext,
   ThemeManager,
   ThemeProvider,
   defaultTheme,
   heartTheme,
+  makeCSSVariableTheme,
+  makeCssVariableDefinitionsMap,
+  mapLeafsOfObject,
   useTheme
 };

package/dist/iife/ActionButton.module-LHTIA2D3.scss

@@ -0,0 +1,10 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "../variables";
+
+.actionButton {
+  border-radius: $border-solid-border-radius 0 0 $border-solid-border-radius;
+
+  [dir="rtl"] & {
+    border-radius: 0 $border-solid-border-radius $border-solid-border-radius 0;
+  }
+}

package/dist/iife/Avatar.module-GUG7HXMZ.scss

@@ -0,0 +1,165 @@
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+
+$avatar-sm: 1.25rem;
+$avatar-md: 3rem;
+$avatar-lg: 4.5rem;
+$avatar-xl: 6rem;
+$avatar-xxl: 7.75rem;
+
+.wrapper {
+  background: $color-gray-300;
+  border-radius: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+
+  &:not(.small) {
+    box-shadow: $shadow-small-box-shadow;
+    border: 3px solid $color-white;
+  }
+
+  // Themes
+  &.personal {
+    background: $color-orange-100;
+  }
+
+  &.otherUser {
+    background: $color-gray-300;
+  }
+
+  &.company {
+    border: 0px;
+    background: $color-white;
+    padding: 6px;
+    border-radius: $border-solid-border-radius;
+  }
+
+  // Sizes
+
+  &.small {
+    width: $avatar-sm;
+    height: $avatar-sm;
+
+    .initials {
+      margin-bottom: -1px;
+    }
+
+    &.company {
+      padding: 0;
+    }
+  }
+
+  &.medium {
+    width: $avatar-md;
+    height: $avatar-md;
+
+    .initials {
+      margin-bottom: -1px;
+    }
+  }
+
+  &.large {
+    width: $avatar-lg;
+    height: $avatar-lg;
+  }
+
+  &.xlarge {
+    width: $avatar-xl;
+    height: $avatar-xl;
+  }
+
+  &.xxlarge {
+    width: $avatar-xxl;
+    height: $avatar-xxl;
+  }
+
+  & .initials {
+    text-decoration: none;
+    speak-as: spell-out;
+
+    // to override materialize.css global styling in performance-ui,
+    // which sets a border-bottom on abbr tags
+    border-bottom: none;
+  }
+}
+
+.avatarImage {
+  .loading & {
+    display: none;
+  }
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.companyAvatarImage {
+  object-fit: contain;
+  box-sizing: border-box;
+  border-radius: 4px;
+}
+
+.fallbackIcon {
+  color: rgba($color-purple-800-rgb, 0.7);
+  width: 28px;
+
+  .xxlarge & {
+    width: 75px;
+  }
+  .xlarge & {
+    width: 60px;
+  }
+  .large & {
+    width: 35px;
+  }
+  .medium & {
+    width: 25px;
+    margin-bottom: -1px;
+  }
+  .small & {
+    width: 10px;
+    margin-bottom: -1px;
+  }
+}
+
+.initials {
+  box-sizing: border-box;
+  color: $color-purple-800;
+  padding-left: 5px;
+  padding-right: 5px;
+  text-align: center;
+  width: 100%;
+  font-size: 22px;
+  font-family: $typography-heading-1-font-family;
+  font-weight: $typography-heading-1-font-weight;
+  letter-spacing: $typography-heading-3-letter-spacing;
+
+  // Whitespace cropping
+  &:not(.longName)::before {
+    content: "";
+    display: block;
+    margin-top: -0.001em;
+  }
+
+  .xlarge &,
+  .xxlarge & {
+    font-size: 34px;
+    letter-spacing: $typography-heading-1-letter-spacing;
+  }
+
+  .medium & {
+    font-size: 16px;
+    font-weight: $typography-heading-5-font-weight;
+    letter-spacing: $typography-heading-5-letter-spacing;
+  }
+
+  .small & {
+    font-size: 8px;
+    font-weight: $typography-heading-5-font-weight;
+    letter-spacing: $typography-heading-5-letter-spacing;
+  }
+}

package/dist/iife/AvatarGroup.module-QAVTI4PR.scss

@@ -0,0 +1,85 @@
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/color";
+
+// Vars
+$avatar-sm: 1.25rem;
+$avatar-md: 3rem;
+$avatar-lg: 4.5rem;
+
+@mixin overlap($size) {
+  margin-inline-start: calc(#{$size} / -2);
+
+  [dir="rtl"] & {
+    margin-left: 0;
+  }
+}
+
+.AvatarGroup {
+  display: inline-flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.AvatarGroupItem {
+  + .AvatarGroupItem {
+    .small & {
+      @include overlap($avatar-sm);
+    }
+
+    .medium & {
+      @include overlap($avatar-md);
+    }
+
+    .large & {
+      @include overlap($avatar-lg);
+    }
+  }
+}
+
+.AvatarCounter {
+  align-items: center;
+  background: $color-gray-300;
+  border: 3px solid $color-white;
+  border-radius: 100%;
+  box-sizing: border-box;
+  box-shadow: $shadow-small-box-shadow;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+
+  .small & {
+    box-shadow: none;
+    border: none;
+    width: $avatar-sm;
+    height: $avatar-sm;
+    font-family: $typography-heading-5-font-family;
+    font-size: 0.5rem;
+    font-weight: $typography-heading-5-font-weight;
+    letter-spacing: $typography-heading-5-letter-spacing;
+  }
+
+  .medium & {
+    width: $avatar-md;
+    height: $avatar-md;
+    font-family: $typography-heading-5-font-family;
+    font-size: $typography-heading-5-font-size;
+    font-weight: $typography-heading-5-font-weight;
+    letter-spacing: $typography-heading-5-letter-spacing;
+  }
+
+  .large & {
+    width: $avatar-lg;
+    height: $avatar-lg;
+    font-family: $typography-heading-3-font-family;
+    font-size: $typography-heading-3-font-size;
+    font-weight: $typography-heading-3-font-weight;
+    letter-spacing: $typography-heading-3-letter-spacing;
+  }
+
+  [dir="rtl"] & {
+    margin-left: 0;
+    direction: ltr;
+  }
+}

package/dist/iife/Base.module-DJPJNUQ5.scss

@@ -0,0 +1,80 @@
+.wrapper {
+  width: 100%;
+  margin: 0;
+}
+
+.aspectRatioWrapper {
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+
+.landscape {
+  aspect-ratio: 4/3;
+
+  @supports not (aspect-ratio: auto) {
+    &::before {
+      float: left;
+      padding-top: 75%;
+      content: "";
+    }
+
+    &::after {
+      display: block;
+      content: "";
+      clear: both;
+    }
+  }
+}
+
+.portrait {
+  aspect-ratio: 3/4;
+
+  @supports not (aspect-ratio: auto) {
+    &::before {
+      float: left;
+      padding-top: 133.33%;
+      content: "";
+    }
+
+    &::after {
+      display: block;
+      content: "";
+      clear: both;
+    }
+  }
+}
+
+.square {
+  aspect-ratio: auto 1/1;
+
+  @supports not (aspect-ratio: auto) {
+    &::before {
+      float: left;
+      padding-top: 100%;
+      content: "";
+    }
+
+    &::after {
+      display: block;
+      content: "";
+      clear: both;
+    }
+  }
+}
+
+// If the .visually-hidden class is applied to natively focusable elements
+// (such as a, button, input, etc) they must become visible when they receive
+// keyboard focus. Otherwise, a sighted keyboard user would have to try and
+// figure out where their visible focus indicator had gone to.
+.visuallyHidden:not(:focus):not(:active) {
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+}

package/dist/iife/BaseButton.module-4FKZZLVI.scss

@@ -0,0 +1,103 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "../variables";
+
+.baseButton {
+  border-width: $border-solid-border-width;
+  border-style: $border-solid-border-style;
+  padding: calc(#{$spacing-sm} - #{$border-borderless-border-width})
+    calc(#{$spacing-md} - #{$border-borderless-border-width});
+
+  font-family: $typography-button-primary-font-family;
+  font-weight: $typography-button-primary-font-weight;
+  letter-spacing: $typography-button-primary-letter-spacing;
+  font-size: $typography-button-primary-font-size;
+  line-height: $typography-button-primary-line-height;
+  text-decoration: unset;
+  cursor: default;
+  white-space: nowrap;
+
+  &:not(:disabled) {
+    &:hover,
+    &#{$story-className--hover},
+    &:active,
+    &#{$story-className--active} {
+      z-index: 2;
+      text-decoration: unset; // override Murmur global styles :(
+    }
+
+    &:active,
+    &#{$story-className--active} {
+      transform: translateY(1px);
+    }
+
+    &:focus-visible,
+    &#{$polyfill--focus-visible},
+    &#{$story-className__focus} {
+      z-index: 3;
+      outline-width: $border-solid-border-width;
+      outline-style: $border-solid-border-style;
+      outline-offset: 1px;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.3;
+  }
+}
+
+.themeDefault {
+  $default-text-color: $color-purple-800;
+  background-color: $color-white;
+  border-color: $color-gray-500;
+  color: $default-text-color;
+
+  &:not(:disabled) {
+    &:hover,
+    &#{$story-className--hover},
+    &:active,
+    &#{$story-className--active},
+    &:focus-visible,
+    &#{$polyfill--focus-visible},
+    &#{$story-className__focus} {
+      background-color: $color-gray-200;
+      border-color: $color-gray-600;
+      color: $default-text-color; // override Murmur global styles :(
+    }
+
+    &:focus-visible,
+    &#{$polyfill--focus-visible},
+    &#{$story-className__focus} {
+      outline-color: $color-blue-500;
+    }
+  }
+}
+
+.themeReversed {
+  $reversed-text-color: $color-white;
+  background-color: transparent;
+  border-color: rgba($color-white-rgb, 0.65);
+  color: $reversed-text-color;
+
+  &:not(:disabled) {
+    &:hover,
+    &#{$story-className--hover},
+    &:active,
+    &#{$story-className--active},
+    &:focus-visible,
+    &#{$polyfill--focus-visible},
+    &#{$story-className__focus} {
+      background-color: rgba($color-white-rgb, 0.1);
+      border-color: $color-white;
+      color: $reversed-text-color; // override Murmur global styles :(
+    }
+
+    &:focus-visible,
+    &#{$polyfill--focus-visible},
+    &#{$story-className__focus} {
+      outline-color: $color-blue-300;
+    }
+  }
+}

package/dist/iife/Brand.module-FCHTLJQK.scss

@@ -0,0 +1,4 @@
+.img {
+  max-inline-size: 100%;
+  display: flex;
+}