@kaizen/components 1.78.0 → 1.79.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.78.0",
+  "version": "1.79.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -103,25 +103,25 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@headlessui/react": "^2.2.2",
-    "@internationalized/date": "^3.8.0",
+    "@headlessui/react": "^2.2.4",
+    "@internationalized/date": "^3.8.1",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
-    "@react-aria/button": "^3.13.0",
-    "@react-aria/datepicker": "^3.14.2",
-    "@react-aria/focus": "^3.20.2",
-    "@react-aria/i18n": "^3.12.8",
-    "@react-aria/listbox": "^3.14.3",
-    "@react-aria/menu": "^3.18.2",
-    "@react-aria/overlays": "^3.27.0",
-    "@react-aria/select": "^3.15.4",
-    "@react-aria/utils": "^3.28.2",
-    "@react-stately/collections": "^3.12.3",
-    "@react-stately/datepicker": "^3.14.0",
-    "@react-stately/list": "^3.12.1",
-    "@react-stately/menu": "^3.9.3",
-    "@react-stately/select": "^3.6.12",
-    "@react-types/shared": "^3.29.0",
+    "@react-aria/button": "^3.13.1",
+    "@react-aria/datepicker": "^3.14.3",
+    "@react-aria/focus": "^3.20.3",
+    "@react-aria/i18n": "^3.12.9",
+    "@react-aria/listbox": "^3.14.4",
+    "@react-aria/menu": "^3.18.3",
+    "@react-aria/overlays": "^3.27.1",
+    "@react-aria/select": "^3.15.5",
+    "@react-aria/utils": "^3.29.0",
+    "@react-stately/collections": "^3.12.4",
+    "@react-stately/datepicker": "^3.14.1",
+    "@react-stately/list": "^3.12.2",
+    "@react-stately/menu": "^3.9.4",
+    "@react-stately/select": "^3.6.13",
+    "@react-types/shared": "^3.29.1",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "lodash.debounce": "^4.0.8",
@@ -136,10 +136,10 @@
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.10.4",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.39.2",
+    "prosemirror-view": "^1.39.3",
     "react-animate-height": "^3.2.3",
-    "react-aria": "^3.39.0",
-    "react-aria-components": "^1.8.0",
+    "react-aria": "^3.40.0",
+    "react-aria-components": "^1.9.0",
     "react-day-picker": "9.6.7",
     "react-focus-lock": "^2.13.6",
     "react-focus-on": "^3.9.4",
@@ -154,9 +154,9 @@
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
   },
   "devDependencies": {
-    "@cultureamp/frontend-apis": "^13.3.0",
-    "@cultureamp/i18n-react-intl": "^2.8.0",
-    "@cultureamp/package-bundler": "^2.3.1",
+    "@cultureamp/frontend-apis": "13.3.0",
+    "@cultureamp/i18n-react-intl": "^2.9.1",
+    "@cultureamp/package-bundler": "^2.3.2",
     "@testing-library/dom": "^10.4.0",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
@@ -174,7 +174,7 @@
     "postcss-import": "^16.1.0",
     "postcss-preset-env": "^10.1.6",
     "postcss-scss": "^4.0.9",
-    "query-string": "^9.1.2",
+    "query-string": "^9.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-highlight": "^0.15.0",
@@ -190,7 +190,8 @@
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",
-    "typescript": "Installed in root"
+    "typescript": "Installed in root",
+    "frontend-apis": "There's an unresolved dep with 13.4.0 and onwards with node/msw, so we are locking to 13.3.0 for this update."
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.9",

package/src/Avatar/Avatar.module.css

@@ -1,138 +1,140 @@
-.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,
+@layer kz-components {
+  .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: rgb(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);
+    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/AvatarGroup/AvatarGroup.module.css

@@ -1,57 +1,59 @@
-.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);
+@layer kz-components {
+  .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);
+  }
 }