@kaizen/components 1.70.9 → 1.70.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.70.9",
+  "version": "1.70.11",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -62,22 +62,22 @@
     "prosemirror-history": "^1.4.1",
     "prosemirror-inputrules": "^1.4.0",
     "prosemirror-keymap": "^1.2.2",
-    "prosemirror-model": "^1.24.0",
+    "prosemirror-model": "^1.24.1",
     "prosemirror-schema-basic": "^1.2.3",
     "prosemirror-schema-list": "^1.5.0",
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.10.2",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.37.0",
+    "prosemirror-view": "^1.37.1",
     "react-animate-height": "^3.2.3",
     "react-aria": "^3.36.0",
     "react-aria-components": "^1.5.0",
     "react-day-picker": "8.10.1",
-    "react-focus-lock": "^2.13.2",
+    "react-focus-lock": "^2.13.5",
     "react-focus-on": "^3.9.4",
     "react-media": "^1.10.0",
     "react-popper": "^2.3.0",
-    "react-select": "^5.8.3",
+    "react-select": "^5.9.0",
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "use-debounce": "^10.0.4",
@@ -87,7 +87,7 @@
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
   },
   "devDependencies": {
-    "@cultureamp/frontend-apis": "^11.1.0",
+    "@cultureamp/frontend-apis": "^12.0.1",
     "@cultureamp/i18n-react-intl": "^2.7.1",
     "@testing-library/dom": "^10.4.0",
     "@types/jest-axe": "^3.5.9",
@@ -104,21 +104,21 @@
     "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
-    "postcss-preset-env": "^10.1.1",
+    "postcss-preset-env": "^10.1.3",
     "postcss-scss": "^4.0.9",
     "query-string": "^9.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-highlight": "^0.15.0",
-    "react-intl": "^7.0.1",
-    "rollup": "^4.28.0",
+    "react-intl": "^7.1.0",
+    "rollup": "^4.30.1",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
     "tsx": "^4.19.2",
-    "@kaizen/design-tokens": "10.8.6",
-    "@kaizen/package-bundler": "2.0.3"
+    "@kaizen/design-tokens": "10.8.7",
+    "@kaizen/package-bundler": "2.0.4"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/Avatar/Avatar.module.css

@@ -0,0 +1,138 @@
+.wrapper {
+  --avatar-x-y: 1.5rem;
+
+  background: var(--color-gray-300);
+  border-radius: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: var(--avatar-x-y);
+  height: var(--avatar-x-y);
+  box-shadow: var(--shadow-small-box-shadow);
+  border: 3px solid var(--color-white);
+}
+
+.small {
+  box-shadow: none;
+  border: none;
+
+  --avatar-x-y: 1.25rem;
+}
+
+.medium {
+  --avatar-x-y: 3rem;
+}
+
+.large {
+  --avatar-x-y: 4.5rem;
+}
+
+.xlarge {
+  --avatar-x-y: 6rem;
+}
+
+.xxlarge {
+  --avatar-x-y: 7.75rem;
+}
+
+/* Themes */
+.personal {
+  background: var(--color-orange-100);
+}
+
+.otherUser {
+  background: var(--color-gray-300);
+}
+
+.company {
+  border: 0;
+  background: var(--color-white);
+  padding: var(--spacing-6);
+  border-radius: var(--border-solid-border-radius);
+}
+
+.small.company {
+  padding: 0;
+}
+
+.avatarImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatarImage.loading {
+  display: none;
+}
+
+.companyAvatarImage {
+  object-fit: contain;
+  box-sizing: border-box;
+  border-radius: var(--spacing-4);
+}
+
+.fallbackIcon {
+  color: rgba(var(--color-purple-800-rgb), 0.7);
+  font-size: calc(var(--avatar-x-y) * 0.7);
+}
+
+.xlarge .fallbackIcon,
+.xxlarge .fallbackIcon {
+  font-size: calc(var(--avatar-x-y) * 0.8);
+}
+
+.initials {
+  box-sizing: border-box;
+  color: var(--color-purple-800);
+  padding-left: 5px;
+  padding-right: 5px;
+  text-align: center;
+  width: 100%;
+  font-size: var(--typography-heading-3-font-size);
+  font-family: var(--typography-heading-1-font-family);
+  font-weight: var(--typography-heading-1-font-weight);
+  letter-spacing: var(--typography-heading-3-letter-spacing);
+}
+
+.initials.longName::before {
+  content: none;
+}
+
+.initials::before {
+  content: '';
+  display: block;
+  margin-top: -0.001em;
+}
+
+.wrapper .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;
+}
+
+.xlarge .initials,
+.xxlarge .initials {
+  font-size: var(--typography-heading-1-font-size);
+  letter-spacing: var(--typography-heading-1-letter-spacing);
+}
+
+.medium .initials {
+  font-size: var(--typography-heading-5-font-size);
+}
+
+.small .initials {
+  font-size: 0.5rem;
+}
+
+.small .initials,
+.medium .initials {
+  margin-bottom: -1px;
+  font-weight: var(--typography-heading-5-font-weight);
+  letter-spacing: var(--typography-heading-5-letter-spacing);
+}

package/src/Avatar/Avatar.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { Textfit } from 'react-textfit'
 import { Icon } from '~components/__rc__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './Avatar.module.scss'
+import styles from './Avatar.module.css'
 
 export type AvatarSizes = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'
 
@@ -153,14 +153,17 @@ export const Avatar = ({
         isCompany && styles.company,
         isPersonal && styles.personal,
         isOtherUser && styles.otherUser,
-        (avatarState === 'loading' || avatarState === 'error') && styles.loading,
       )}
       {...restProps}
     >
       {avatarState !== 'none' && (
         <img
           ref={image}
-          className={classnames(styles.avatarImage, isCompany && styles.companyAvatarImage)}
+          className={classnames(
+            styles.avatarImage,
+            isCompany && styles.companyAvatarImage,
+            (avatarState === 'loading' || avatarState === 'error') && styles.loading,
+          )}
           src={avatarSrc}
           onError={onImageFailure}
           onLoad={onImageSuccess}

package/src/AvatarGroup/AvatarGroup.module.css

@@ -0,0 +1,57 @@
+.AvatarGroup {
+  display: inline-flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.AvatarCounter {
+  direction: ltr;
+  align-items: center;
+  background: var(--color-gray-300);
+  border: 3px solid var(--color-white);
+  border-radius: 100%;
+  box-sizing: border-box;
+  box-shadow: var(--shadow-small-box-shadow);
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  width: var(--avatar-x-y, 1.25rem);
+  height: var(--avatar-x-y, 1.25rem);
+  font-family: var(--typography-heading-5-font-family);
+  font-weight: var(--typography-heading-5-font-weight);
+  letter-spacing: var(--typography-heading-5-letter-spacing);
+}
+
+.AvatarGroupItem + .AvatarGroupItem {
+  margin-inline-start: calc((var(--avatar-x-y)) / -2);
+}
+
+.small {
+  --avatar-x-y: 1.25rem;
+}
+
+.small .AvatarCounter {
+  box-shadow: none;
+  border: none;
+  font-size: 0.5rem;
+}
+
+.medium {
+  --avatar-x-y: 3rem;
+}
+
+.medium .AvatarCounter {
+  font-size: var(--typography-heading-5-font-size);
+}
+
+.large {
+  --avatar-x-y: 4.5rem;
+}
+
+.large .AvatarCounter {
+  font-family: var(--typography-heading-3-font-family);
+  font-size: var(--typography-heading-3-font-size);
+  font-weight: var(--typography-heading-3-font-weight);
+  letter-spacing: var(--typography-heading-3-letter-spacing);
+}

package/src/AvatarGroup/AvatarGroup.tsx

@@ -2,7 +2,7 @@ import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { Avatar, type CompanyAvatarProps, type GenericAvatarProps } from '~components/Avatar'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './AvatarGroup.module.scss'
+import styles from './AvatarGroup.module.css'
 
 export type AvatarGroupAvatarProps =
   | Omit<GenericAvatarProps, 'size'>

package/src/Badge/Badge.module.css

@@ -0,0 +1,97 @@
+.badge {
+  border-radius: var(--spacing-12);
+  color: var(--color-purple-800);
+  display: inline-block;
+  position: relative;
+  font-family: var(--typography-paragraph-extra-small-font-family);
+  font-size: var(--typography-paragraph-extra-small-font-size);
+  font-weight: var(--typography-paragraph-bold-font-weight);
+  letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
+  line-height: var(--typography-paragraph-extra-small-line-height);
+  padding: 1px var(--spacing-6);
+  min-width: 8px;
+  text-align: center;
+  background-color: var(--badge-background-color, var(--color-gray-300));
+}
+
+.reversed {
+  --badge-background-color: rgba(var(--color-white-rgb), 0.1);
+
+  color: var(--color-white);
+}
+
+.reversed.active {
+  --badge-background-color: var(--color-green-300);
+
+  color: var(--color-purple-800);
+}
+
+.reversed.dark {
+  --badge-background-color: var(--color-purple-700);
+
+  color: var(--color-white);
+}
+
+.large {
+  display: inline-flex;
+  justify-content: center;
+  border-radius: var(--spacing-48);
+  font-size: var(--typography-data-medium-font-size);
+  line-height: var(--typography-data-medium-line-height);
+  letter-spacing: var(--typography-data-medium-letter-spacing);
+  padding: 2px 1.875rem;
+  width: 24px;
+}
+
+.active {
+  --badge-background-color: var(--color-blue-500);
+
+  color: var(--color-white);
+}
+
+.dark {
+  --badge-background-color: rgba(var(--color-purple-700-rgb), 0.1);
+
+  color: var(--color-purple-800);
+}
+
+.dot {
+  --badge-background-color: var(--color-green-300);
+
+  padding: var(--spacing-6);
+  min-width: unset;
+}
+
+.dot.large {
+  padding: 1.875rem;
+  width: unset;
+}
+
+.animation {
+  display: inherit;
+}
+
+.animation .badge {
+  --badge-duration-timing: (var(--animation-duration-slow) / 2)
+    var(--animation-easing-function-ease-in);
+
+  transition:
+    transform var(--badge-duration-timing),
+    background-color var(--badge-duration-timing);
+  transform-origin: center;
+  transform: scale3d(1, 1, 1);
+}
+
+.animationOn .badge {
+  transform: scale3d(1.35, 1.35, 1.35);
+}
+
+.animationOn .badge.dark {
+  --badge-background-color: rgba(var(--color-purple-700-rgb), 0.2);
+}
+
+.animationOn .badge.active {
+  --badge-background-color: var(--color-blue-500);
+
+  color: var(--color-white);
+}

package/src/Badge/Badge.tsx

@@ -1,7 +1,7 @@
 import React, { useLayoutEffect, useState, type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './Badge.module.scss'
+import styles from './Badge.module.css'
 
 type BadgeCommonProps = {
   children?: string

package/src/Brand/Brand.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { BrandCollectiveIntelligence } from './BrandCollectiveIntelligence'
-import styles from './Brand.module.scss'
+import styles from './Brand.module.css'
 
 type MeaningfulSVG = { 'role': 'img'; 'aria-label': string; 'alt'?: never }
 type DecorativeSVG = { 'role': 'presentation'; 'aria-label'?: never; 'alt'?: never }

package/src/BrandMoment/{BrandMoment.module.scss → BrandMoment.module.css}

@@ -1,12 +1,3 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/layout';
-
-$breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and replace this out
-
-// --------------------------------
-// Body
-// --------------------------------
 .body {
   width: 100%;
   min-height: 100vh;
@@ -38,67 +29,58 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
   --brand-moment-background-color: var(--color-red-100);
 }
 
-// --------------------------------
-// Reusable container
-// --------------------------------
 .container {
-  max-width: $layout-content-max-width;
+  max-width: var(--layout-content-max-width);
   margin: 0 auto;
-  padding: 0 $spacing-md;
+  padding: 0 var(--spacing-24);
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (width >= 1080px) {
   .container {
-    padding: 0 $spacing-xxl;
+    padding: 0 var(--spacing-64);
   }
 }
 
-@media (min-width: $breakpoint-xl) {
+@media (width >= 1366px) {
   .container {
-    padding: 0 $spacing-xxxxl;
+    padding: 0 var(--spacing-80);
   }
 }
 
-// --------------------------------
-// Header
-// --------------------------------
 .header {
   inline-size: 100%;
-  margin-block-end: $spacing-md;
+  margin-block-end: var(--spacing-24);
 }
 
-// --------------------------------
-// Main
-// --------------------------------
 .main {
   flex: 1 0 auto;
   display: flex;
   align-items: center;
-  margin-block-end: $spacing-xxl;
+  margin-block-end: var(--spacing-64);
 }
 
 .mainInner {
   display: grid;
   grid-template-columns: 1fr;
-  gap: $spacing-xl $spacing-lg;
+  gap: var(--spacing-48) var(--spacing-32);
   align-items: center;
 }
 
-@media (min-width: $layout-breakpoints-medium) {
+@media (width >= 768px) {
   .mainInner {
-    row-gap: $spacing-xxl;
+    row-gap: var(--spacing-64);
   }
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (width >= 1080px) {
   .mainInner {
     grid-template-columns: 1fr 1fr;
   }
 }
 
-@media (min-width: $breakpoint-xl) {
+@media (width >= 1366px) {
   .mainInner {
-    column-gap: $spacing-xxxxl;
+    column-gap: var(--spacing-80);
   }
 }
 
@@ -124,33 +106,33 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
 }
 
 .subtitle {
-  margin-bottom: $spacing-12;
+  margin-bottom: var(--spacing-12);
 }
 
 .title {
-  margin-bottom: $spacing-lg;
+  margin-bottom: var(--spacing-32);
 }
 
 .textBody {
-  margin-bottom: $spacing-lg;
+  margin-bottom: var(--spacing-32);
 }
 
 .secondaryAction {
-  margin-block-start: $spacing-sm;
+  margin-block-start: var(--spacing-12);
 }
 
-@media (min-width: $layout-breakpoints-medium) {
+@media (width >= 768px) {
   .actions {
     display: flex;
   }
 
   .secondaryAction {
     margin-block-start: 0;
-    margin-inline-start: $spacing-sm;
+    margin-inline-start: var(--spacing-12);
   }
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (width >= 1080px) {
   .left {
     justify-content: flex-end;
   }
@@ -160,9 +142,6 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
   }
 }
 
-// --------------------------------
-// Footer
-// --------------------------------
 .footer {
   flex: 0 0 auto;
 }
@@ -170,10 +149,10 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
 .footerInner {
   display: flex;
   flex-direction: column;
-  border-block-start: 1px solid $color-purple-800;
-  border-inline-start: 1px solid $color-purple-800;
-  padding: $spacing-sm $spacing-md;
-  margin-block-end: $spacing-lg;
+  border-block-start: 1px solid var(--color-purple-800);
+  border-inline-start: 1px solid var(--color-purple-800);
+  padding: var(--spacing-12) var(--spacing-24);
+  margin-block-end: var(--spacing-32);
 }
 
 .poweredByContainer {
@@ -185,18 +164,18 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
 .footerTextContainer {
   flex: 1 1 auto;
   order: 1;
-  margin-block-end: $spacing-md;
+  margin-block-end: var(--spacing-24);
 }
 
 .poweredByLogo {
-  margin-inline-start: $spacing-xs;
+  margin-inline-start: var(--spacing-6);
 
   > img {
     max-width: 133px;
   }
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (width >= 1080px) {
   .footerInner {
     flex-direction: row;
     align-items: center;
@@ -205,7 +184,7 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
   .footerTextContainer {
     order: initial;
     margin-block-end: 0;
-    margin-inline-start: $spacing-md;
+    margin-inline-start: var(--spacing-24);
   }
 
   .poweredByContainer {

package/src/BrandMoment/BrandMoment.tsx

@@ -7,7 +7,7 @@ import { Text } from '~components/Text'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { useMediaQueries } from '~components/utils/useMediaQueries'
-import styles from './BrandMoment.module.scss'
+import styles from './BrandMoment.module.css'
 
 type DeprecatedMoodProps = {
   /** @deprecated Use `variant` instead */

package/src/ButtonGroup/ButtonGroup.module.css

@@ -0,0 +1,48 @@
+.buttonGroup {
+  --focus-ring-offset: 1px;
+  --focus-ring-offset-inner: calc(-1 * var(--focus-ring-offset));
+
+  display: inline-flex;
+}
+
+.child {
+  border-radius: 0;
+}
+
+.child:focus-visible::after {
+  border-radius: 0;
+}
+
+.child:not(.firstChild) {
+  border-inline-start: 1px solid var(--color-blue-300);
+}
+
+.child:not(.firstChild, .lastChild) {
+  &:focus-visible {
+    &::after {
+      inset-inline: var(--focus-ring-offset-inner);
+    }
+  }
+}
+
+.child.firstChild {
+  border-start-start-radius: var(--border-focus-ring-border-radius);
+  border-end-start-radius: var(--border-focus-ring-border-radius);
+}
+
+.child.firstChild:focus-visible::after {
+  border-start-start-radius: var(--border-focus-ring-border-radius);
+  border-end-start-radius: var(--border-focus-ring-border-radius);
+  inset-inline-end: var(--focus-ring-offset-inner);
+}
+
+.child.lastChild {
+  border-start-end-radius: var(--border-focus-ring-border-radius);
+  border-end-end-radius: var(--border-focus-ring-border-radius);
+}
+
+.child.lastChild:focus-visible::after {
+  border-start-end-radius: var(--border-focus-ring-border-radius);
+  border-end-end-radius: var(--border-focus-ring-border-radius);
+  inset-inline-start: var(--focus-ring-offset-inner);
+}

package/src/ButtonGroup/ButtonGroup.tsx

@@ -6,7 +6,7 @@ import {
 } from '~components/Filter/FilterButton/subcomponents/FilterButtonBase'
 import { Tooltip, type TooltipProps } from '~components/Tooltip'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './ButtonGroup.module.scss'
+import styles from './ButtonGroup.module.css'
 
 const isFilterButton = (node: React.ReactNode): node is React.ReactElement<FilterButtonBaseProps> =>
   React.isValidElement(node) && node.type === FilterButtonBase