@kaizen/components 1.4.21 → 1.4.22-canary.1

package/dist/index.d.ts

@@ -3,47 +3,7 @@ export { T as ThemeContext, a as ThemeProvider, u as useTheme } from './ThemePro
 export { ThemeManager } from './KaizenProvider/ThemeProvider/ThemeManager.js';
 export { defaultTheme } from './KaizenProvider/ThemeProvider/themes/index.js';
 export * from '@kaizen/a11y';
-export * from '@kaizen/brand';
-export * from '@kaizen/brand-moment';
-export * from '@kaizen/button';
-export * from '@kaizen/component-base';
-export { Box, Icon, 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';
-export { makeCSSVariableTheme, makeCssVariableDefinitionsMap, mapLeafsOfObject } from '@kaizen/design-tokens';
-export { AsyncSelect, Select, ValueType as SelectValueType } from '@kaizen/draft-select';
 export { default as heartTheme } from './KaizenProvider/ThemeProvider/themes/heart.js';
 export { CSSVariableTheme, DeepMapObjectLeafs, Theme, ThemeKey, TypographyFont } from './KaizenProvider/ThemeProvider/themes/types.js';
 import 'react';
+import '@kaizen/design-tokens';

package/dist/index.js

@@ -19,65 +19,12 @@ var _chunk7T4E5A7Mjs = require('./chunk-7T4E5A7M.js');
 
 // src/index.ts
 var _a11y = require('@kaizen/a11y'); _createStarExport(_a11y);
-var _brand = require('@kaizen/brand'); _createStarExport(_brand);
-var _brandmoment = require('@kaizen/brand-moment'); _createStarExport(_brandmoment);
-var _button = require('@kaizen/button'); _createStarExport(_button);
-var _componentbase = require('@kaizen/component-base'); _createStarExport(_componentbase);
-var _componentlibrary = require('@kaizen/component-library');
-var _datepicker = require('@kaizen/date-picker'); _createStarExport(_datepicker);
-var _draftavatar = require('@kaizen/draft-avatar'); _createStarExport(_draftavatar);
-var _draftbadge = require('@kaizen/draft-badge'); _createStarExport(_draftbadge);
-var _draftcard = require('@kaizen/draft-card'); _createStarExport(_draftcard);
-var _draftcollapsible = require('@kaizen/draft-collapsible'); _createStarExport(_draftcollapsible);
-var _draftdivider = require('@kaizen/draft-divider'); _createStarExport(_draftdivider);
-var _draftemptystate = require('@kaizen/draft-empty-state'); _createStarExport(_draftemptystate);
-var _draftfiltermenubutton = require('@kaizen/draft-filter-menu-button'); _createStarExport(_draftfiltermenubutton);
-var _draftform = require('@kaizen/draft-form'); _createStarExport(_draftform);
-var _draftguidanceblock = require('@kaizen/draft-guidance-block'); _createStarExport(_draftguidanceblock);
-var _draftherocard = require('@kaizen/draft-hero-card'); _createStarExport(_draftherocard);
-var _draftillustration = require('@kaizen/draft-illustration'); _createStarExport(_draftillustration);
-var _draftlikertscalelegacy = require('@kaizen/draft-likert-scale-legacy'); _createStarExport(_draftlikertscalelegacy);
-var _draftmenu = require('@kaizen/draft-menu'); _createStarExport(_draftmenu);
-var _draftmodal = require('@kaizen/draft-modal'); _createStarExport(_draftmodal);
-var _draftpagelayout = require('@kaizen/draft-page-layout'); _createStarExport(_draftpagelayout);
-var _draftpopover = require('@kaizen/draft-popover'); _createStarExport(_draftpopover);
-var _drafttable = require('@kaizen/draft-table'); _createStarExport(_drafttable);
-var _drafttabs = require('@kaizen/draft-tabs'); _createStarExport(_drafttabs);
-var _drafttag = require('@kaizen/draft-tag'); _createStarExport(_drafttag);
-var _drafttile = require('@kaizen/draft-tile'); _createStarExport(_drafttile);
-var _drafttitleblockzen = require('@kaizen/draft-title-block-zen'); _createStarExport(_drafttitleblockzen);
-var _drafttooltip = require('@kaizen/draft-tooltip'); _createStarExport(_drafttooltip);
-var _draftwell = require('@kaizen/draft-well'); _createStarExport(_draftwell);
-var _hostedassets = require('@kaizen/hosted-assets'); _createStarExport(_hostedassets);
-var _loadingskeleton = require('@kaizen/loading-skeleton'); _createStarExport(_loadingskeleton);
-var _loadingspinner = require('@kaizen/loading-spinner'); _createStarExport(_loadingspinner);
-var _notification = require('@kaizen/notification'); _createStarExport(_notification);
-var _pagination = require('@kaizen/pagination'); _createStarExport(_pagination);
-var _progressbar = require('@kaizen/progress-bar'); _createStarExport(_progressbar);
-var _responsive = require('@kaizen/responsive'); _createStarExport(_responsive);
-var _richtexteditor = require('@kaizen/rich-text-editor'); _createStarExport(_richtexteditor);
-var _splitbutton = require('@kaizen/split-button'); _createStarExport(_splitbutton);
-var _typography = require('@kaizen/typography'); _createStarExport(_typography);
 
 
 
 
-var _designtokens = require('@kaizen/design-tokens');
-var _draftselect = require('@kaizen/draft-select');
 
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-exports.AsyncSelect = _draftselect.AsyncSelect; exports.Box = _componentlibrary.Box; exports.Icon = _componentlibrary.Icon; exports.KaizenProvider = _chunk7ZAJ7755js.KaizenProvider; exports.Select = _draftselect.Select; exports.Spacing = _componentlibrary.Spacing; exports.ThemeContext = _chunkMXW3YHBEjs.ThemeContext; exports.ThemeManager = _chunkJ42JQYBYjs.ThemeManager; exports.ThemeProvider = _chunkMXW3YHBEjs.ThemeProvider; exports.defaultTheme = _chunkWDAFEOSVjs.defaultTheme; exports.heartTheme = _chunk7T4E5A7Mjs.heartTheme; exports.makeCSSVariableTheme = _designtokens.makeCSSVariableTheme; exports.makeCssVariableDefinitionsMap = _designtokens.makeCssVariableDefinitionsMap; exports.mapLeafsOfObject = _designtokens.mapLeafsOfObject; exports.useTheme = _chunkMXW3YHBEjs.useTheme;
+exports.KaizenProvider = _chunk7ZAJ7755js.KaizenProvider; exports.ThemeContext = _chunkMXW3YHBEjs.ThemeContext; exports.ThemeManager = _chunkJ42JQYBYjs.ThemeManager; exports.ThemeProvider = _chunkMXW3YHBEjs.ThemeProvider; exports.defaultTheme = _chunkWDAFEOSVjs.defaultTheme; exports.heartTheme = _chunk7T4E5A7Mjs.heartTheme; exports.useTheme = _chunkMXW3YHBEjs.useTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.4.21",
+  "version": "1.4.22-canary.1+ba5ad0a0b",
   "description": "Kaizen component library",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -28,12 +28,12 @@
   },
   "homepage": "https://github.com/cultureamp/kaizen-design-system#readme",
   "dependencies": {
-    "@kaizen/a11y": "^1.7.0",
+    "@kaizen/a11y": "^1.7.1",
     "@kaizen/brand": "^1.5.4",
     "@kaizen/brand-moment": "^1.12.65",
     "@kaizen/button": "^2.0.21",
     "@kaizen/component-base": "^1.1.3",
-    "@kaizen/component-library": "^16.4.0",
+    "@kaizen/component-library": "^16.4.1",
     "@kaizen/date-picker": "^5.19.2",
     "@kaizen/design-tokens": "^10.3.1",
     "@kaizen/draft-avatar": "^2.8.27",
@@ -85,5 +85,5 @@
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "3608d91981bf870c2b3bd1d3f98260c83acf59aa"
+  "gitHead": "ba5ad0a0b1a0d4e3b98f2fda2a88e1036d9f4c28"
 }

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

@@ -1,10 +0,0 @@
-@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

@@ -1,165 +0,0 @@
-@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

@@ -1,85 +0,0 @@
-@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/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/Base.module-DJPJNUQ5.scss

@@ -1,80 +0,0 @@
-.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

@@ -1,103 +0,0 @@
-@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

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