@kaizen/components 3.1.4 → 3.1.6

package/dist/cjs/src/Avatar/Avatar.cjs

@@ -61,9 +61,13 @@ var renderInitials = function (fullName, alt, size, disableInitials) {
     title: alt
   }, isLongName ?
   // Only called if 3 or more initials, fits text width for long names
+  //
+  // Ignore Chromatic diffs since the font-size calculation has shown itself to be slightly non-deterministic,
+  // causing flaky tests.
   React__default.default.createElement(reactTextfit.Textfit, {
     mode: "single",
-    max: getMaxFontSizePixels(size)
+    max: getMaxFontSizePixels(size),
+    "data-chromatic": "ignore"
   }, initials) : getInitials(fullName, size === 'small'));
 };
 /**

package/dist/cjs/src/TextField/TextField.cjs

@@ -10,7 +10,7 @@ var Input = require('../Input/Input/Input.cjs');
 require('../Input/InputRange/InputRange.cjs');
 require('../Input/InputSearch/InputSearch.cjs');
 var Label = require('../Label/Label.cjs');
-var TextField_module = require('./TextField.module.scss.cjs');
+var TextField_module = require('./TextField.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e

package/dist/cjs/src/TextField/TextField.module.css.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var modules_c1d23762 = {
+  "input": "TextField_module_input__d7c5e4f5",
+  "icon": "TextField_module_icon__d7c5e4f5",
+  "success": "TextField_module_success__d7c5e4f5",
+  "reversed": "TextField_module_reversed__d7c5e4f5",
+  "disabled": "TextField_module_disabled__d7c5e4f5"
+};
+module.exports = modules_c1d23762;

package/dist/esm/src/Avatar/Avatar.mjs

@@ -53,9 +53,13 @@ var renderInitials = function (fullName, alt, size, disableInitials) {
   }, isLongName ? (
   /*#__PURE__*/
   // Only called if 3 or more initials, fits text width for long names
+  //
+  // Ignore Chromatic diffs since the font-size calculation has shown itself to be slightly non-deterministic,
+  // causing flaky tests.
   React.createElement(Textfit, {
     mode: "single",
-    max: getMaxFontSizePixels(size)
+    max: getMaxFontSizePixels(size),
+    "data-chromatic": "ignore"
   }, initials)) : getInitials(fullName, size === 'small')));
 };
 /**

package/dist/esm/src/TextField/TextField.mjs

@@ -8,7 +8,7 @@ import { Input } from '../Input/Input/Input.mjs';
 import '../Input/InputRange/InputRange.mjs';
 import '../Input/InputSearch/InputSearch.mjs';
 import { Label } from '../Label/Label.mjs';
-import modules_555c3abf from './TextField.module.scss.mjs';
+import modules_c1d23762 from './TextField.module.css.mjs';
 
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928705/Text+Field Guidance} |
@@ -39,7 +39,7 @@ const TextField = /*#__PURE__*/function () {
       id: "".concat(id, "-field-group"),
       "data-testid": "".concat(id, "-field-group"),
       inline: inline,
-      classNameOverride: classnames(reversed && modules_555c3abf.reversed)
+      classNameOverride: classnames(reversed && modules_c1d23762.reversed)
     }, /*#__PURE__*/React.createElement(Label, {
       id: "".concat(id, "-field-label"),
       "data-testid": "".concat(id, "-field-label"),
@@ -51,27 +51,27 @@ const TextField = /*#__PURE__*/function () {
       id: "".concat(id, "-field-input"),
       "data-testid": "".concat(id, "-field-input"),
       "aria-describedby": ariaDescribedBy,
-      classNameOverride: modules_555c3abf.input,
+      classNameOverride: modules_c1d23762.input,
       disabled: disabled,
       reversed: reversed,
       status: status,
       startIconAdornment: icon,
       endIconAdornment: status === 'success' && (/*#__PURE__*/React.createElement("div", {
-        className: classnames(modules_555c3abf.icon, modules_555c3abf.success, disabled && modules_555c3abf.disabled)
+        className: classnames(modules_c1d23762.icon, modules_c1d23762.success, disabled && modules_c1d23762.disabled)
       }, /*#__PURE__*/React.createElement(Icon, {
         name: "check_circle",
         isPresentational: true,
         isFilled: true
       })))
     }, restProps)), validationMessage && (/*#__PURE__*/React.createElement("div", {
-      className: classnames(modules_555c3abf.message, disabled && modules_555c3abf.disabled)
+      className: classnames(modules_c1d23762.message, disabled && modules_c1d23762.disabled)
     }, /*#__PURE__*/React.createElement(FieldMessage, {
       id: validationMessageAria,
       message: validationMessage,
       status: status,
       reversed: reversed
     }))), description && (/*#__PURE__*/React.createElement("div", {
-      className: classnames(modules_555c3abf.message, disabled && modules_555c3abf.disabled)
+      className: classnames(modules_c1d23762.message, disabled && modules_c1d23762.disabled)
     }, /*#__PURE__*/React.createElement(FieldMessage, {
       id: descriptionAria,
       message: description,

package/dist/esm/src/TextField/TextField.module.css.mjs

@@ -0,0 +1,8 @@
+var modules_c1d23762 = {
+  "input": "TextField_module_input__d7c5e4f5",
+  "icon": "TextField_module_icon__d7c5e4f5",
+  "success": "TextField_module_success__d7c5e4f5",
+  "reversed": "TextField_module_reversed__d7c5e4f5",
+  "disabled": "TextField_module_disabled__d7c5e4f5"
+};
+export { modules_c1d23762 as default };

package/dist/styles.css

@@ -131,7 +131,7 @@
 @layer kz-components{.RadioGroup_module_radioGroupLabel__85bbd39b{margin-bottom:var(--spacing-sm);label{.ideal-sans &{padding-top:0}}&.RadioGroup_module_reversed__85bbd39b{color:var(--color-white)}}.RadioGroup_module_radioGroupContainer__85bbd39b{display:flex;flex-direction:column;margin-bottom:var(--spacing-sm);&.RadioGroup_module_noBottomMargin__85bbd39b{margin-bottom:0}}}
 @layer kz-components{.RichTextContent_module_content__d668dde1>.ProseMirror{font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-paragraph-body-font-weight,400);font-size:var(--typography-paragraph-body-font-size,1rem);line-height:var(--typography-paragraph-body-line-height,1.5rem);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);position:relative;white-space:pre-wrap!important;box-sizing:content-box;color:var(--color-purple-800,#2f2438)}.RichTextContent_module_content__d668dde1>.ProseMirror>p{margin:0 0 var(--spacing-16,1rem)}.RichTextContent_module_content__d668dde1>.ProseMirror>:last-child{margin-bottom:0}.RichTextContent_module_content__d668dde1>.ProseMirror>:last-child>li:last-of-type p{margin-bottom:0}.RichTextContent_module_content__d668dde1>.ProseMirror>:first-child{margin-top:0}.RichTextContent_module_content__d668dde1>.ProseMirror>:first-child>li:first-of-type p{margin-top:0}.RichTextContent_module_content__d668dde1>.ProseMirror a{color:var(--color-blue-500,#0168b3)}.RichTextContent_module_content__d668dde1>.ProseMirror a:hover{text-decoration:none}.RichTextContent_module_content__d668dde1>.ProseMirror ol,.RichTextContent_module_content__d668dde1>.ProseMirror ul{padding-inline-start:var(--spacing-40,2.5rem)}.RichTextContent_module_content__d668dde1>.ProseMirror ol{list-style-type:decimal}.RichTextContent_module_content__d668dde1>.ProseMirror ol ol{list-style-type:lower-alpha}.RichTextContent_module_content__d668dde1>.ProseMirror ol ol ol{list-style-type:lower-roman}.RichTextContent_module_content__d668dde1>.ProseMirror ol ol ol ol,.RichTextContent_module_content__d668dde1>.ProseMirror ol ol ol ul{padding-inline-start:var(--spacing-40,2.5rem)}.RichTextContent_module_content__d668dde1>.ProseMirror ol ol ol ol{list-style-type:decimal}.RichTextContent_module_content__d668dde1>.ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}.RichTextContent_module_content__d668dde1>.ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}.RichTextContent_module_content__d668dde1>.ProseMirror ol ol ol ul{list-style-type:disc}.RichTextContent_module_content__d668dde1>.ProseMirror ol ol ol ul ul{list-style-type:circle}.RichTextContent_module_content__d668dde1>.ProseMirror ol ol ol ul ul ul{list-style-type:square}.RichTextContent_module_content__d668dde1>.ProseMirror ul{list-style-type:disc}.RichTextContent_module_content__d668dde1>.ProseMirror ul ul{list-style-type:circle}.RichTextContent_module_content__d668dde1>.ProseMirror ul ul ul{list-style-type:square}.RichTextContent_module_content__d668dde1>.ProseMirror ul ul ul ol,.RichTextContent_module_content__d668dde1>.ProseMirror ul ul ul ul{padding-inline-start:var(--spacing-40,2.5rem)}.RichTextContent_module_content__d668dde1>.ProseMirror ul ul ul ol{list-style-type:decimal}.RichTextContent_module_content__d668dde1>.ProseMirror ul ul ul ol ol{list-style-type:lower-alpha}.RichTextContent_module_content__d668dde1>.ProseMirror ul ul ul ol ol ol{list-style-type:lower-roman}.RichTextContent_module_content__d668dde1>.ProseMirror ul ul ul ul{list-style-type:disc}.RichTextContent_module_content__d668dde1>.ProseMirror ul ul ul ul ul{list-style-type:circle}.RichTextContent_module_content__d668dde1>.ProseMirror ul ul ul ul ul ul{list-style-type:square}}
 @layer kz-components{.EditableRichTextContent_module_editorLabel__a477f8e9{margin-bottom:var(--spacing-6,.375rem);display:inline-block}.EditableRichTextContent_module_editableContainer__a477f8e9 .ProseMirror{padding:calc(var(--spacing-12, .75rem) - var(--border-solid-border-width, 2px));position:relative;border-radius:var(--border-solid-border-radius,7px);border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) var(--color-gray-500,#878792);transition:background-color var(--animation-duration-immediate,.1s),border-color var(--animation-duration-immediate,.1s);background-color:var(--color-white,#fff);min-height:var(--typography-paragraph-body-line-height,1.5rem)}.EditableRichTextContent_module_editableContainer__a477f8e9:hover .ProseMirror{background-color:var(--color-gray-200,#f4f4f5)}.EditableRichTextContent_module_editableContainer__a477f8e9 .EditableRichTextContent_module_hiddenButton__a477f8e9:focus-within+*>.ProseMirror{background-color:var(--color-gray-200,#f4f4f5)}.EditableRichTextContent_module_editableContainer__a477f8e9 .EditableRichTextContent_module_hiddenButton__a477f8e9:focus-within+*>.ProseMirror:before{pointer-events:none;content:"";position:absolute;background:transparent;border:var(--border-focus-ring-border-width,2px) var(--border-focus-ring-border-style,solid) var(--color-blue-500,#0168b3);border-radius:10px;inset:calc(var(--border-focus-ring-border-width, 2px)*2*-1 + -1px);z-index:1}}
-@layer kz-components{.TextField_module_input__e4240d26{margin-top:var(--spacing-6)}.TextField_module_icon__e4240d26{color:var(--textfield-icon-color);animation-duration:var(--animation-duration-slow,.4s);animation-fill-mode:forwards;animation-name:TextField_module_fade0To1__e4240d26}@keyframes TextField_module_fade0To1__e4240d26{0%{opacity:0}to{opacity:1}}.TextField_module_success__e4240d26{--textfield-icon-color:var(--color-green-500)}.TextField_module_reversed__e4240d26 .TextField_module_success__e4240d26{--textfield-icon-color:var(--color-green-400)}.TextField_module_disabled__e4240d26{opacity:.3}}
+@layer kz-components{.TextField_module_input__d7c5e4f5{margin-top:var(--spacing-6)}.TextField_module_icon__d7c5e4f5{color:var(--textfield-icon-color);animation-name:TextField_module_fadeIn__d7c5e4f5;animation-duration:var(--animation-duration-slow);animation-fill-mode:forwards}.TextField_module_success__d7c5e4f5{--textfield-icon-color:var(--color-green-500);.TextField_module_reversed__d7c5e4f5 &{--textfield-icon-color:var(--color-green-400)}}.TextField_module_disabled__d7c5e4f5{opacity:.3}}@keyframes TextField_module_fadeIn__d7c5e4f5{0%{opacity:0}to{opacity:1}}
 @layer kz-components{.LinkModal_module_validationErrorMessage__310c61a4 ul{margin-bottom:0}}
 @layer kz-components{.LinkPopover_module_popoverContent__f86a5e19{display:flex;align-items:center;justify-content:center}.LinkPopover_module_popoverLinkContainer__f86a5e19{padding-inline:var(--spacing-8,.5rem) var(--spacing-12,.75rem)}.LinkPopover_module_popoverLink__f86a5e19{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.LinkPopover_module_paragraphFlex__f86a5e19{display:inline-flex}.LinkPopover_module_popoverActions__f86a5e19{padding-inline:var(--spacing-4,.25rem) var(--spacing-4,.25rem);border-left:1px solid rgba(var(--color-gray-600-rgb,82,78,86),.1)}}
 @layer kz-components{.ToggleIconButton_module_button__c37ed031{border:none;background-color:var(--color-white,#fff);width:3rem;height:3rem;border-radius:var(--border-solid-border-radius,7px);display:flex;align-items:center;justify-content:center;position:relative;transition:background-color var(--animation-duration-immediate,.1s)}.ToggleIconButton_module_button__c37ed031:focus{outline:none}.ToggleIconButton_module_button__c37ed031:focus-visible:after{content:"";position:absolute;background:transparent;border-radius:var(--border-focus-ring-border-radius,10px);border-width:var(--border-focus-ring-border-width,2px);border-style:var(--border-focus-ring-border-style,solid);border-color:var(--color-blue-500,#0168b3);inset:-3px}.ToggleIconButton_module_default__c37ed031{background-color:var(--color-white,#fff);color:var(--color-purple-800,#2f2438)}.ToggleIconButton_module_default__c37ed031:focus-visible,.ToggleIconButton_module_default__c37ed031:hover{background-color:var(--color-gray-200,#f4f4f5)}.ToggleIconButton_module_default__c37ed031.ToggleIconButton_module_active__c37ed031{background-color:var(--color-gray-300,#eaeaec);color:var(--color-purple-800,#2f2438)}.ToggleIconButton_module_secondary__c37ed031{background-color:var(--color-white,#fff);color:var(--color-blue-500,#0168b3)}.ToggleIconButton_module_secondary__c37ed031:focus-visible,.ToggleIconButton_module_secondary__c37ed031:hover{background-color:var(--color-blue-100,#e6f6ff)}.ToggleIconButton_module_secondary__c37ed031.ToggleIconButton_module_active__c37ed031{background-color:var(--color-blue-200,#bde2f5)}.ToggleIconButton_module_primary__c37ed031{background-color:var(--color-blue-500,#0168b3);color:var(--color-white,#fff)}.ToggleIconButton_module_primary__c37ed031:focus-visible,.ToggleIconButton_module_primary__c37ed031:hover{background-color:var(--color-blue-600,#004970)}.ToggleIconButton_module_primary__c37ed031.ToggleIconButton_module_active__c37ed031{background-color:var(--color-blue-700,#003157)}.ToggleIconButton_module_destructive__c37ed031{background-color:var(--color-red-500,#c93b55);color:var(--color-white,#fff)}.ToggleIconButton_module_destructive__c37ed031:focus-visible,.ToggleIconButton_module_destructive__c37ed031:hover{background-color:var(--color-red-600,#a82433)}.ToggleIconButton_module_destructive__c37ed031.ToggleIconButton_module_active__c37ed031{background-color:var(--color-red-700,#6c1e20)}.ToggleIconButton_module_secondaryDestructive__c37ed031{background-color:var(--color-white,#fff);color:var(--color-red-600,#a82433)}.ToggleIconButton_module_secondaryDestructive__c37ed031:focus-visible,.ToggleIconButton_module_secondaryDestructive__c37ed031:hover{background-color:var(--color-red-100,#fdeaee)}.ToggleIconButton_module_secondaryDestructive__c37ed031.ToggleIconButton_module_active__c37ed031{background-color:var(--color-red-200,#f9c2cb)}.ToggleIconButton_module_disabled__c37ed031{opacity:30%;pointer-events:none}.ToggleIconButton_module_disabled__c37ed031:focus-visible:after{color:rgba(var(--color-purple-800-rgb,47,36,56),.3);outline-offset:-2px;background-color:transparent;border-color:transparent;opacity:100%;outline:var(--color-purple-800,#2f2438) var(--border-solid-border-style,solid) var(--border-focus-ring-border-width,2px)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.1.4",
+  "version": "3.1.6",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -130,7 +130,7 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^4.1.3",
+    "@cultureamp/i18n-react-intl": "^4.1.4",
     "@cultureamp/package-bundler": "^4.0.1",
     "cssnano": "^7.1.9",
     "@testing-library/dom": "^10.4.1",
@@ -151,18 +151,18 @@
     "postcss-preset-env": "^11.3.0",
     "postcss-scss": "^4.0.9",
     "query-string": "^9.4.0",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "react-highlight": "^0.15.0",
-    "react-intl": "^10.1.11",
+    "react-intl": "^10.1.13",
     "rollup": "^4.60.4",
     "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.22.3",
-    "@kaizen/design-tokens": "11.0.9"
+    "tsx": "^4.22.4",
+    "@kaizen/design-tokens": "11.0.10"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/Avatar/Avatar.tsx

@@ -97,7 +97,10 @@ const renderInitials = (
     <abbr className={classnames(styles.initials, isLongName && styles.longName)} title={alt}>
       {isLongName ? (
         // Only called if 3 or more initials, fits text width for long names
-        <Textfit mode="single" max={getMaxFontSizePixels(size)}>
+        //
+        // Ignore Chromatic diffs since the font-size calculation has shown itself to be slightly non-deterministic,
+        // causing flaky tests.
+        <Textfit mode="single" max={getMaxFontSizePixels(size)} data-chromatic="ignore">
           {initials}
         </Textfit>
       ) : (

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

@@ -1,5 +1,3 @@
-@import '../../styles/utils/animation';
-
 @layer kz-components {
   .input {
     margin-top: var(--spacing-6);
@@ -8,7 +6,10 @@
   .icon {
     color: var(--textfield-icon-color);
 
-    @include ca-animation-fade(in);
+    /* Replace @include ca-animation-fade(in) */
+    animation-name: fade-in;
+    animation-duration: var(--animation-duration-slow);
+    animation-fill-mode: forwards;
   }
 
   .success {
@@ -23,3 +24,14 @@
     opacity: 0.3;
   }
 }
+
+/* Declare keyframes for ca-animation(fade) */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/src/TextField/TextField.tsx

@@ -5,7 +5,7 @@ import { FieldMessage } from '~components/FieldMessage'
 import { Icon } from '~components/Icon'
 import { Input, type InputProps } from '~components/Input'
 import { Label } from '~components/Label'
-import styles from './TextField.module.scss'
+import styles from './TextField.module.css'
 
 type OmittedInputProps = 'startIconAdornment' | 'endIconAdornment' | 'ariaDescribedBy' | 'ariaLabel'
 

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

@@ -1,10 +0,0 @@
-'use strict';
-
-var modules_555c3abf = {
-  "input": "TextField_module_input__e4240d26",
-  "icon": "TextField_module_icon__e4240d26",
-  "success": "TextField_module_success__e4240d26",
-  "reversed": "TextField_module_reversed__e4240d26",
-  "disabled": "TextField_module_disabled__e4240d26"
-};
-module.exports = modules_555c3abf;

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

@@ -1,8 +0,0 @@
-var modules_555c3abf = {
-  "input": "TextField_module_input__e4240d26",
-  "icon": "TextField_module_icon__e4240d26",
-  "success": "TextField_module_success__e4240d26",
-  "reversed": "TextField_module_reversed__e4240d26",
-  "disabled": "TextField_module_disabled__e4240d26"
-};
-export { modules_555c3abf as default };