@kaizen/components 3.0.7 → 3.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.0.7",
+  "version": "3.0.9",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -78,7 +78,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.8",
-    "@headlessui/react": "^2.2.9",
+    "@headlessui/react": "^2.2.10",
     "@internationalized/date": "^3.8.2",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
@@ -110,9 +110,9 @@
     "prosemirror-schema-basic": "^1.2.4",
     "prosemirror-schema-list": "^1.5.1",
     "prosemirror-state": "^1.4.4",
-    "prosemirror-transform": "^1.11.0",
+    "prosemirror-transform": "^1.12.0",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.41.7",
+    "prosemirror-view": "^1.41.8",
     "react-animate-height": "^3.2.3",
     "react-aria": "^3.41.1",
     "react-aria-components": "^1.10.1",
@@ -122,7 +122,7 @@
     "react-popper": "^2.3.0",
     "react-select": "^5.10.2",
     "react-textfit": "^1.1.1",
-    "use-debounce": "^10.1.0",
+    "use-debounce": "^10.1.1",
     "uuid": "^13.0.0"
   },
   "dependenciesComments": {
@@ -130,9 +130,9 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^4.1.0",
+    "@cultureamp/i18n-react-intl": "^4.1.1",
     "@cultureamp/package-bundler": "^4.0.1",
-    "cssnano": "^7.1.3",
+    "cssnano": "^7.1.4",
     "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
@@ -145,7 +145,7 @@
     "jest-axe": "^10.0.0",
     "lodash.isempty": "^4.4.0",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.9",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
     "postcss-preset-env": "^11.2.0",
@@ -155,14 +155,14 @@
     "react-dom": "^19.2.4",
     "react-highlight": "^0.15.0",
     "react-intl": "^7.1.14",
-    "rollup": "^4.59.0",
+    "rollup": "^4.60.1",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.4",
     "svgo": "^4.0.1",
     "ts-patch": "^3.3.0",
     "tslib": "^2.8.1",
     "tsx": "^4.21.0",
-    "@kaizen/design-tokens": "11.0.2"
+    "@kaizen/design-tokens": "11.0.4"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/FieldMessage/FieldMessage.module.css

@@ -0,0 +1,74 @@
+@layer kz-components {
+  :root {
+    --message-icon-size: 1.25rem;
+    --validation-message-padding: 0.5625rem;
+    --form-text-color-label: rgb(var(--color-purple-800-rgb), 0.7);
+    --form-text-color-label-reversed: rgb(var(--color-white-rgb), 0.8);
+  }
+
+  .message {
+    display: flex;
+    position: relative;
+    align-items: center;
+    gap: var(--spacing-6);
+  }
+
+  .default {
+    color: var(--form-text-color-label);
+
+    &.reversed {
+      color: var(--form-text-color-label-reversed);
+    }
+  }
+
+  .error,
+  .caution {
+    border-radius: var(--border-solid-border-radius);
+    padding: var(--validation-message-padding);
+    color: var(--color-purple-800);
+  }
+
+  .error {
+    background: var(--color-red-100);
+    opacity: 1;
+
+    &.reversed {
+      background: var(--color-red-300);
+    }
+  }
+
+  .caution {
+    background: var(--color-yellow-100);
+    opacity: 1;
+
+    &.reversed {
+      background: var(--color-yellow-400);
+    }
+  }
+
+  .positionBottom {
+    margin-top: var(--spacing-6);
+  }
+
+  .positionTop {
+    margin-bottom: var(--spacing-6);
+  }
+
+  .warningIcon {
+    display: inline-flex;
+    width: var(--message-icon-size);
+    align-self: flex-start;
+
+    .error & {
+      color: var(--color-red-500);
+    }
+
+    .caution & {
+      color: var(--color-yellow-700);
+    }
+
+    .reversed & {
+      color: var(--color-purple-800);
+    }
+  }
+}

package/src/FieldMessage/FieldMessage.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { Icon } from '~components/Icon'
 import { Text } from '~components/Text'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './FieldMessage.module.scss'
+import styles from './FieldMessage.module.css'
 
 export type FieldMessageStatus = 'default' | 'success' | 'error' | 'caution'
 

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

@@ -1,21 +1,16 @@
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/spacing';
-
 @layer kz-components {
-  $height: 10px;
-
   .subtext {
-    color: $color-purple-800;
-    padding-top: $spacing-6;
+    color: var(--color-purple-800);
+    padding-top: var(--spacing-6);
     text-align: center;
-    opacity: 80%;
+    opacity: 0.8;
   }
 
   .progressBackground {
     width: 100%;
-    background: $color-gray-300;
-    border-radius: $height;
-    height: $height;
+    background: var(--color-gray-300);
+    border-radius: 10px;
+    height: 10px;
     overflow: hidden;
     position: relative;
   }
@@ -23,15 +18,15 @@
   .progress {
     position: absolute;
     inset: 0;
-    border-radius: $height;
+    border-radius: 10px;
     overflow: hidden;
     transition: transform 200ms ease;
     background-color: var(--progressbar-background-color);
   }
 
-  // ------------------------------
-  // Colors
-  // ------------------------------
+  /* ------------------------------
+  Colors
+  ------------------------------ */
   .blue {
     --progressbar-background-color: var(--color-blue-400);
   }
@@ -51,7 +46,7 @@
   .isAnimating {
     &::after {
       background: linear-gradient(90deg, transparent, var(--color-white) 75%, transparent);
-      opacity: 25%;
+      opacity: 0.25;
       content: '';
       position: absolute;
       top: 0;

package/src/ProgressBar/ProgressBar.tsx

@@ -4,7 +4,7 @@ import { Heading } from '~components/Heading'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { Label } from './subcomponents/Label'
 import { calculatePercentage } from './utils/calculatePercentage'
-import styles from './ProgressBar.module.scss'
+import styles from './ProgressBar.module.css'
 
 export type ProgressBarColor = {
   color: 'blue' | 'green' | 'red' | 'yellow'

package/src/ProgressBar/subcomponents/Label/Label.module.css

@@ -0,0 +1,7 @@
+@layer kz-components {
+  .label {
+    padding-bottom: var(--spacing-6);
+    color: var(--color-purple-800);
+    text-align: center;
+  }
+}

package/src/ProgressBar/subcomponents/Label/Label.tsx

@@ -1,6 +1,6 @@
 import React, { type ReactNode } from 'react'
 import { Heading } from '~components/Heading'
-import styles from './Label.module.scss'
+import styles from './Label.module.css'
 
 type Label = {
   content: ReactNode

package/dist/cjs/src/FieldMessage/FieldMessage.module.scss.cjs

@@ -1,13 +0,0 @@
-'use strict';
-
-var modules_dbd9cdc4 = {
-  "message": "FieldMessage_module_message__2f060ca4",
-  "default": "FieldMessage_module_default__2f060ca4",
-  "reversed": "FieldMessage_module_reversed__2f060ca4",
-  "error": "FieldMessage_module_error__2f060ca4",
-  "caution": "FieldMessage_module_caution__2f060ca4",
-  "positionBottom": "FieldMessage_module_positionBottom__2f060ca4",
-  "positionTop": "FieldMessage_module_positionTop__2f060ca4",
-  "warningIcon": "FieldMessage_module_warningIcon__2f060ca4"
-};
-module.exports = modules_dbd9cdc4;

package/dist/cjs/src/ProgressBar/ProgressBar.module.scss.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var modules_ee15117b = {
-  "subtext": "ProgressBar_module_subtext__4a4d0fe0",
-  "progressBackground": "ProgressBar_module_progressBackground__4a4d0fe0",
-  "progress": "ProgressBar_module_progress__4a4d0fe0",
-  "blue": "ProgressBar_module_blue__4a4d0fe0",
-  "green": "ProgressBar_module_green__4a4d0fe0",
-  "red": "ProgressBar_module_red__4a4d0fe0",
-  "yellow": "ProgressBar_module_yellow__4a4d0fe0",
-  "isAnimating": "ProgressBar_module_isAnimating__4a4d0fe0",
-  "pulse": "ProgressBar_module_pulse__4a4d0fe0"
-};
-module.exports = modules_ee15117b;

package/dist/cjs/src/ProgressBar/subcomponents/Label/Label.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var modules_aa63a669 = {
-  "label": "Label_module_label__ebe7596a"
-};
-module.exports = modules_aa63a669;

package/dist/esm/src/FieldMessage/FieldMessage.module.scss.mjs

@@ -1,11 +0,0 @@
-var modules_dbd9cdc4 = {
-  "message": "FieldMessage_module_message__2f060ca4",
-  "default": "FieldMessage_module_default__2f060ca4",
-  "reversed": "FieldMessage_module_reversed__2f060ca4",
-  "error": "FieldMessage_module_error__2f060ca4",
-  "caution": "FieldMessage_module_caution__2f060ca4",
-  "positionBottom": "FieldMessage_module_positionBottom__2f060ca4",
-  "positionTop": "FieldMessage_module_positionTop__2f060ca4",
-  "warningIcon": "FieldMessage_module_warningIcon__2f060ca4"
-};
-export { modules_dbd9cdc4 as default };

package/dist/esm/src/ProgressBar/ProgressBar.module.scss.mjs

@@ -1,12 +0,0 @@
-var modules_ee15117b = {
-  "subtext": "ProgressBar_module_subtext__4a4d0fe0",
-  "progressBackground": "ProgressBar_module_progressBackground__4a4d0fe0",
-  "progress": "ProgressBar_module_progress__4a4d0fe0",
-  "blue": "ProgressBar_module_blue__4a4d0fe0",
-  "green": "ProgressBar_module_green__4a4d0fe0",
-  "red": "ProgressBar_module_red__4a4d0fe0",
-  "yellow": "ProgressBar_module_yellow__4a4d0fe0",
-  "isAnimating": "ProgressBar_module_isAnimating__4a4d0fe0",
-  "pulse": "ProgressBar_module_pulse__4a4d0fe0"
-};
-export { modules_ee15117b as default };

package/dist/esm/src/ProgressBar/subcomponents/Label/Label.module.scss.mjs

@@ -1,4 +0,0 @@
-var modules_aa63a669 = {
-  "label": "Label_module_label__ebe7596a"
-};
-export { modules_aa63a669 as default };

package/src/FieldMessage/FieldMessage.module.scss

@@ -1,76 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/border';
-
-@layer kz-components {
-  $message-icon-size: 1.25rem;
-  $validation-message-padding: 0.5625rem;
-  $form-text-color-label: rgba($color-purple-800-rgb, 0.7);
-  $form-text-color-label-reversed: rgba($color-white-rgb, 0.8);
-
-  .message {
-    display: flex;
-    position: relative;
-    align-items: center;
-    gap: $spacing-6;
-  }
-
-  .default {
-    color: $form-text-color-label;
-
-    &.reversed {
-      color: $form-text-color-label-reversed;
-    }
-  }
-
-  .error,
-  .caution {
-    border-radius: $border-solid-border-radius;
-    padding: $validation-message-padding;
-    color: $color-purple-800;
-  }
-
-  .error {
-    background: $color-red-100;
-    opacity: 100%;
-
-    &.reversed {
-      background: $color-red-300;
-    }
-  }
-
-  .caution {
-    background: $color-yellow-100;
-    opacity: 100%;
-
-    &.reversed {
-      background: $color-yellow-400;
-    }
-  }
-
-  .positionBottom {
-    margin-top: $spacing-6;
-  }
-
-  .positionTop {
-    margin-bottom: $spacing-6;
-  }
-
-  .warningIcon {
-    display: inline-flex;
-    width: $message-icon-size;
-    align-self: flex-start;
-
-    .error & {
-      color: $color-red-500;
-    }
-
-    .caution & {
-      color: var(--color-yellow-700);
-    }
-
-    .reversed & {
-      color: $color-purple-800;
-    }
-  }
-}

package/src/ProgressBar/subcomponents/Label/Label.module.scss

@@ -1,10 +0,0 @@
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/spacing';
-
-@layer kz-components {
-  .label {
-    padding-bottom: $spacing-6;
-    color: $color-purple-800;
-    text-align: center;
-  }
-}